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
备注
- 如果不执行第五、六步,则可能会出现如下报错
Please set an HEXO_ALGOLIA_INDEXING_KEY environment variable to enable content indexing.
- 对搜索功能有更改时(html、css等)均需要在git bash中执行hexo algolia。
参考地址
- https://jerryc.me/posts/21cfbf15/#Algolia
- https://github.com/oncletom/hexo-algolia
- http://www.werty.cn/2019/07/hexo/hexo%20algolia命令执行失败解决方案/
- https://www.zhihu.com/question/46822587/answer/308411949
添加评论功能
评论功能使用的是Valine插件, 官网地址。
1. 打开LeanCloud进行登录注册
2. 创建应用如下图所示
3. 查看APP ID等信息
4. 在主题目录下的_config.yml文件进行配置,如下图所示
参考地址
- https://jerryc.me/posts/21cfbf15/#Valine
- https://valine.js.org/quickstart.html
- https://leancloud.cn/dashboard/app.html?appid=YDCJCx1H4IjIwg0bikGfBV5p-gzGzoHsz#/key
添加文章字数统计功能
文章字数统计功能使用的是hexo-wordcount依赖。
1. 安装依赖
cnpm install hexo-wordcount --save
2. 在主题目录下的_config.yml文件进行配置,如下图所示
wordcount:
enable: true
参考地址