---

title: hexo5--hexo辅助插件和第三方服务
date: 2017-10-25 12:15:08
categories: hexo建博
tags: hexo
copyright: true
keywords: hexo,next,插件,工具
comments: ture

---

添加RSS

效果图

1.png

实现方法

首先安装插件：

$ npm install --save hexo-generator-feed

打开博客根目录下的_config.yml 配置文件，末尾添加如下代码：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

打开皮肤目录下的_config.yml 配置文件，修改rss的属性值：

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

重新生成博客。

评论插件-gitalk

到目前为止，好用的评论插件基本都停止服务了，剩下的畅言需要备案，其他也不怎么好用，所以我直接选择了gitalk，必须拥有github账号才可以评论，范围是小了点，先用着再说吧，效果如图：

2.png

安装步骤如下：下面引用这篇文章， 谢谢作者的分享。

新建Gitalk的swig文件

由于Next主题的可扩展性还算好，为了方便统一管理，尽量不修改已经存在的文件。
首先创建Gitalk的swig文件，放在next/layout/_third-party/comments文件夹下，命名为gitalk.swig。内容如下

{% if page.comments && theme.gitalk.enable %}

  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'], 
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })

        gitalk.render('gitalk-container')           
       </script>
{% endif %}

在主题文件layout/_third-party/comments/index.swig中引入刚刚添加的文件。

{% include 'gitalk.swig' %}

修改主题评论代码

在layout/_partials/comments.swig文件中找到最后一个if分支，应该是这两句:

{% elseif theme.valine.appid and theme.valine.appkey %}
      <div id="vcomments"></div>

在最后一个if分支后加一个Gitalk的分支:

{% elseif theme.gitalk.enable %}
 <div id="gitalk-container"></div>

在主题配置文件中引入Gitalk

gitalk:
  enable: true
  githubID: newdee   
  repo: BlogComments
  ClientID: ******
  ClientSecret: ******
  adminUser: newdee
  distractionFreeMode: true

这里需要创建OAuth Application，没有的小伙伴请戳这里

其中githubID是你的Github用户名，repo是你用来存放评论Issue的仓库，可以不是Blog的仓库。adminUser是你的用户名，主要用来初始化评论的。clientID和client_secret是你的授权客户端ID和密钥。具体获得方法是在Github的设置界面选择Authorized Github Apps，然后Register a new application，将Authorization callback URL设置为你的Blog的域名，然后就可以获得clientID和client_secret了。

基本上到这里就可以直接用了,打开页面会提示你初始化评论框。如果要设置按钮的样式，可以参照以下步骤:

新建样式文件

要设置评论框的样式，可以在source/css/_common/components/third-party/文件夹下，新建一个gitalk.styl文件，向其中加入如下内容:

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

可以根据自己的喜好添加修改样式。

引入样式文件

在主题目录下的source/css/_common/components/third-party/third-party.styl文件中引入:

@import "gitalk";

Issue重复的问题

到这里是可以用了的，但是初始化过程中发现Issue页面有两个一样的，后来发现是因为它把直接文章页面地址和点击阅读更多所跳转的带#more的页面当成两个页面，因此重复创建Issue了。
解决方案:
由于默认的id参数是location.href，可以将其改为location.pathname，即可解决当前状况。
即在gitalk.swig文件中的admin下面加一行:

id: location.pathname,

至此，大功告成。
不过配置完才发现，Gitalk也是需要一篇文章一篇文章的初始化的，并不能自动将所有的文章一次性初始化完成。

本地化

由于Gitalk是使用UNPKG来给npm的CDN加速的，但是网络延迟有时候会稍高，可以选择直接下载js和css文件到本地。
将下载的css文件放于主题目录的source/css目录下，js放于source/js/src目录下。
将layout/_third-party/comments/gitalk,swig文件中的超链接两行修改一下:

<link rel="stylesheet" href="/css/gitalk.css">
<script src="/js/src/gitalk.min.js"></script>

然后就可以正常加载了。

搜索引擎收录

待续