"使用utterances作为hugo博客评论插件"
"使用utterances作为hugo博客评论插件"
之前我的博客使用的是disqus来做评论插件的，但是disqus实际上在国内不挂梯子的情况下是不能访问的，所以即便是我自己，绝大多数的时候是看不到评论的（虽然平时也确实没什么人评论）。
今天中午在浏览自己的订阅新闻时，看到了utterances：
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
- Open source. 🙌
- No tracking, no ads, always free. 📡🚫
- No lock-in. All data stored in GitHub issues. 🔓
- Styled with Primer, the css toolkit that powers GitHub. 💅
- Dark theme. 🌘
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲
我基本上第一时间就觉的它就是我要找的东西，它的展示样式我很喜欢，访问性能很好，国内访问很快，最棒的是恰好和github整合在一起，而我的博客其实是基于hugo，内容也是部署在github上的，这样就恰好可以把评论内容使用github的issue来管理，而utterances很方便的帮我做到了这件事情，基本上把我使用disqus的痛点都给我解决了。
我的博客是在hugo的zozo主题的基础上进行魔改的，默认的zozo主题不支持utterances，我自己修改了一下zozo的代码，是的他支持了utterances，算下来一共修改了4个文件，增加了一个utterances_comments.html文件，修改了hugo的single.html和archives.html文件，也修改了hugo的config.toml文件。具体的修改代码如下：
简单代码改动如下：
<!-- valine -->
<div class="doc_comments">
<div class="comments_block_title">发表评论</div>
<div id="vcomments"></div>
</div>
<!--https://utteranc.es/-->
<link rel="stylesheet" href="{{ "/css/comments.css" | absURL }}" />
<script src="https://utteranc.es/client.js"
repo="{{ .Site.Params.utteranc.repo }}"
issue-term="{{ .Site.Params.utteranc.issueTerm }}"
theme="{{ .Site.Params.utteranc.theme }}"
crossorigin="{{ .Site.Params.utteranc.crossorigin }}"
label="{{ .Site.Params.utteranc.label }}"
async>
</script>
- disqusShortname = "rollenholt" ## disqus配置
+ [params.utteranc] # utteranc is a comment + system based on GitHub issues. see https://utteranc.+ es
+ enable = true
+ repo = "xkrivzooh/wenchao.ren" # The repo to + store comments
+ issueTerm = "pathname"
+ theme = "github-light"
+ crossorigin = "anonymous"
+ label = "comment"
<!-- 评论系统 -->
{{ if .Site.Params.valine.enable }}
{{ partial "comments.html" . }}
{{ else if .Site.Params.utteranc.enable }}
{{ partial "utterances_comments.html" . }}
{{ else }}
<div class="doc_comments">{{ template "_internal/disqus.html" . }}</div>
{{ end }}
@@ -48,4 +50,4 @@ <h1><a href='{{ .RelPermalink }}'>{{ .Title }}</a></h1>
{{ partial "js.html" . }}
</body>
@@ -44,7 +44,8 @@ <h3>{{ .Key }}</h3>
<!-- 评论系统 -->
{{ if .Site.Params.valine.enable }}
{{ partial "comments.html" . }}
{{ else if .Site.Params.utteranc.enable }}
{{ partial "utterances_comments.html" . }}
{{ else }}
<div class="doc_comments">{{ template "_internal/disqus.html" . }}</div>
{{ end }}
@@ -56,4 +57,4 @@ <h3>{{ .Key }}</h3>
{{ partial "js.html" . }}
</body>
最终的效果大家可以看文章底部评论区就行。我感觉还是可以的。 至于这个utterances只支持github登录，这一点不是问题，因为访问我的博客的人基本也就是程序员，一般都会有github的账号，其他人也不会浏览到我的网站，所以这个不是问题。
最后推荐你也试试。
版权申明
本站点所有内容，版权均归https://wenchao.ren所有，除非明确授权，否则禁止一切形式的转载协议
打赏
