为NexT主题部署Gitalk评论插件

发表于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 2.1k | 阅读时长 ≈ 4 分钟

在之前的文章中（Gitalk评论插件），已介绍过Gitalk评论插件，GitHub上为NexT添加Gitalk的pull request一直没有合入，自己手动本地部署吧。

为什么选择Gitalk

由于国内网络大环境的原因，Disqus 等优秀的评论系统都需要梯子才能使用，多说已经停运，NexT 已支持的 Gitment 目前存在一些问题，作者好像也已经很久没有维护了，故选择现在还在活跃的 Gitalk。

新增插件代码

新建 layout/_third-party/comments/gitalk.swig 文件，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% if theme.gitalk.enable %}
  {% if page.comments %}
    <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">
      const gitalk = new Gitalk({
        clientID: '{{theme.gitalk.clientID}}',
        clientSecret: '{{theme.gitalk.clientSecret}}',
        repo: '{{theme.gitalk.repo}}',
        owner: '{{theme.gitalk.owner}}',
        admin: '{{theme.gitalk.admin}}'.split(','),
        id: location.pathname,
        // facebook-like distraction free mode
        distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}',
        createIssueManually: '{{ theme.gitalk.createIssueManually }}'
      })
      gitalk.render('gitalk-container')
    </script>
  {% endif %}
{% endif %}

添加插件到NexT主题中

修改 layout/_third-party/comments/index.swig 文件，添加以下代码：

1
{% include 'gitalk.swig' %}

根据添加启用插件

修改 layout/_partials/comments.swig 文件，添加以下代码：

1
2
3
4
{% elseif theme.gitalk.enable %}
    <div class="comments" id="comments">
      <div id="gitalk-container"></div>
    </div>

在主题中增加Gitalk配置

修改 _config.yml 文件，增加以下代码：

1
2
3
4
5
6
7
8
9
10
11
# Gitalk
# more info please open https://github.com/gitalk/gitalk
gitalk:
  enable: true
  clientID: # Github Application Client ID
  clientSecret: # Github Application Client Secret
  repo: # Github repo
  owner: # Github repo owner
  admin: # support multiple admins split with comma, e.g. foo,bar
  distractionFreeMode: true # Facebook-like distraction free mode
  createIssueManually: true

填写相应的字段，通过 hexo 部署你的博客，即可看到评论插件效果。

相关文章
0%