Hexo主题配置 | 飙戈的博客

type

status

date

slug

summary

一、安装NextT

1、下载主题

切换到hexo 的安装目录，把主题文件下载到安装目录的 theme/next 目录下

2、启用主题

打开站点配置文件，找到 theme 字段，并将其值更改为 next。

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

二、主题设置

1、外观 scheme 设置

修改主题配置文件，查找 scheme 关键字，将你需用启用的 scheme 前面注释 # 去除即可

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白

Mist - Muse 的紧凑版本，整洁有序的单栏外观

Pisces - 双栏 Scheme，小家碧玉似的清新

Gemini - 紧凑集中版双栏 Scheme，本网站采用的主题

2、语言 language 设置

编辑站点配置文件（针对所有主题下的文件）或主题配置文件 (针对本主题下的文件)下的 language，例如启用简体中文就改成 zh-Hans

3、设置菜单

启用/禁用菜单

编辑主题配置文件，设定菜单内容，对应的字段是 menu。菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。把需要启动的菜单项前面的 # 去掉。也可以新增自定义菜单项。

默认的菜单项如下：

键值	设定值	显示文本（简体中文）
home	home: /	主页
archives	archives: /archives	归档页
categories	categories: /categories	分类页
tags	tags: /tags	标签页
schedule	schedule: /schedule	日程表
about	about: /about	关于
sitemap	sitemap: /sitemap	站点地图
commonweal	commonweal: /404.html	公益 404

其中除了 home 和 archives 页面，其他页面都需要手动创建，例如新建 tags 页面

切换到 Hexo 根目录下，使用 hexo new page tags 新建 tags 页面

编辑 /source/tags/index.md 文件，在头文件部分 front-matter 添加 type: "tags"，如需要关闭评论添加 comments: false

设置菜单显示文字

修改 languages/{language}.yml 文件，如果简体中文对应 languages/zh-Hans.yml 文件下的 menu 字段

修改字段值直接影响页面上菜单文字显示，或者新增字段值，字段名要与上面第一步设置的自定义菜单名称对应。

4、设置侧栏

修改主题配置文件文件中的 sidebar 字段

设置侧栏位置

left - 靠左放置

right - 靠右放置

设置侧栏显示的时机

post - 默认行为，在文章页面（拥有目录列表）时显示

always - 在所有页面中都显示

hide - 在所有页面中都隐藏（可以手动展开）

remove - 完全移除

5、设置头像

修改主题配置文件下的 avatar 字段，设成头像的链接

6、设置作者昵称

编辑站点配置文件，设置 author 字段

7、设置站点名称

编辑站点配置文件，设置 description 字段

8、设置社交

编辑主题配置文件

设置社交链接

修改 social 字段，其键值格式是 显示文本: 链接地址。

设置链接图标

修改 social_icons: 字段，其键值格式是 匹配键: Font Awesome 图标名称，匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配）

9、设置背景动画

NexT 自带 canvas_nest 和 three_waves 两种背景动画效果，编辑主题配置文件将对应的字段改成 true 或 false 即可，只能同时开启一种背景动画效果。

三、第三方插件

1、安装评论系统

最新版的Next主题支持的评论系统如下：

changyan ：搜狐畅言，需要网站备案才能使用。

disqus ：界面漂亮，注册麻烦，仅支持国外一些社交账号登录，如 Fackbook, Google, Twritter 等，需要翻墙才能评论。

disqusjs ：基于 Disqus API 和 React 开发的评论插件，前端模拟Disqus的评论界面，再使用一个服务器反向代理Disqus API的请求，那么就可以让评论可以在国内网显示出来。

gitalk ：基于 GitHub Issue 和 Preact 开发的评论插件，需要 github 登陆才能评论，在国内访问速度较慢。

livere：来必力，来自韩国的评论插件，无需备案即可使用，功能较为完善，但在国内访问速度较慢。

valine：基于 LeanCloud 的快速、简洁且高效的无后端评论系统。在国内访问速度快，页面简单简洁。

最终选择 valine 作为评论系统。安装步骤如下：

创建应用，名称任意，例如 Valine-Admin

进入对应的应用，点击设置 — 应用凭证，获取 AppID 和 AppKey

编辑主题配置文件

刷新界面（修改主题配置文件不用重启），测试评论效果，效果图如下：

查看评论数据。由于 valine 是无后台系统，需要自己登陆 leanCloud 后台进行查看。点击 数据存储 — 结构化数据 — Comment。

为了方便也可以集成 Valine-Admin 系统。Valine Admin 项目是一个对 Valine 评论系统的拓展应用，实现评论邮件通知、评论管理、自定义邮件通知模板等功能。关于 valine 的其他详细使用可以参考 Hexo NexT 评论系统 Valine 的使用

2、统计访问次数

有 百度统计 和 不蒜子 统计两种方式。两者的区别是：前者可以用来后台统计，数据比较准确可靠；后者用来在页面上显示，根据访问 ip 进行粗略统计。

百度统计

登陆百度统计官网，注册账号

获取代码。点击 使用设置 — 代码管理 — 代码获取，找到类似于 hm.src = "https://hm.baidu.com/hm.js?xxx"; 的代码，复制 .js? 后面的统计脚本id

编辑主题配置文件中的 baidu_analytics 字段，把刚才粘贴的值粘贴进去

代码安装检查，点击 使用设置 — 代码管理 — 代码安装检查，检查页面代码是否安装正确

等大概 20 分钟后，点击概况可以查看页面统计数据。

不蒜子统计

编辑主题配置文件中的 busuanzi_count 参数，把 enable 设置为 true。

在文章开头显示文章阅读次数。

在页面底部显示访客和访问情况。

在本地访问 http://127.0.0.1:4000 会发现这些值特别大，部署到自己站点后就正常了。

3、百度分享

旧版的 Hexo 主题支持百度分享功能。编辑主题配置文件中的 baidushare 字段，改成

注意 百度分享不支持 Https，打开开发工具控制台可能会看到 Failed to load resource 的错误信息，原因是通过 Https 请求百度分享的 Http 资源时候被拒绝了。解决办法是直接把这些百度分享的资源文件放到自己的目录下，参考大佬的解决方案百度分享不支持https的解决方案

下载资源文件，GitHub地址为 https://github.com/hrwhisper/baiduShare

把里面的 static 文件夹放在安装目录下的 source 文件夹里面

修改你的安装目录/themes/next/layout/_partials/share/baidushare.swig 文件如下

编辑站点配置文件中的 skip_render 字段，Hexo会禁止编译 skip_render 定义的文件/文件夹

重启服务器，最好执行一下 hexo clean

4、本地搜索 Local Search

安装 hexo-generator-searchdb，在安装目录下执行

编辑站点配置文件，新增以下内容到任意位置：

编辑主题配置文件，查找 local_search 字段，把值改为 true

四、参考

Hexo中文使用文档

Hexo的Next主题详细配置

hexo的next主题个性化教程：打造炫酷网站

hexo添加评论功能

hexo next主题为博客添加分享功能

Hexo+Github搭建个人博客(三)——百度分享集成

为NexT主题添加文章阅读量统计功能