github + hexo + next (插件篇)

发表于 | 更新于: | 分类于 | | 本文总阅读量 次

在完成一个博客系统的基本搭建后,还需要将博客添加几个常用功能,比如搜索,评论等,接下来我们就看看如何去添加这些功能

1 algolia搜索

hexo官方提供了很多第三方服务集成,其中搜索有Swiftype,微搜索等多种方式,这里我们选用的是algolia搜索

1.1 查看Next版本

algolia搜索插件的特性是在版本 5.1.0 中引入，要使用此功能请确保所使用的 NexT 版本在此之后,所以第一步要查看next版本

  • 确定你的NexT版本号，查看的方式是在NexT主题文件夹下的_config.yml文件中的最末端
  • 如果你的版本号在5.1.0以前,设置algolia的方式就比麻烦,参考NexT主题集成Algolia搜索插件

1.2 安装与配置algolia

  • 如果Next主题的版本是在5.1.0或之后,则参考官方教程

官方将其分为5个部分:

1. 注册Algolia,创建Index
2. 安装 Hexo Algolia
3. 获取Key,更新站点配置
4. 更新Index
5. 主题集成

image

1.3 配置问题解决

我按照官方的教程,出现了几个问题,在此总结出来

  • 在第4步的 hexo algolia之后,出现Error
    image

此时,需要做如下几件事:
1.将官方第3步中的

1
2
3
4
algolia:
  applicationID: 'applicationID'
  indexName: 'indexName'
  chunkSize: 5000

改为

1
2
3
4
5
algolia:
  applicationID: 'applicationID'
  indexName: 'indexName'
  apiKey: 'apiKey'
  chunkSize: 5000

且字符串两边记得加上单引号

2.如果你是在windows下,在git bash(git命令行工具)里面输入以下命令(切记切记要用git bash，因为Windows下无论powershell还是cmd都无法执行export命令,有人说windos下可以用set,但是实际也会出现问题,具体参考知乎-回答 的第二个回答):

1
2
export HEXO_ALGOLIA_INDEXING_KEY=你的API Key
hexo algolia

注意: 此步对应官方的第4步,HEXO_ALGOLIA_INDEXING_KEY后面的参数并不是Search-Only API key,而应该是你的API Key

之后你应该就可以在hexo中使用Algolia了

1.3 进阶知识

1.4 问题

2 百度统计

3 不蒜子统计

4 Hypercomments评论

  1. 在Hypercomments官网登录，目前只支持谷歌账号登录，国内有万里长城阻隔，翻墙注意安全！
  2. 登录之后选择Lite版本，绑定自己的url。
  3. 在设置中（齿轮图标的那个），点击Widget，然后在代码框中找到Widget_id，记录下来。
  4. 在NexT主题的配置文件—config中搜索hypercomments_id，然后去掉前面的#号，冒号后面加一个空格填入上面记录的Id。
    部署就能看到效果。

5 百度分享

  1. 在站点配置文件中，添加字段baidushare，值为 true

关于什么是站点配置文件，我相信大家应该清楚了，如果不知道的话请看我的上一篇博文中有所提及。

1
baidushare: true #百度分享功能
  1. 在主题配置文件中，找到baidushare字段，设置其展现方式
1
2
baidushare: 
  type: slide #百度分享展示的方式button|slide
0%