hexo搭建的博客中添加搜索、评论功能、文章字数统计功能

hexo搭建的博客中添加添加搜索、评论功能、文章字数统计功能

本次使用的hexo主题为Butterfly。

添加搜索功能

搜索功能使用的是Algolia插件， 官网地址。

1. 安装Algolia

cnpm install -S hexo-algolia

2. 打开 Algolia官网注册登录进入控制台如下图所示

3. 在主题目录下的_config.yml中进行配置

algolia_search:
  enable: true
  hits:
    per_page: 6
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

4. 在项目根目录下的_config.yml中进行配置

# 搜索功能配置
algolia:
  applicationID: '你的applicationID'
  apiKey: '你的apikey'
  indexName: '你新建的页面名称'

5. 在项目根目录下打开git bash执行如下命令(必须在git bash中执行)

export HEXO_ALGOLIA_INDEXING_KEY=你的Admin API Key
hexo algolia

6. 在我的电脑-高级属性中配置如下图所示

变量名：HEXO_ALGOLIA_INDEXING_KEY
变量值：你的Admin API Key

备注

1. 如果不执行第五、六步，则可能会出现如下报错

	Please set an HEXO_ALGOLIA_INDEXING_KEY environment variable to enable content indexing.

2. 对搜索功能有更改时（html、css等）均需要在git bash中执行hexo algolia。

参考地址

1. https://jerryc.me/posts/21cfbf15/#Algolia
2. https://github.com/oncletom/hexo-algolia
3. http://www.werty.cn/2019/07/hexo/hexo%20algolia命令执行失败解决方案/
4. https://www.zhihu.com/question/46822587/answer/308411949

添加评论功能

评论功能使用的是Valine插件， 官网地址。

1. 打开LeanCloud进行登录注册

2. 创建应用如下图所示

3. 查看APP ID等信息

4. 在主题目录下的_config.yml文件进行配置，如下图所示

参考地址

1. https://jerryc.me/posts/21cfbf15/#Valine
2. https://valine.js.org/quickstart.html
3. https://leancloud.cn/dashboard/app.html?appid=YDCJCx1H4IjIwg0bikGfBV5p-gzGzoHsz#/key

添加文章字数统计功能

文章字数统计功能使用的是hexo-wordcount依赖。

1. 安装依赖

cnpm install hexo-wordcount --save

2. 在主题目录下的_config.yml文件进行配置，如下图所示

wordcount:
  enable: true

参考地址

1. https://jerryc.me/posts/21cfbf15/#%E5%AD%97%E6%95%B8%E7%B5%B1%E8%A8%88