在next主題配置過程中忍宋，做了一些個性化修改痕貌，包括圖片模式、博文置頂讶踪、背景修改芯侥、主題顏色、不蒜子統(tǒng)計(jì)顯示乳讥、修改內(nèi)容寬度以及文章分割線長度和間距修改柱查。
博客原文：點(diǎn)擊此處
一、圖片模式
1.1 新建博文
新建博文云石，設(shè)置type: "picture"唉工，使用{\% gp x-x \%} ... {\% endgp \%}標(biāo)簽引用要展示的圖片地址，如下所示：
---
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 \%}：設(shè)置圖片展示效果汹忠，參考theme/next/scripts/tags/group-pictures.js 注釋示意圖淋硝。
二、博文置頂
2.1 修改hexo-generator-index插件
替換文件：node_modules/hexo-generator-index/lib/generator.js 為：generator.js
2.2 設(shè)置文章置頂
在文章 Front-matter 中添加 top 值宽菜，數(shù)值越大文章越靠前谣膳，如：
---
title: Naruto 圖集
categories: [圖片]
tags: [picture,naruto]
date: 2016-09-02 14:36:04
keywords: picture,naruto
type: "picture"
top: 10
---
三、設(shè)置靜態(tài)背景圖像
設(shè)置背景圖片铅乡，且不隨頁面滾動继谚。
將背景圖文件background.jpg置于/themes/next/source/images/文件夾內(nèi)
修改/themes/next/source/css/_custom/custom.styl，設(shè)置如下：
// 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 //頁面選中圓點(diǎn)顏色
$grey-dark = #999
$grey-dim = #666 //側(cè)邊欄目錄字體顏色
$black-light = #555 //修改文章字體顏色
$black-dim = #333
$black-deep = #495a80 //修改主題的顏色诡壁，這里我已經(jīng)改成老藍(lán)色了济瓢。
$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>
顯示統(tǒng)計(jì)標(biāo)簽
同樣編輯/theme/next/layout/_ partial/footer.swig文件。
如果你想要顯示pv統(tǒng)計(jì)量懊直，復(fù)制以下代碼至你想要放置的位置，
<span id="busuanzi_container_site_pv">
本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
如果你想要顯示uv統(tǒng)計(jì)量火鼻，復(fù)制以下代碼至你想要放置的位置室囊，
<span id="busuanzi_container_site_uv">
本站訪客數(shù)<span id="busuanzi_value_site_uv"></span>人次
</span>
六、修改內(nèi)容寬度
現(xiàn)在一般的筆記本都在15寸以上魁索，博客頁面兩側(cè)留白太多就顯得沒有必要融撞，并且不美觀，所以有必要調(diào)整一下寬度粗蔚。（可以慢慢試著調(diào)整到最合適的狀態(tài)）
- 找到
/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;
}
}
