hexo+gitalk评论系统配置

主要参考以下几篇文章

Hexo NexT主题中集成gitalk评论系统：可以当教程用，但存在一些问题。

Hexo next 配置 Gitalk 总结：解决了上面那个教程存在的问题。

官方：不是配置文档但因为是官方的所以优先参考。

我参考了上面三个配置方法，整合了一下

step1：点击注册OAuth

填写的内容参考参考文章2，这里放他的截图

注册填写

ps：我在第二栏Homepage URL填的也是自定义域名。

注册成功后不要关闭跳转的页面，Client ID和 Client Secret 等等还会用到

Step2：配置文件

这里同时参考了3个文章中的内容，我仅仅重新整合了一下，建议新手直接按步骤来。需要进一步了解的话请点击上面的三个链接。再次感谢上面的几位大佬。

gitalk.swig

新建 /layout/_third-party/comments/gitalk.swig文件，添加以下内容

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
    {% if theme.gitalk.enable %}
        {% if page.comments %}
        <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.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(','),
            pagerDirection: '{{theme.gitalk.pagerDirection}}',
            id: md5(window.location.pathname),
            distractionFreeMode: false
            })
            gitalk.render('gitalk-container')
        </script>
        {% endif %}
    {% endif %}
{% endif %}

ps: 如果这里按链接1中配置会导致 Error：Validation Failde。

错误原因：https://github.com/gitalk/gitalk/issues/102

解决方法：改成使用上面代码块中的配置方法。（详见 参考文章2）

comments.swig

修改/layout/_partials/comments.swig，添加以下内容（与其他的 elseif处在同一级即可）。(参考文章3)

1
2
3

{% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

index.swig

修改 layout/_third-party/comments/index.swig，在最后一行添加内容。(参考文章1)

1	{% include 'gitalk.swig' %}

gitalk.styl

新建 /source/css/_common/components/third-party/gitalk.styl，添加以下内容：(参考文章1)

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

third-party.styl

修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式。（参考文章1）

1	@import "gitalk";

_config.yml

在主题配置文件next/_config.yml中添加如下内容：（参考文章2、3）

gitalk:
  enable: true
  repo: # 仓库名称，例：asdfv1929.github.io（这里注意，不是仓库地址，所以不需要加上前面的https或github.com/之类的）
  ClientID:     # 之前注册的 OAuth 界面的提供的 ID
  ClientSecret: Client Secret # 同上
  owner: # github 帐号
  admin: # 同上，但可以添加额外的管理员用户，用逗号隔开
  pagerDirection: first

填写你自己的内容（这里就需要填写之前 Client ID和 Client Secret）