资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用utterances给静态博客实现评论功能

这篇文章将为大家详细讲解有关如何使用utterances给静态博客实现评论功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站建设、程序开发、网站优化、微网站、小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都做网站、成都网站建设、成都外贸网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。

了解utterances

utterances是一款基于Github Issue的Github工具,优点主要是无广告、加载快、配置简单,轻量开源!由于我没有使用过其他评论工具的经验,因此只讲述一下utterances自身的优点,具体对比情况无法给出,但是看到有的博主表示之前使用disqus,但是广告多,加载也比较慢,体验了一把utterances 后,马上切换到utterances。相信utterances足够让我使用很久了。

安装utterances

由于utterances是一款Github App,因此安装utterances[1]非常简单,只需要授权特定repo权限给utterances就可以了,注意一个点:授权的这个repo必须是public的,可以选择多个repo,但是建议选择一个就可以了,也比较安全。

给出我授权的repo作为参考,我是选择博客的repo作为utterances评论的存放点(在博客评论的内容都会以issue的形式发布在repo下).

如何使用utterances给静态博客实现评论功能

到目前为止utterances就已经安装好了,接下来是需要在博客将评论的客户端显示出来。

配置utterances评论显示

可以配置在你希望显示评论的地方,这里给出一个简单的实现:配置在footer.html的顶部(显示在每篇文章的底部).

如何使用utterances给静态博客实现评论功能

如何使用utterances给静态博客实现评论功能

把具体的仓库改成自己授权给utterances的仓库即可。

这是当前最简单的方式,更优雅的方式是以配置文件的方式实现,例如:

html中的配置模板

{{ if .Site.Params.utteranc.enable }}{{ end }}

配置文件中的配置项:

## 配置 utteranc评论,教程参考 https://utteranc.es/[params.utteranc]  enable = false  repo = "liangyuanpeng/liangyuanpeng.github.io" ##换成自己得  issueTerm = "title"  theme = "github-light"

这样的话需要修改仓库或者主题都可以很方便的修改一下配置文件就可以了,同时也可以选择不开启评论。

评论显示的主题有多种,具体可以在utterances官方[2]查看,这里给出当前时间点的一个列表:

1.github-light2.github-dark3.github-dark-orange4.icy-dark5.dark-blue6.photon-dark7.preferred-color-scheme8.boxy-light

映射到issue也有几种方式:

1.pathname2.url3.title4.og:title5.issue-number6.specific-term

我选择的是title的方式,对应评论会以文章标题作为issue的标题创建在对应仓库下。

到目前为止,给hugo静态博客添加评论的功能已经做好了,不需要服务器就可以拥有评论功能,实用!

关于“如何使用utterances给静态博客实现评论功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:如何使用utterances给静态博客实现评论功能
网页地址:http://www.cdkjz.cn/article/piphds.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220