Hexo_NexT主题-个性化配置记录
在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 %}
{% endgp %}
1.2 图片展示效果
{\% gp 5-3 \%}：设置图片展示效果，参考theme/next/scripts/tags/group-pictures.js 注释示意图。
二、博文置顶
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文件，拷贝下面的代码至文件的开头。
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
显示统计标签
同样编辑/theme/next/layout/_ partial/footer.swig文件。
如果你想要显示pv统计量，复制以下代码至你想要放置的位置，
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
如果你想要显示uv统计量，复制以下代码至你想要放置的位置，
<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，找到：
@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;
}
}
