hexo 系列教程: (四) 插件集成

Hexo 是一个快速、简洁且高效的博客框架。如何让它更具互动性, 如: 评论, 分享, 搜索, RSS 订阅. 欢迎阅读.

1. 多说评论(2017.6.1关闭服务)

1.1 注册多说

官网注册

点击我要安装, 会提供第三方登陆的方式, 选择你喜欢的方式登陆.

接着出现如下界面:

接着点击创建后到如下界面, 将通用代码复制:

1.2 配置 hexo

先编辑根目录下的 _config.yml 文件, 添加字段, 对应的值是指你在注册多说时二级域名里你自己输入的那部分，不包括 htpp:// 和 .duoshuo.com.

duoshuo_shortname: selfmaking

接下来, 如果是原始主题, 到 themes/landscape/layout/_partial/ 下打开 article.ejs 文件( 用 sublime text ), 如果使用了主题则找到对应主题下的 comment.ejs 文件进行编辑 ( 一般主题说明文档中都会有说明 ).

在文件中找到如下代码:

<% if (!index && post.comments && config.disqus_shortname){ %>
	<section id="comments">
  	<div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  	</div>
	</section>
	<% } %>

将disqus_shortname改成duoshuo_shortname, 再将 <section> 标签内容替换成多说的通用代码.

替换完如下:

<% if (!index && post.comments && config.duoshuo_shortname){ %>
	<section id="comments">
	<!-- 多说评论框 start -->
  	<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"selfmaking"};
  	(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  	})();
  	</script>
	<!-- 多说公共JS代码 end -->
	</section>
	<% } %>

最后只需要将代码中引号中文的内容替换掉即可:

key	value
data-thread-key	“<%= post.path %>”
data-title	“<%= page.title %>”
data-url	“<%= page.permalink %>”

这些字段是用来显示在多说的后台中的. 如下:

thread key 就是唯一标识, title 用来显示文章标题, 方便我们查看, 这两个也可作为搜索条件进行文章搜索. 因为通常情况下我们每篇文章对应一个标题, thread key 的意义就不大了, 除非你有两篇文章标题相同.

现在执行:

$ hexo clean
$ hexo g
$ hexo s

本地访问 http://localhost:4000 查看一下, 点击某篇文章, 划到最底部, 是不是如下图所示:

大功告成了!

2. 多说分享

分享组件有很多, 国内用的最多的是 JiaThis、多说, 多说的教程较少, 应该是因为支持的比较晚, 之前大部分都是多说 + JiaThis的组合.
我先尝试的 JiaThis, 完成时发现问题, 经常弹出不安全连接组件的提示, 应该是因为 JiaThis 没有支持 https 的原因. 由于评论组件用的多说, 既然多说支持分享索性就也用它的, 集成起来很简单, 和评论集成方式雷同.

首先进到如下界面:

将分享代码插入到集成评论时的通用代码前面. 我的代码是:

<% if (!index && post.comments && config.duoshuo_shortname){ %>
	<section id="comments">
	<div class="ds-share flat" data-thread-key="<%= post.path %>" data-title="<%= page.title %>" data-content="selfmaking.blog" data-url="<%= page.permalink %>"><div class="ds-share-inline">
	<ul  class="ds-share-icons-16">
	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
	<li> <a class="ds-google" href="javascript:void(0);" data-service="google">谷歌</a></li>
	<li> <a class="ds-qq" href="javascript:void(0);" data-service="qq">QQ</a> </li>
	<li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
	<li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
	<li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
	</ul>
		<div class="ds-share-icons-more"></div>
		</div>
	</div>
	<!-- 多说评论框 start -->
  	<div class="ds-thread" data-thread-key="<%= post.path %>" 	data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"selfmaking"};
  	(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  	})();
 	 </script>
	<!-- 多说公共JS代码 end -->
	</section>
<% } %>

其中参数和评论框大部分雷同, 分享图片的参数我将其删除了, 在分享时会自动获取文章图片, 目前我发现的问题是在 qq 分享的时候图片显示不出来, 其它情况下正常, 有人解决麻烦通知我, 感谢.

然后再修改根目录的配置文件_config.yml, 添加如下字段:

duoshuo_share: true

之后正常发布就可以了, 成功后界面如下:

在评论框上方有一排分享按钮, 按钮显示哪些是可以配置的, 只要自己增删代码就可以, 三方列表代码查看点击这里, 是不是很 easy.

3. 友言评论

与多说雷同, 可以大致看下多说的集成步骤.

注册友言
配置 hexo

1	获取友言的通用代码, 将其拷贝到对应文件对应位置, 目前本博客使用的是友言评论, 因为多说已经关闭服务了.

4. 站内搜索

随着博客的越来越多, 只依赖于目录的查找效率比较低下, 搜索功能显得尤为重要. 实现站内搜索的插件有很多, 百度、 swiftype、 Algolia等.
关于站内搜索这一块我了解后发现并不能写出一个完整的教程, 原因是不同的主题对搜索的支持并不统一, 有的只提供了一个搜索按钮 ( 可能直接跳转到百度或谷歌搜索 ), 有的支持搜索插件但并不全面, 你可能想用 swiftype 确只支持 Algolia 等.
在这里我写一些, 主题配置方面看各自选好主题的文档说明就好了.

ps: 这里我建议对前端掌握有限的人选择主题时最好选择对各类插件支持完整性较高的, 
    集成的时候学习成本也会相应的降低.

百度站内搜索我已经给出了链接, 使用百度搜索的人评价普遍不好, 这里不多做讲解.

4.1 swiftype

第一步注册, 要求使用工作邮箱, 公司工号等也都必须填写, 有点坑. 然后登陆，这里有个试用期的问题, 可以不用管, 到期降级, 并不是禁止使用, 功能还是够用的.
进入到如下界面, 点击 Create a search engine:

输入你的博客地址,

名字随意起, 如果多个网站使用了这个插件, 用这个做唯一标识区分.

之后出现如下界面, 点击 Complete Setup,

正则抓取你的网站数据,

抓取完成后划到下边,点击Content.

就能看到抓取的数据列表, 不需要的可以删除, 这就相当于搜索数据源.

接下来点击 Interface 下的 Install Search

出现如下界面.

点击 Change Configuration 可以个性化配置搜索界面, 这里就不多说了, 读者自己摸索吧.

我之前建议过大家选择已经集成搜索的主题, 如果主题内集成了 Swiftype Search, 到这里基本完成. 大多数主题只需要在配置文件中将 Swiftype Search key 配置上就可以了.
key 就在最后提供的代码中, 标红部分:

4.2 Algolia

官网注册

创建一个 index, 名字可以用博客名来命名, 这里的 index 作用和 Swiftype 中的 engine 雷同.

来到 API-KEYS 页面

接下来回到 Hexo 根目录执行:

$ npm install --save hexo-algolia

在根目录的 _config.yml 中加入如下配置，注意改成前面第一步注册成果数据

algolia:
      applicationID: 'your applicationID'
      apiKey: 'your apiKey'
      adminApiKey: 'your adminApiKey'
      indexName: 'your indexName'
      chunkSize: 5000

然后执行

$ hexo algolia

用来更新索引, 这个命令在以后每次部署前都要执行一遍.
Algolia 的集成到这基本结束, 根据主题配置文档再做其他需要的配置, 想修改搜索页样式可以去 Algolia 的后台管理设置.

5. 统计

统计有百度, 谷歌, CNZZ 等, 这里以 CNZZ 为例.
进入 CNZZ 注册一下，然后添加你的站点，如下:

添加好之后, 会看到统计代码界面,

随便复制一个, 选择自己喜欢的显示样式, 我是用的默认文字.

将代码复制到 themes/主题/layout/_partial 下的 footer.ejs 中, 当然你也可以放到 header.ejs. 示例代码是官方的 landscape 下的文件.

<footer id="footer">
 	<% if (theme.sidebar === 'bottom'){ %>
   	<%- partial('_partial/sidebar') %>
 	<% } %>
 	<div class="outer">
   	<div id="footer-info" class="inner">
     	&copy; <%= date(new Date(), 'YYYY') %> <%= 	config.author || config.title %><br>
     	<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
	# 统计代码
 	<script src="https://s11.cnzz.com/z_stat.php?id=****&web_id=****" language="JavaScript"></script>
 	</div>
</footer>

正常发布后, 页面效果:

然后再到查看密码界面设置密码:

现在到你的网站底部点击站长统计, 输入查看密码,

查看统计数据.

ps: 建议下载 CNZZ app, 可以通过手机查看你博客的统计数据.

6. RSS

添加 RSS 订阅可以让别人订阅你的 blog, 比如我就用 feedly 订阅博客, 然后利用 Reeder 客户端查看.

接下看怎么添加 RSS, 很简单.
第一步执行如下命令:

$ npm install hexo-generator-feed --save

成功后, 修改根目录下的 _config.yml 配置文件, 添加如下字段:

feed:
   type: atom
    path: atom.xml
    limit: 20
    hub:
    content:

完成了! 是不是很快, 接下来只需要和以前一样正常发布就好了.

官方教程在这里

参考文章

版权声明：本文为博主原创文章，未经博主允许不得转载。

hexo 系列教程: (四) 插件集成

目录

1. 多说评论(2017.6.1关闭服务)

1.1 注册多说

1.2 配置 hexo

2. 多说分享

3. 友言评论

4. 站内搜索

4.1 swiftype

4.2 Algolia

5. 统计

6. RSS

参考文章

selfmaking

hexo 系列教程: (一) hexo的搭建

hexo 系列教程: (二) hexo+github

hexo 系列教程: (三) 搜索引擎收录

hexo 系列教程: (四) 插件集成