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

103 阅读 0 评论 68 点赞

我是靠谱客的博主谦让航空，最近开发中收集的这篇文章主要介绍绝配：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