Hexo | （二）Next主题个性化设置
NexT is a high quality elegant Hexo theme. It is crafted from scratch, with love.
Live Preview
- Muse scheme: LEAFERx | XiaMo | OAwan
- Mist scheme: Jeff | uchuhimo | xirong
- Pisces scheme: Vi | Acris | Rainy
- Gemini scheme: Ivan.Nginx | Raincal | Dandy
Installation
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
区分配置文件：
| 配置文件 | 路径 |
|---|---|
| 站点配置文件 | D:/blog/_config.yml |
| 主题配置文件 | D:/blog/themes/next/_config.yml |
设置RSS
1.安装RSS插件
$ npm install hexo-generator-feed --save
2.编辑站点配置文件，添加以下内容：
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 0
3.编辑主题配置文件，将rss字段置空。
主题风格
#Scheme 主题风格
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
四个主题风格，自行选择，消去注释即生效。
设置菜单
menu:
home: / || home # 主页
tags: /tags/ || tags # 标签
categories: /categories/ || th # 分类
archives: /archives/ || archive # 归档
about: /about/ || user # 关于我
# schedule: /schedule/ || calendar # 安排
# sitemap: /sitemap.xml || sitemap # 站点地图
# commonweal: /404/ || heartbeat # 404公益
添加[标签]、[分类]、[关于]页面
只有文章（post）支持[标签]和[分类]。
1.添加[tags]、[categoies]、[about]页面：
$ hexo new page "tags"
$ hexo new page "categories"
$ hexo new page "about"
2.在source文件夹中找到新建页面：
①编辑tags.md：添加layout:"tags"
②编辑categories.md：添加layout:"categories"
③编辑about.md，自行发挥。
3.匹配站点配置文件：
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
4.匹配主题配置文件中menu：
menu:
home: /
tags: /tags
categories: /categories
archives: /archives
about: /about
5.Front-matter中的[tags]写法：
tags:
- tag_1
- tag_2
# 标签之间相互独立
6.Front-matter中的[categories]写法：
categories:
- 运动
- [运动, 球类运动]
- [运动, 球类运动, 网球]
# 类别存在层级关系
添加自定义页面
1.添加自定义页面：
$ hexo new page "customPage"
2.匹配主题配置文件中的menu：
menu:
home: /
tags: /tags
categories: /categories
archives: /archives
about: /about
customPage: /customPage # 键值对匹配
3.在source中找到customPage.md文件，根据需求自行编辑。
添加更新时间
编辑主题配置文件：
post_meta:
item_text: true
created_at: true # 创建时间
updated_at: true # 更新时间
# Only show 'updated' if different from 'created'.
updated_diff: false # 只使用更新时间
# If true, post's time format will be hexo config's date_format + ' ' + time_format.
date_time_merge: false
categories: true
阅读全文
在文章合适的位置添加<!-- more -->，Hexo推荐使用。
设置favicon图标
1.将favicon.png放到themes\next\image文件夹下
2.主题配置文件更改图片路径：
favicon:
small: /images/favicon-16x16.png # 小图标：16x16
medium: /images/favicon-32x32.png # 大图标：32x32
apple_touch_icon: /images/favicon.png # apple图标大图
safari_pinned_tab: /images/logo.svg
设置头像
1.将头像图片avatar.png放到themes\next\image文件夹下
2.主题配置文件更改图片路径：
avatar: /images/avatar.png # avater图片路径
社交账号
编辑主题配置文件，自行添加：
social:
GitHub: https://github.com/yourname || github-icon
E-Mail: mailto:youremail || envelope-icon
Weibo： https://weibo.com/yourname
友情链接
编辑主题配置文件，自行添加：
links_icon: link
links_title: Links
#links_layout: block #块状布局，选一个注一个
links_layout: inline #行内布局，选一个注一个
links:
Github: https://www.github.com
知乎: https://www.zhihu.com
打赏
编辑主题配置文件：
# Reward
reward_comment: 求打赏文本
wechatpay: /images/wechatpay.png # 微信收款二维码 图片路径
alipay: /images/alipay.png # 支付宝收款二维码 图片路径
#bitcoin: /images/bitcoin.png # 比特币
文章版权信息
编辑主题配置文件，启用copyright服务：
post_copyright:
enable: true
访客&访问量
NexT主题中已经集成了不蒜子统计，直接编辑主题配置文件：
busuanzi_count:
enable: true # 开启busuanzi数据统计
total_visitors: true # 访客
total_visitors_icon: user
total_views: true # 访问量
total_views_icon: eye
post_views: true # 文章阅读次数
post_views_icon: eye
百度统计
1.登录百度统计，添加域名。若更换域名，需重新绑定。
2.复制 hm.js? 后面那串统计脚本 id：
3.编辑主题配置文件，添加脚本id：
# Baidu Analytics ID
baidu_analytics: 脚本id
文章字数统计
1.安装字数统计插件：
$ npm install hexo-symbols-count-time --save
2.编辑主题配置文件：
symbols_count_time:
separated_meta: true
item_text_post: true # 文章字数
item_text_total: true # 本站所有文章字数
awl: 5
wpm: 200
评论
来必力
1.登陆 来必力 获取你的 LiveRe UID。
2.编辑主题配置文件，添加LiveRe UID：
livere_uid: #你的LiveRe UID
3.记住将可评论文档的顶部属性中comments: true
分享
jiathis分享
编辑主题配置文件，添加jiathis_uid：
jiathis:
uid: 2160658
百度分享
编辑主题配置文件，设置baidushare：
baidushare:
type: button # type: button | slide
搜索服务
Local Search
1.安装local search插件：
$ npm install hexo-generator-searchdb --save
2.编辑站点配置文件，新增以下内容：
search:
path: search.xml
field: post
format: html
limit: 10000
3.编辑主题配置文件，启用local search功能：
local_search:
enable: true
修改文章底部标签[#]#
1.打开编辑themes\next\layout\_macro\post.swig
2.Ctrl+F找到rel="tag">#
3.将#替换为<i class="fa fa-tag"></i>
文章底部添加"本文结束"
打开编辑themes\next\layout\_macro\post.swig，在文章结束的地方添加如下代码：
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
---------Thanks for your attention---------
</div>
{% endif %}
添加访客&访问量描述
打开编辑themes\next\layout\_third-party\analytics\busuanzi-counter.swig：
添加Host-by描述
最近，银牌会员的Coding Pages在访问时会加载广告，需要在网站首页任意位置放置「Hosted by Coding Pages」，通过审核将取消广告。
打开编辑themes/next/layout/_partials/footer.swig，在文件末尾添加如下代码，将「Hosted by Coding Pages」置于页面底部。
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<div class="copyright">
Hosted by <a href="https://pages.coding.me">Coding Pages</a>
& <a href="https://pages.github.com">GitHub Pages</a>
</div>
{% endif %}
DaoVoice实现在线联系
1.首先在DaoVoice注册一个账号，注册完成后在[应用设置]-[安装到网站]中找到app_id。
2.打开编辑themes/next/layout/_partials/head/head.swig ，添加如下代码：
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
3.编辑主题配置文件，添加如下代码：
# DaoVoice
daovoice: true
daovoice_app_id: yourapp_id
4.设置DaoVoice页面样式
5.在[应用设置]-[添加微信]中绑定微信，关注小程序，即可实时收发消息。
修改Pisces主题宽度
打开编辑themes\next\source\css\_schemes\Pisces\_layout.styl，在底部添加如下代码：
// 以下为新增代码！！
header{ width: 90% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}
.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}
.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}
参考资料：next主题|使用文档
