{{ if .Site.Params.enableGitalk }}
<divid="gitalk-container"></div><linkrel="stylesheet"href="https://unpkg.com/gitalk/dist/gitalk.css"><scriptsrc="https://unpkg.com/gitalk/dist/gitalk.min.js"></script><script>constgitalk=newGitalk({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 }}
定位放 Gitalk 的位置
然后使用 Chrome 自带的 DevTools 分析一下网页结构,找到放 Gitalk 的位置
我们可以看见已经 Leavelt 为我们预留了 “谈笑风生区” 的位置,不过里面什么东西都没有。记下该 div 的class 或者 id (如果你使用的主题没有预留 “谈笑风生区”,可以记下你准备放 Gitalk 的位置附近 div 的class 或者 id,并以此定位)
打开 VSCode,搜索包含刚刚找到的 class 或者 id 的 HTML 模板 (一般是 single.html)
在模板中插入{{ partial "gitalk.html" . }}
配置 config.toml
在 config.toml 中添加以下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[params]enableGitalk=true[params.gitalk]clientID="[Client ID]"# Your client IDclientSecret="[Client Secret]"# Your client secretrepo="mogeko.github.io"# The repo to store commentsowner="Mogeko"# Your GitHub IDadmin="Mogeko"# Required. GitHub repository owner and collaborators. (Users who having write access to this repository)id="location.pathname"# The unique id of the page.labels="gitalk"# GitHub issue labels. If you used to use Gitment, you can change itperPage=15# Pagination size, with maximum 100.pagerDirection="last"# Comment sorting direction, available values are 'last' and 'first'.createIssueManually=false# If it is 'false', it is auto to make a GitHub issue when the administrators login.distractionFreeMode=false# Enable hot key (cmd|ctrl + enter) submit comment.