初始配置
Next主題的一般性配置，參考NexT 使用文檔。其“開始使用”、“主題配置”、"第三方服務(wù)"這三個(gè)版塊的內(nèi)容，基本上涵蓋了所有必要的元素。
附加功能
添加文章版權(quán)聲明
打開主題配置文件（/themes/next/_config.yml），找到creative_commons標(biāo)簽，將post屬性值改為true：
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language:
配置完后，重啟服務(wù) ，效果如圖：
添加“閱讀全文”按鈕
設(shè)置首頁(yè)文章以摘要形式顯示，打開主題配置文件（/themes/next/_config.yml），找到auto_excerpt標(biāo)簽，進(jìn)行如下修改：
auto_excerpt:
enable: true
length: 150
其中l(wèi)ength代表顯示摘要的截取字符長(zhǎng)度。
設(shè)置favicon圖標(biāo)
- 選擇一個(gè)favicon制作網(wǎng)站完成制作，例如：比特蟲 ，制作一個(gè)16*16和一個(gè)32*32的；
- 兩個(gè)不同尺寸大小的文件，重命名為favicon-16x16-next.png和favicon-32x32-next.png；
- 將重命名的兩個(gè)圖片文件放到博客目錄下的
themes/next/source/images中（覆蓋原來的兩個(gè)默認(rèn)的）
重啟服務(wù)，效果如圖：
添加文章閱讀量統(tǒng)計(jì)&評(píng)論功能
參考Hexo博客Next主題添加統(tǒng)計(jì)文章閱讀量功能配置LeanCloud端。
設(shè)置valine評(píng)論框，打開主題配置文件（/themes/next/_config.yml），找到valine標(biāo)簽，進(jìn)行如下修改：
valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: ヾ?≧?≦)o來啊，快活啊! # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
language: # language, available values: en, zh-cn
visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # if false, comment count will only be displayed in post page, not in home page
其中appid，appkey屬性填入LeanCloud應(yīng)用的app-id與app-key。visitor選項(xiàng)若設(shè)置為true，則leancloud_visitors標(biāo)簽可以不用配置。
另外建議將自帶的CDN改成第三方CDN，提高加載速度。
文件目錄：next/layout/_third-party/comments/valine.swig，將//unpkg.com/valine/dist/Valine.min.js改為//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js，還可以去該網(wǎng)址下載js文件，valine.swig中的地址可指向本地。
設(shè)置valine評(píng)論區(qū)頭像
注冊(cè)gravatar賬號(hào)，上傳頭像，實(shí)現(xiàn)郵箱賬號(hào)和頭像的映射關(guān)系。
若收不到確認(rèn)郵件，并且在垃圾箱也未找到的話，有可能是直接被攔截，QQ郵箱查看被攔截郵件以及添加到白名單的方法為：QQ郵箱-->右鍵，收信查詢-->查看被系統(tǒng)攔截的郵件-->添加到白名單。
注意頭像生效所花的時(shí)間可能比較長(zhǎng)，屬于正常情況。
取消分類、標(biāo)簽等頁(yè)面的評(píng)論框
如果有集成評(píng)論服務(wù)，每個(gè)頁(yè)面都會(huì)帶有評(píng)論。 若需要關(guān)閉的話，添加字段 comments 并將值設(shè)置為 false，禁用評(píng)論示例如下：
title: 標(biāo)簽
date: 2014-12-22 12:39:04
type: "tags"
comments: false
添加字?jǐn)?shù)統(tǒng)計(jì)與閱讀時(shí)長(zhǎng)
（1）打開博客目錄，運(yùn)行git bush，安裝插件
$ npm install hexo-symbols-count-time --save
（2）修改博客配置文件，添加以下代碼
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
（3）修改主題配置文件，找到標(biāo)簽symbols_count_time，進(jìn)行如下修改
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 4
wpm: 275
（4）重啟服務(wù)
添加網(wǎng)站訪問量
利用busuanzi統(tǒng)計(jì)訪問量，打開主題配置文件/theme/next/_config.yml，進(jìn)行如下修改，便可以看到頁(yè)腳出現(xiàn)訪問量：
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: false
post_views_icon: eye
busuanzi與valine都具有統(tǒng)計(jì)閱讀次數(shù)的功能，若把標(biāo)簽valine下的visitor屬性設(shè)置為true的話，這里的post_views參數(shù)值應(yīng)修改為false。
修改文章底部帶#號(hào)的標(biāo)簽
將 # 換成標(biāo)簽圖標(biāo)。
[NexT 7.1.0 Released]修改方法為：
打開模板/themes/next/layout/_macro/post.swig，搜索 rel="tag"，進(jìn)行如下修改：
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
[NexT 7.2.0 Released]修改方法為：
修改主題配置文件，找到標(biāo)簽tag_icon，進(jìn)行如下修改：
# Use icon instead of the symblo # to indicate the tag at the bottom of the post
tag_icon: true
定制化css樣式
若想自己設(shè)置css樣式，可添加在/theme/next/source/css/_custom/custom.styl下，如：
// Custom styles.
ul{
margin-top: -15px;
margin-bottom: 10px;
}
ol{
margin-top: -5px;
}
figure.highlight.java{
margin-top: -15px;
margin-bottom: 10px;
}
table{
margin-bottom: 10px;
}
設(shè)置文章英文鏈接
hexo生成的默認(rèn)文章鏈接格式為： :year/:month/:day/:title/，這種默認(rèn)的配置缺點(diǎn)很明顯，當(dāng)文件名是中文的時(shí)候url鏈接里就有中文出現(xiàn)。
可以通過添加urlname字段實(shí)現(xiàn)文章的鏈接為英文，在md文件的Front-matter區(qū)域新增urlname屬性，值為文章的英文title，參考如下：
---
title: 基于Hexo+Next的主題優(yōu)化總結(jié)
urlname: summary-of-theme-optimization-based-on-hexo&next
date: 2019-07-12 20:01:26
categories:
- 工具
tags:
- Hexo
---
再將博客配置文件下的permalink值改為：
permalink: :year/:month/:day/:urlname/
設(shè)置首頁(yè)背景圖片
在/theme/next/source/css/_custom/custom.styl中添加如下代碼：
// 添加背景圖片
body {
background: url(https://source.unsplash.com/random/1600x900?wallpapers);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
// 修改內(nèi)容區(qū)域的透明度
.main-inner {
background: #fff;
opacity: 0.8;
}
// 修改菜單欄透明度
.header-inner {
opacity: 0.8;
}
其中background的url也可寫成本地的路徑，如background: url(/images/background.jpg);
修改內(nèi)容區(qū)域的寬度
NexT 對(duì)于內(nèi)容的寬度的設(shè)定如下：
- 700px，當(dāng)屏幕寬度 < 1600px
- 900px，當(dāng)屏幕寬度 >= 1600px
- 移動(dòng)設(shè)備下，寬度自適應(yīng)
如果你需要修改內(nèi)容的寬度，同樣需要編輯樣式文件。 編輯主題的 source/css/_variables/custom.styl 文件，新增變量：
// 修改成你期望的寬度
$content-desktop = 700px
// 當(dāng)視窗超過 1600px 后的寬度
$content-desktop-large = 900px
此方法不適用于 Pisces Scheme，關(guān)于如何修改 Pisces Scheme 的寬度請(qǐng)參看 這個(gè) Issue
ps：我按照這個(gè)方法修改...是沒有成功的...是在base.styl中修改才成功...
md文檔相關(guān)
實(shí)現(xiàn)文章多級(jí)分類
在文章的categories字段中，寫入多個(gè)類別，示例如下：
categories:
- 工具
- hexo
“工具”為“hexo”的上一級(jí)。
在Markdown中合并單元格
Markdown語(yǔ)法本身不包含復(fù)雜表格的插入，但是可以使用html語(yǔ)法來實(shí)現(xiàn)。
- 水平單元格的合并：基于colspan屬性，即使一個(gè)單元格占多列的空間
- 縱向單元格的合并：基于rowspan屬性，即使一個(gè)單元格占多行的空間
先在word或excel中把表格做好，然后復(fù)制到No-Cruft Excel to HTML Table Converter轉(zhuǎn)化為標(biāo)記對(duì)形式，最后刪除空標(biāo)記對(duì)，并設(shè)置colspan和rowspan屬性即可。
如下所示：
<table>
<tr>
<td colspan="6"><b>用于定義數(shù)據(jù)類型的關(guān)鍵字</b></td>
</tr>
<tr>
<td>class</td>
<td>interface</td>
<td>byte</td>
<td>short</td>
<td>int</td>
<td>long</td>
</tr>
</table>
注意，通過html插入表格，可能瀏覽器頁(yè)面中會(huì)出現(xiàn)過多空白的情況，解決方法是在表格前加上{% raw %}，表格后加上{% endraw %}。
其實(shí)通過Html語(yǔ)言可以使頁(yè)面顯示出很多Markdown語(yǔ)法不支持的功能。
如使字體為紅色：
<font color="#FF0000">XXX</font>
使字體高亮：
<span style="background-color:#FFF000">XXX</span>
Markdown轉(zhuǎn)義字符
md中用到的主要可能有語(yǔ)法意義的非空白符號(hào)有：\ ` * _ { } [ ] ( ) # + - . !
在正常段落中要原樣輸出以上符號(hào)，一般需要加反斜杠\在前（連續(xù)兩個(gè)反斜杠輸出一個(gè)反斜杠。）
Markdown首行縮進(jìn)
在段落開頭，輸入以下字符，然后緊跟著輸入文本即可。
       
自定義閱讀全文
在文章任意想添加的位置添加以下代碼即可。
<!--more-->
取消“文章目錄”對(duì)標(biāo)題的自動(dòng)編號(hào)
修改主題配置文件，找到標(biāo)簽toc，進(jìn)行如下修改：
toc:
enable: true
# Automatically add list number to toc.
number: false
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6
踩過的坑
接下來是在配置過程中遇到的問題：
修改不了博客配置文件中的author名
原因：從github上clone的Next主題最新版，不穩(wěn)定，改為了release版。
執(zhí)行hexo clean命令報(bào)錯(cuò)
報(bào)錯(cuò)：FATAL can not read a block mapping entry
原因：配置文件中少寫了空格，每一個(gè)配置項(xiàng)都是<font color="#FF0000">名稱+冒號(hào)+空格＋設(shè)置參數(shù)</font>組合而成（血的教訓(xùn)...千萬(wàn)注意
社交鏈接圖標(biāo)中知乎的font awesome圖標(biāo)無(wú)法獲取
原因：NexT不同版本對(duì)應(yīng)著不同版本的font awesome，下載的NexT版本中所對(duì)應(yīng)的font awesome版本可能沒有知乎圖標(biāo)）。
版權(quán)聲明中本文鏈接顯示錯(cuò)誤
鏈接顯示為：http://yoursite.com/2019/03/14/Blog-test/
原因：未修改博客配置文件/ _config.yml中的url，需要修改為域名。
執(zhí)行hexo g報(bào)錯(cuò)
生成文章的時(shí)候，報(bào)錯(cuò)：
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 31, Column 21]
expected variable end
原因：當(dāng)文章中有}}時(shí),且這兩個(gè)括號(hào)未被代碼塊包含，解析會(huì)出問題
解決方法：
{% raw %}
含有雙大括號(hào)的內(nèi)容
{% endraw %}
主題升級(jí)
用Beyond Compare工具將官方的上個(gè)版本與自己配置過的主題比較，查看更改的內(nèi)容，以免遺漏。
待解決
1、由[NexT 7.1.0 Released]升級(jí)為[NexT 7.2.0 Released]后每篇文章的本文字?jǐn)?shù)未統(tǒng)計(jì)到。
2、圖片點(diǎn)擊放大效果
3、相關(guān)文章功能，參考https://zuiyu1818.cn/posts/NexT_codewidth.html
4、歌單頁(yè)面，參考https://www.zhangshenghai.com/playlist/
