使用Github Pages + Hexo搭建博客（四）—— 配置第三方服务
静态站点拥有一定的局限性，因此，我们需要一些第三方服务来拓展站点功能。本文将介绍如何在Next主题下集成第三方服务。
评论系统
Next支持多款评论系统，包括disqus、Facebook Coments、HyperComments、网易云跟帖等等，我个人使用的是disqus，其他工具的使用方法可以参考官方文档第三方服务集成部分。
配置disqus：
注册disqus
打开disqus官网，disqus支持Facebook、twitter以及Google帐号登录，也可以使用邮箱注册一个帐号。
配置disqus
登录后，点击GET STARTED，选择
I want to install Disqus on my site，Website Name就是配置文件中的short name，填写完成后即可点击Create Site，在接下来的页面中选择basic计划。之后就会跳转到选择站点平台界面，我们可以在页面最下方选择
再点击页面右下角的configure
此时的Website Name应当是您之前填写的内容，在Website URL中填写您的博客地址，点击完成设置，disqus官网部分的配置就完成了。
配置主题配置文件
编辑主题配置文件中的disqus部分，具体内容如下：
1
2
3
4disqus:
enable: false #设定为true
shortname: #您设置的shortname
count: true #是否显示评论数量重新部署后您就能够在您的文章下看到评论界面啦，您也可以通过在Front-matter中设置comment为false关闭评论区。
阅读次数统计
我是参考的为NexT主题添加文章阅读量统计功能实现文章阅读次数统计功能，统计功能由leancloud提供。
站内搜索
Next主题支持集成Swiftype、微搜索、Local Search和Algolia。我使用的是Local Search，其他服务的配置过程同样可以在官方文档中查看。
配置Local Search：
安装
Hexo-generator-searchdb，在站点根目录下执行下列命令：1
npm install Hexo-generator-searchdb --save
在站点配置文件中添加以下内容
1
2
3
4
5search:
path: search.xml
field: post
format: html
limit: 10000注意空格缩进
开启本地搜索
将主题配置文件中的
local_search中enable设置为true开启本地搜索功能。重新部署后就能够在侧边栏看到搜索按钮，站内搜索的配置就完成了。
我在配置过程过遇到了点击搜索后一直加载转圈的问题，通过开发者工具调试发现是search.xml文件的问题。将search.xml上传至https://www.xmlvalidation.com/分析发现如下错误：
将错误拿去谷歌搜索了一番，这个问题是因为md文件中产生了看不到的backspace字符，我们可以在vscode或者sublime text中打开md文件来筛查错误。
vscode需要在设置中打开renderControlCharacters
将类似图片中us字符的所有字符全部删除，重新部署后搜索功能就能够重新使用了。
文章字数统计与阅读时长
Next主题中以及集成了字数统计和阅读时长功能，我们需要先在根目录下使用下列命令安装
Hexo-wordcount插件：1
npm install Hexo-wordcount --save
再到主题配置文件中开启wordcount统计功能：
1
2
3
4
5
6
7
8# Post wordcount display settings
#Dependencies: https://github.com/willin/Hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true就能够打开文章的字数统计和阅读时长功能了。
在预览时，我们会发现，统计结果并没有单位，如果您想要加上单位，可以这样实现：
打开/themes/next/layout/_macro/post.swig文件
找到如下代码
1
2
3<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>修改为
1
2
3<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>再找到如下代码
1
2
3<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }}
</span>修改为
1
2
3<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>重新部署就能够看到加上单位的统计信息了。
结语
经过这些配置，您的博客现在已经可以正常使用了。但是，当您在搜索引擎中搜索您的博客时，会发现没有结果，这是由于您的站点没有做SEO优化，在下一篇文章中，我将介绍如何对您的站点进行SEO优化，从而能够在搜索引擎上找到您的博客。