Hexo_NexT主题-个性化配置记录

一、图片模式

1.1 新建博文

新建博文，设置type: "picture"，使用{\% gp x-x \%} ... {\% endgp \%}标签引用要展示的图片地址，如下所示：

---
title: Naruto-Pictures
categories: [图片]
tags: [picture,naruto]
date: 2016-09-02 14:36:04
keywords: picture,naruto
type: "picture"
top: 999
---
{% gp 5-3 %}
![](http://oapjp6spr.bkt.clouddn.com/18210.jpg)
![](http://oapjp6spr.bkt.clouddn.com/196232.jpg)
![](http://oapjp6spr.bkt.clouddn.com/224147.jpg)
![](http://oapjp6spr.bkt.clouddn.com/199301.jpg)
![](http://oapjp6spr.bkt.clouddn.com/213318.jpg)
{% endgp %}

1.2 图片展示效果

{\% gp 5-3 \%}：设置图片展示效果，参考theme/next/scripts/tags/group-pictures.js 注释示意图。

1.3 修复图片展示

主题目前首页可以正常显示步骤1.2 设置的图片效果，但是点击进入后显示效果 _丢失_，所以需要修改一下文件 themes\next\source\css\_common\components\tags\group-pictures.styl 中的以下样式：

.page-post-detail .post-body .group-picture-column {
  // float: none;
  margin-top: 10px;
  // width: auto !important;
  img { margin: 0 auto; }
}

二、博文置顶

2.1 修改`hexo-generator-index`插件

替换文件：node_modules/hexo-generator-index/lib/generator.js 为：generator.js

2.2 设置文章置顶

在文章 Front-matter 中添加 top 值，数值越大文章越靠前，如：

---
title: Naruto 图集
categories: [图片]
tags: [picture,naruto]
date: 2016-09-02 14:36:04
keywords: picture,naruto
type: "picture"
top: 10
---

三、设置静态背景图像

设置背景图片，且不随页面滚动。

将背景图文件background.jpg置于/themes/next/source/images/文件夹内

修改/themes/next/source/css/_custom/custom.styl，设置如下：

// Custom styles.
body {
  background: url(/images/background.jpg);
  background-attachment: fixed;
}

四、修改主题颜色

打开hexo/themes/next/source/css/_variables/base.styl找到Colors代码段，如下：

// Colors
// colors for use across theme.
// --------------------------------------------------
  $whitesmoke   = #f5f5f5
  $gainsboro    = #eee  //这个是边栏头像外框的颜色，
  $gray-lighter = #ddd  //文章中插入图片边框颜色
  $grey-light   = #ccc  //文章之间分割线、下划线颜色
  $grey         = #bbb  //页面选中圆点颜色
  $grey-dark    = #999
  $grey-dim     = #666 //侧边栏目录字体颜色
  $black-light  = #555 //修改文章字体颜色
  $black-dim    = #333
  $black-deep   = #495a80  //修改主题的颜色，这里我已经改成老蓝色了。
  $red          = #ff2a2a
  $blue-bright  = #87daff
  $blue         = #0684bd
  $blue-deep    = #262a30
  $orange       = #F39D01 //浏览文章时，目录选中的颜色

其他的可以自行更改，看看效果

五、安装`busuanzi.js`脚本

如果你使用的是NexT主题（其他主题类似），打开/theme/next/layout/_partial/footer.swig文件，拷贝下面的代码至文件的开头。

1 2	<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> </script>

显示统计标签

同样编辑/theme/next/layout/_ partial/footer.swig文件。

如果你想要显示pv统计量，复制以下代码至你想要放置的位置，

1
2
3

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

如果你想要显示uv统计量，复制以下代码至你想要放置的位置，

1
2
3

<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

六、修改内容宽度

现在一般的笔记本都在15寸以上，博客页面两侧留白太多就显得没有必要，并且不美观，所以有必要调整一下宽度。（可以慢慢试着调整到最合适的状态）

找到/themes/next/source/css/_common/components/post/post-expand.styl，找到：
1
2
3
@media (max-width: 767px)
改为：
@media (max-width: 1060px)

找到：/themes/next/source/css/_variables/base.styl ，找到：

$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px
改为：
$main-desktop                   = 1060px
$main-desktop-large             = 1200px
$content-desktop                = 800px

七、pisces文章的距离以及文章分割线长度修改

更改主题路径下/source/css/_common/components/post/posts-expand.styl 中

.posts-expand {
  .post-eof {
    display: block;
    margin: 60px auto 50px; //文章间距
    width: 8%;  //分割线长度
    height: 1px;
    background: $grey-light;
    text-align: center;
  }
}

八、修改首页、归档、标签页文章数

安装相关插件

输入如下命令

1
2
3

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

配置文件

安装完插件后，在站点配置文件中，添加如下内容

index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

其中per_page字段是你希望设定的显示篇数。index, archive及tag开头分表代表主页，归档页面和标签页面。

九、修改正文顶部与标题行间距

在博客首页，文章预览正文的顶部与标题行的默认间距过大，不是很美观，如下：

修改next/source/css/_custom/custom.styl即可，添加如下：

1
2
3

.posts-expand .post-meta {
	margin: 10px 0 10px 0;
}

hexo d --g后即可看到修改的样式

参考资料

使用Hexo基于GitHub Pages搭建个人博客（三）

hexo next主题更换了背景图，如何让背景图不随着页面移动而移动？

修改Hexo的Next主题

Hexo的NexT主题个性化：添加文章阅读量

HEXO+GitHub搭建博客 - 优化

在pisces中如何把文章间的距离改小呢？

NexT主题个性化设置