Hexo之NexT主题的配置及遇到的问题

写在前面

各种 Hexo 主题选来选去，抉择不定到底使用哪个主题。如果你也是和我一样，可以看看知乎的问答，看看大家的推荐吧。

知乎：有哪些好看的 Hexo 主题？

Hexo 官网：https://hexo.io/

关于 Hexo 是什么和一系列操作，请看官方文档吧：https://hexo.io/zh-cn/docs/

关于 Hexo 主题，官网推荐的主题有这些：https://hexo.io/themes/

或者直接去 GitHub 开源的 Hexo 仓库 Wiki 页面找，这也页面收集了很多主题：https://github.com/hexojs/hexo/wiki/Themes （包括 demo 样例，也能 download 下来）

除了到官网找主题，还可以到 GitHub 上直接搜索主题，输入关键字

hexo-theme

即可，就可以看到很多主题：github 上搜主题

以下列举我有考虑过的一些主题：

BlueLake： demo github下载

yilia： demo github下载

material： demo github下载

next ： demo github下载 (该主题在 github 上 star 最高)

believe ： demo github下载

olive： demo github下载

mdui：demo github下载

raytaylorism： demo github下载

ylion： demo github下载

simpleblock： demo github下载

Jacman： demo github下载

free2mind： demo github下载

…….

1、NexT 主题配置

选来选去还真不知道该用哪个主题好，最后还是决定选 GitHub 最高 star 的这个主题 Next 吧！好，ok，那么多人在用，普遍大众还是很喜欢的，那我暂时也决定选用这个吧，这么多人在用，相关配置、优化等操作应该很在网上容易找到详细资料。我就不在这篇文章阐述了，本文重点还是当做笔记记录过程中遇到的问题和坑。

先欣赏几个网上使用的 NexT 该主题的 demo 吧：

吴小龙同学： http://wuxiaolong.me/

….

关于 next 主题的修改，其实可以看上面第一个 demo 博主的博文（其文章写于2016-04-07）： Hexo站点、NexT主题修改全记录 ， 还是很全面的。

NexT 下载：https://github.com/iissnan/hexo-theme-next

NexT 主题，官方设置教程在此：http://theme-next.iissnan.com/

这是 NexT 主题 GitHub 上其 wiki 页面关于主题设置教程：https://github.com/iissnan/hexo-theme-next/wiki/%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E5%8F%82%E8%80%83

这个主题相关的设置网上一搜是真的太多了，我就不会继续展开叙述了，列举一些参考资料吧：

Hexo+nexT主题搭建个人博客

Hexo搭建GitHub博客（三）- NexT主题配置使用

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

浅谈tag标签分类和目录分类的区别以及如何SEO优化妙用！

….

1.1 问题

但，笔者在配置过程中遇到被官方文档所坑！ 怀疑是官方文档没及时更新的缘故， 在此，记录一下：

① 配置菜单，如「首页」、「分类」、「标签」等这些菜单旁边的图标没显示，而都显示成问号，按照官方示例配置是这样的：

menu:
home: /
categories: /categories/
tags: /tags/
archives: /archives/
about: /about/
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#公益: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
enable: true
home: home
about: user
categories: th
tags: tags

网上很多文章写的都是上面那样的配置，但真正的配置是这样的：

menu:
home: / || home
archives: /archives || archive
categories: /categories || th
tags: /tags || tags
about: /about || user

menu_icons:
enable: true

原来 next 这个主题，「菜单设置」被注释掉的这些配置，去掉注释就是正确的配置！（官方文档示例坑啊，怀疑是没及时更新吧）

② 以及「友情链接」图标的设置官方文档包括网上文章写的都是如下：

social:
GitHub: https://github.com/yourname 邮箱: mailto:test@gamil.com
social_icons:
enable: true
icons_only: false
transition: false
GitHub: github
邮箱: envelope

但正确配置是如下：

social:
GitHub: https://github.com/yourname || github
邮箱: mailto:test@gamil.com || envelope
social_icons:
enable: true
icons_only: false
transition: false

即可。

​

1.2 其他

1、关于文章所属「分类」和「标签」的设置

之前使用的某个主题，只要在 source 文件夹下新建的文章前面按如下格式表明所属分类和标签：

title: 自学编程成功概率有多少可能
date: 2017-05-26 19:57:47
tags: [编程,感悟]
categories: 技术

但是在 NexT 主题下的设置的步骤如下：

先

hexo new page categories

新建 categorier 文件夹，其中会自动生成一个

index.md

文件，修改（即添加一行）为：

---

title: categories
date: 2018-01-23 17:14:51

type: "categories"
---

同理，「标签」也一样，

hexo new page tags

，生成 tags 文件夹，其中会自动生成一个

index.md

文件，修改为：

---

title: tags
date: 2018-01-23 17:14:51

type: "tags"
---

然后写的博客文章，表明所属「分类」和拥有哪些「标签」，官方文档所说的格式如下：

categories:
- Diary
tags:
- PS3
- Games

但是我亲测，如下也是可以的：

categories: 技术
tags: [编程,感悟]

备注： 对于 NexT 这个主题，对于 「关于」 这个菜单和上面新建分类和标签一样，也是需要手动创建文件夹的，

hexo new page about

，这样会生成 about 文件夹，同时自动生成

index.md

文件，然后可以在这个

.md

文件中写上自我个人介绍。（亲测过，

index.md

这个文件的名字不能修改，否则「关于」菜单出错）

另外说几句，关于这部分的设置，官方文档称其为「Front-matter」，「Front-matter」 是文件最上方以

---

分隔的区域，用于指定个别文件的变量，举例来说：

title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
layout	布局
title	标题
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址

2、添加本地添加搜索菜单（功能）

安装

hexo-generator-searchdb

插件

npm install hexo-generator-searchdb --save

打开 站点配置文件 找到Extensions在下面添加(其实，新增以下内容到任意位置即可)

search:
path: search.xml
field: post
format: html
limit: 10000

打开主题配置文件找到Local search，将enable设置为true，启动本地搜索功能，这样就能在页面可以看到搜索菜单了

# Local search

local_search:
enable: true

3、添加字数统计、阅读时长、友情链接

参考资料：

Hexo添加字数统计、阅读时长、友情链接

第一步：安装word_count插件，在博客根目录下打开终端:

npm install hexo-wordcount --save

第二步：在主题配置文件(Blog\themes\next\config.yml)中打开wordcount 统计功能

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount post_wordcount:
item_text: true
wordcount: true
min2read: true

如果仅仅只是打开开关，部署之后会发现文章的【字数统计】和【阅读时长】后面没有对应的xxx字，xx分钟等字样，只有光秃秃的数字在那里。

解决方案：

​找到Blog\themes\next\layout_macro\post.swig 文件，将“字”、“分钟” 字样添加到如下位置即可。

<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>

...
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>

然后可以看到显示如：

阅读时长 ≈ 2 分钟

,但比如不需要

≈

显示，修改这个地方：

{% if theme.post_wordcount.item_text %}
<span class="post-meta-item-text">{{ __('post.min2read') }} ≈</span>
{% endif %}

把这里的

≈

删除即可。（PS：这个是 html 的特殊字符的表示）

1.3 主题制作

参考资料：

从零开始制作 Hexo 主题

写一个自己的Hexo主题

…..