如何给不同theme的Hugo添加评论系统gitalk

工具 git 同时被 3 个专栏收录
6 篇文章 0 订阅
62 篇文章 0 订阅
9 篇文章 0 订阅

如何给不同theme的Hugo添加评论系统gitalk

GiTalk

gitalk 官方demo环境 gitalk github地址

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件

Gitalk is a modern comment component based on GitHub Issue and Preact

特性:

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeMode 为 true 开启)
  • 快捷键提交评论 (cmd|ctrl + enter)

运行效果

在这里插入图片描述

#评论是调用github的api来完成的,不依赖第三方
https://api.github.com/repos/yourrepo/issues?

创建 Github Application

如果没有application,就先创建 Github Application,这里是官方中文帮助文档

在这里插入图片描述

Client ID,Client secrets在后面config.toml中配置时,需要使用。
在这里插入图片描述

方式一,直接引用Hugo的主题

如果您是直接下载使用的主题,只需要四大步骤

  • 1.为主题添加 gitalk.html 模板

    路径地址 |airspace-hugo/layouts/partials/gitalk.html

    {{ if .Site.Params.enableGitalk }}
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script>
      const gitalk = new Gitalk({
        clientID: '{{ .Site.Params.Gitalk.clientID }}',
        clientSecret: '{{ .Site.Params.Gitalk.clientSecret }}',
        repo: '{{ .Site.Params.Gitalk.repo }}',
        owner: '{{ .Site.Params.Gitalk.owner }}',
        admin: ['{{ .Site.Params.Gitalk.owner }}'],
        id: location.pathname, // Ensure uniqueness and length less than 50
        distractionFreeMode: false // Facebook-like distraction free mode
      });
      (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
          document.getElementById('gitalk-container').innerHTML = 'Gitalk comments not available by default when the website is previewed locally.';
          return;
        }
        gitalk.render('gitalk-container');
      })();
    </script>
    {{ end }}
    
    1. single.html 插入 {{ partial "gitalk.html" . }}

路径地址 |airspace-hugo/layouts/_default/single.html

{{ partial "gitalk.html" . }}

在这里插入图片描述

  • 3.config.toml

    [params]
      enableGitalk = true
    [params.gitalk] 
        clientID = "Client ID" # 您刚才创建Github Application 的 Client ID
        clientSecret = "Client Secret" # 您刚才创建Github Application 的 Client Secret
        repo = "xxxx.github.io" # 您的博客的github地址Repository name,例如:xxxx.github.io
        owner = "GitHub ID" # 您的GitHub ID
        admin= "GitHub ID" # 您的GitHub ID
        id= "location.pathname" # 文章页面的链接地址就是ID
        labels= "gitalk" # Github issue labels. If you used to use Gitment, you can change it
        perPage= 15 # Pagination size, with maximum 100.
        pagerDirection= "last" # Comment sorting direction, available values are 'last' and 'first'.
        createIssueManually= true # 设置为true,如果是管理员登录,会自动创建issue,如果是false,需要管理员手动添加第一个评论(issue)
        distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.
    
  • 4.配置 OK 后,进行编译网站 并且 push 到 你的 GitHub 上,如果 createIssueManually 设置是 true . 首次登录后 Gitalk 就能正常使用,否则需要登录后,发起一个首论,才能正常使用。
    在这里插入图片描述

方式二,通过submodule引用Hugo的主题

如果你的themes是使用submodule来管理的,就是另一种方式来修改theme了。

Git Submodule 允许一个git仓库,作为另一个git仓库的子目录,并且保持父项目和子项目相互独立。

#其它操作都是一样,只是需要你先在theme仓库中,把上面的gitalk.html和single.html都做了,提交代码到你自己的theme仓库

#需要在themes下
cd /your地址/xxx.github.io.source/themes
#查看日志
git log
#然后再进入你的themes实例进行更新
git submodule update
#后续就是和本地编辑的theme修改一样的。

补充:bolg评论功能选择

  • Disqus(国外的,需要 VPN,kexueshangwang)

  • Hypercomments(不支持 Markdown)

  • valine

    Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。 理论上支持但不限于静态博客,目前已有HexoJekyllTypechoHugoGhost 等博客程序在使用Valine。

    特性

  • Github大礼包:gitmentgitalk(推荐),gitter(推荐); 三个都支持Markdown;

    原则上来说比较靠谱的是gitment(依托于github issue,能够自己管理,而且被墙的概率小),不过兼容性不太好(需要chrome内核才行)。

    Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

    特性

    • 使用 GitHub 登录
    • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
    • 支持个人或组织
    • 无干扰模式(设置 distractionFreeMode 为 true 开启)
    • 快捷键提交评论 (cmd|ctrl + enter)

Q&A

404 Error: Not Found

在这里插入图片描述

解决办法:未能正确找到仓库 repo,检查一下你的仓库是否配置正确。

#params.gitalk
repo = "rep名字" # 你的github托管仓库,点击settings,就能看到Repository name
#或者参考界面,按F12,查看issues的get请求地址
https://api.github.com/repos/owner名字/repo名称/issues?labels=Gitalk,...

Error: Validation Failed.

是因为 GitHub 对 Issue 的 label (文章页面的链接地址)存在限制,不能超过 50 个字符,否则会导致加载 Gitalk 插件失败。

Toml解决办法一:截取字符串 for toml

// 截取字符串 
var title = location.pathname.substr(0, 50); 
var gitalk = new Gitalk({     
clientID: 'xxxx',     
clientSecret: 'xxxx',     
repo: 'xxxx',     
owner: 'xxxx',     
admin: ['xxxx'],     
id: title,     
distractionFreeMode: false }) 

Html解决办法:md5

#找一个 js 实现的 md5
https://github.com/blueimp/JavaScript-MD5
#引入 js,对 url 加密
<script src="{{ site.baseurl }}/js/md5.min.js"></script>

var gitalk = new Gitalk({
  clientID: 'xxxxxxxxxxx',
  clientSecret: 'xxxxxxxxxxxxxxxxxxx',
  repo: 'xxxx.github.io',
  owner: 'xxxx',
  admin: ['xxxx'],
  id: md5(location.href)
})

Html解决办法:中文标题被转码长度变长

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: decodeURI(location.pathname),
    distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')

id: decodeURI(location.pathname) 使用了JS的解码函数decodeURI()。这样我生成issue的label貌似就是中文的字符。

Html解决办法:md5

{% 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 src="https://rawgit.com/qhh0205/78e9e0b1f3114db6737f3ed8cdd51d3a/raw/3894c5be5aa2378336b1f5ee0f296fa0b22d06e9/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: 'xxxx',
          clientSecret: 'xxxx',
          repo: '{{ xxxx }}',
          owner: '{{ xxxx }}',
          admin: ['{{ xxxx}}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
    </script>
{% endif %}
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值