jekyll-theme-H2O 配置 gitalk

伪君子

发布于 2018-07-12 11:26:48

8690

发布于 2018-07-12 11:26:48

文章被收录于专栏：伪君子的梦呓伪君子的梦呓

前提是搭建了博客，使用的主题是 jekyll-theme-H2O 这个主题。其余的可以借鉴，但不一定完全适用。

0 注册 GitHub Application

首先要注册一下 GitHub Application，

https://github.com/settings/applications/new

注册完就会有 Client ID 和 Client Secret

1 配置 _config.yml

在 comments 那添加

  gitalk: true
  gitalk_clientID: 'Client ID'
  gitalk_Secret: 'Client Secret'
  gitalk_repo: '用户名.github.io'
  gitalk_owner: '用户名'
  gitalk_admin: '用户名'
  distractionFreeMode: true

是在 comments 下面那添加，不要搞错地方。

2 配置 post.html

文件的位置在 _layouts\post.html

2.0 在 <html> 下添加

在 <html> 这个标签下加上这两行

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

就像这样

2.1 在 {% include footer.html %} 里添加

<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

如图所示，位置不要搞错

2.2 在 {% if site.comments.disqus %}后添加

  {% if site.comments.gitalk %}
    <script>
        var gitalk = new Gitalk({
              clientID: '{{ site.comments.gitalk_clientID }}',
              clientSecret: '{{ site.comments.gitalk_Secret }}',
              repo: '{{ site.comments.gitalk_repo }}',
              owner: '{{ site.comments.gitalk_owner }}',
              admin: '{{ site.comments.gitalk_admin }}',
              id: location.pathname,      // Ensure uniqueness and length less than 50{{ page.title }}
              distractionFreeMode: '{{ site.comments.distractionFreeMode }}'  // Facebook-like distraction free mode
            })

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

如图所示

关于 post.html 这部分的修改可以看一下我的修改

保存修改，再提交。

3 开 issues

进入博客，点击设置，

进去后勾选一下 issues 就搞定了。

再去看一下你博客里面的文章，如果说出现了评论框，那就是成功了。

4 相关说明

参考了这篇文章才实现的：https://tea9.github.io/2018/06/24/gitali_config.html

文章作者写的说明：http://note.youdao.com/publicshare/?id=6ea132ba501b49b2928125a694cc9ad9#/

使用的主题是：https://github.com/kaeyleo/jekyll-theme-H2O/

感谢两位作者

原文链接是我博客上这篇文章的链接

题图：Photo by Felix Russell-Saw on Unsplash

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-06-29，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自伪君子的梦呓微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度