标签、分类 、HEXO之下一主题的配置及遇到的问题

各种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样例，也能下载下来）

除了到官网找主题，还可以到GitHub上直接搜索主题，输入关键字hexo-theme 即可，就可以看到很多主题：github上搜主题

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

• BlueLake：demo github下载 
• yilia：demo github下载  
• 材料：demo github下载  
• 下一个：demo github下载（该主题在github上star最高）   
• 相信：demo github下载  
• 橄榄球：demo github下载  
• mdui：demo  github下载
• raytaylorism：demo github下载  
• ylion：demo github下载  
• simpleblock：demo github下载  
• Jacman：demo github下载  
• free2mind：demo github下载  
• .......

1，NexT主题配置

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

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

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

关于下一主题的修改，其实可以看上面第一个演示博主的博文（其文章写于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 +下一主题搭建个人博客

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

• HEXO的下一个主题个性化教程：打造炫酷网站

• 浅谈标签标签分类和目录分类的区别以及如何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

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

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

social:
  GitHub: https://github.com/yourname
  邮箱: mailto:[e-mail]
social_icons:
  enable: true
  icons_only: false
  transition: false
  GitHub: github
  邮箱: envelope

但正确配置是如下：

social:
  GitHub: https://github.com/yourname || github
  邮箱: mailto:[e-mail] || envelope
social_icons:
  enable: true
  icons_only: false
  transition: false

即可。

​

1.2其他

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

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

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生成标签文件夹，其中会自动生成一个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 aboutindex.md.mdindex.md

另外说几句，关于这部分的设置，官方文档称其为“Front-matter”，“Front-matter”是文件最上方以分隔的区域，用于指定个别文件的变量，举例来说： --- 

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

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

参数	描述	默认值
布局	布局
标题	标题
日期	建立日期	文件建立日期
更新	更新日期	文件更新日期
注释	开启文章的评论功能	真正
标签	标签（不适用于分页）
类别	分类（不适用于分页）
永久链接	覆盖文章网址

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

1. 安装插件 hexo-generator-searchdb 

   npm install hexo-generator-searchdb --save

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

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

3. 打开主题配置文件找到本地搜索，将启用设置为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的特殊字符的表示）