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 主题下的设置的步骤如下：

1. 先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"
   ---
   

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

   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、添加本地添加搜索菜单（功能）

1. 安装 hexo-generator-searchdb 插件

   npm install hexo-generator-searchdb --save

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

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

3. 打开主题配置文件找到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') }} &asymp;</span>
 {% endif %}

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

1.3 主题制作

参考资料：

• 从零开始制作 Hexo 主题
• 写一个自己的Hexo主题
• …..