Hexo Next主题中集成gitalk评论系统

gitalk：一个基于 Github Issue 和 Preact 开发的评论插件

Register Application

在GitHub上注册新应用，链接：https://github.com/settings/applications/new

参数说明：
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如https://xt998.github.io
Application description # 描述，随意
Authorization callback URL：# 网站URL，https://xt998.github.io

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可

gitalk.swig

新建/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 %}

comments.swig

修改/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

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

index.swig

修改layout/_third-party/comments/index.swig，在最后一行添加内容：

{% include 'gitalk.swig' %}

gitalk.styl

新建/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

.gt-header a, .gt-comments a, .gt-popup aborder-bottom: none;
.gt-container .gt-popup .gt-action.is--active:beforetop: 0.7em;

third-party.styl

修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

@import "gitalk";

_config.yml

在主题配置文件next/_config.yml中添加如下内容：

gitalk:enable: truegithubID: github帐号  # 例：xt998   repo: 仓库名称   # 例：xt998.github.ioClientID: Client IDClientSecret: Client SecretadminUser: github帐号 #指定可初始化评论账户distractionFreeMode: true

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面后进入某篇文章内容下，就可以评论啦