绝配：hexo+next主题及我走过的坑

所有内容都在themes/next文件夹下的config.yml文件里修改。

官方文档里写的是有些配置需要将一部分代码添加到配置文件中，但其实不用，我们逐行看配置文件就会发现，有很多功能都已经放在配置文件里了，只是注释掉了，我们只需要取消注释，把需要的相关信息补全即可使用

菜单栏 menu

原生菜单栏有主页、关于、分类、标签等数个选项，但是在配置文件中是注释掉的状态，这里我们自行修改注释就行

menu:
  home: / || home
  # about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  # schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

注意点：

• 如果事先没有通过hexo new page <pageName>来创建页面的话，即使在配置文件中取消注释，页面也没法显示
• 我们也可以添加自己想要添加的页面，不用局限在配置文件里提供的选择里
• ||后面是fontAwesome里的文件对应的名称
• menu_icons记得选enable: true（默认应该是true）

我在这部分添加了两个自定义的页面，后面在第三方插件部分我会再提到。

menu:
  home: / || home
  # about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  读书: /books || book
  电影: /movies || film
  archives: /archives/ || archive
  # schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

主题风格 schemes

主题提供了4个，我们把想要选择的取消注释，其他三个保持注释掉的状态即可。

• Muse

  

  image-20180809164700600

• Mist

  

  image-20180809164749052

• Pisces

  

  image-20180809164925685

• Gemini

  

  image-20180809165023401

选择主题后也可以自定义，不过我还没摸清楚有哪些地方可以自定义，等弄清楚了我再来更新。

底部建站时间和图标修改

修改主题的配置文件：

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

  # Icon between year and copyright info.
  icon: snowflake-o

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    # version: false

我在这部分做了这样几件事：

• 把用户的图标从小人user改成了雪花snowflake-o
• copyright留空，显示成页面author即我的名字
• powered: false把hexo的授权图片取消了
• theme: enable:false 把主题的内容也取消了

这样底部信息比较简单。

image-20180809172835606

个人社交信息 social

在social里我们可以自定义自己想要在个人信息部分展现的账号，同时给他们加上图标。

social:
  GitHub: https://github.com/XuQuan-nikkkki || github
  E-Mail: mailto:xuquan1225@hotmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook

注意点：

• ||后面对应的名称是fontAwesome里图标的名称，如果我们选择的账号没有对应的图标（如豆瓣、知乎），我们可以在fontAwesome库里去选择自己喜欢的图标
• 建议不要找太新的fontAwesome图标，主题关联的库版本没有那么新，很可能显示不了或者显示一个地球

网站动画效果

为了网站响应速度我们可以把网站的动画关掉

motion:
  enable: false

但我觉得页面比较素，所以开了动画，选择了canvas-nest这一个，主题自带四种效果，可以选自己喜欢的。

motion:
  enable: true
  async: true
  
# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

评论系统

NexT原生支持多说、Disqus、hypercomments等多种评论系统。我选择了Disqus。

方法也非常简单。直接去Disqus注册，注册完了在配置的时候会给你一个名为shortname的ID，将这个ID填在配置文件里即可。

# Disqus
disqus:
  enable: true
  shortname: xuquan
  count: true

统计文章字数和阅读时间

NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能，如果我们需要使用，只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。如下所示：

post_wordcount:
  item_text: true
  wordcount: true  # 文章字数
  min2read: true   # 阅读时间
  totalcount: true  # 总共字数
  separated_meta: true

如果没有安装 hexo-wordcount 插件，先安装该插件：

npm i --save hexo-wordcount

*** Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) ，安装命令如下：***

npm install hexo-wordcount@2 --save

安装完成后，重新执行启动服务预览就可以了。

显示文字

用 Sublime Text 工具打开 post.swig 文件，路径如下：xxx_blog/themes/next/layout/_macro/post.swig

修改【字数统计】，找到如下代码：

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

添加 “字” 到 {{ wordcount(post.content) }} 后面，修改后为：

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

同理，我们修改【阅读时长】，修改后如下：

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

统计阅读次数

这里我用的是leancloud的服务，具体方法参考NexT上的教程,添加完之后效果如下：

image-20180809175133462

第三方插件

Hexo-admin

Hexo-admin插件允许我们直接在本地页面上修改文章内容。

• 下载

  npm i hexo-admin --save
  

• 登录http://localhost:4000/admin即可看到我们所有的文章内容，并且在可视化界面中操作文章内容

Hexo-douban

hexo-douban插件可以在博客中添加豆瓣电影、读书和游戏页面，关联我们自己的账号。

• 下载

  npm install hexo-douban --save
  

• 配置

  在hexo根目录下的config.yml文件中添加如下内容

  douban:
    user: 
    builtin: false
    book:
      title: 'This is my book title'
      quote: 'This is my book quote'
    movie:
      title: 'This is my movie title'
      quote: 'This is my movie quote'
    game:
      title: 'This is my game title'
      quote: 'This is my game quote'
    timeout: 10000 
  

  title和quote后面的内容会分别作为电影/读书/游戏页面的标题和副标题（引言）呈现在博客里。

  user就写我们豆瓣的id，可以在“我的豆瓣”页面中找到，builtin指是否将生成页面功能嵌入hexo s和hexo g中，建议选false，因为true会导致页面每次启动本地服务器都需要很长时间生成豆瓣页面，长到怀疑人生。

• 生成页面

  hexo douban   #生成读书、电影、游戏三个页面
  hexo douban -b  #生成读书页面
  hexo douban -m  #生成电影页面
  hexo douban -g  #生成游戏页面
  

• 在博客中生成页面

  这里就需要用到我们前面提过的hexo new命令了。

  hexo new page books
  hexo new page movies
  hexo new page games
  

• 在博客中添加页面

  在menu部分添加我们需要添加的页面名称和相对路径

  menu:
    Home: /
    Archives: /archives
    Books: /books     #This is your books page
    Movies: /movies   #This is your movies page
    Games: /games   #This is your games page
  

• 部署到博客

  hexo g && hexo deploy
  

我踩过的坑

iPic图片上传

hexo博客发布Typora写好的内容也会出现图片无法同步的问题，网上有大佬给出的解决方案是使用hexo-asset-image插件，这样在创建博客时会有一个与.md文件同名的文件夹，将图片同步到文件夹内即可。

但时间下来还是比较麻烦，因为Typora并没有自定义图片路径的功能，它会放在与文件相关的asset文件夹内。

我找到的最终方案是使用Typora自带的一个功能：图片上传iPic图床。这样在添加图片的时候，图片链接就自动更换成了图床的地址，这时同步到博客就没有问题了。

评论系统

因为多说已经停止服务了，最开始看到有人说Disqus得翻墙，就选了一个韩国的评论服务，叫来必力，但事实证明墙外就没有稳定的服务，在我挂VPN的情况下也要加载好半天，后来就还是换成了Disqus，具体配置方法看前文。

作者：Nikkkki睡不醒
链接：https://www.jianshu.com/p/21c94eb7bcd1
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。