惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Tenable Blog
MyScale Blog
MyScale Blog
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
爱范儿
爱范儿
博客园 - 司徒正美
D
Darknet – Hacking Tools, Hacker News & Cyber Security
量子位
N
News | PayPal Newsroom
S
Secure Thoughts
酷 壳 – CoolShell
酷 壳 – CoolShell
L
LINUX DO - 热门话题
有赞技术团队
有赞技术团队
V
Visual Studio Blog
T
Tailwind CSS Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Project Zero
Project Zero
B
Blog RSS Feed
J
Java Code Geeks
Google Online Security Blog
Google Online Security Blog
Last Week in AI
Last Week in AI
Cyberwarzone
Cyberwarzone
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
小众软件
小众软件
博客园 - 【当耐特】
Latest news
Latest news
T
Threat Research - Cisco Blogs
aimingoo的专栏
aimingoo的专栏
博客园_首页
博客园 - 三生石上(FineUI控件)
Engineering at Meta
Engineering at Meta
D
Docker
Forbes - Security
Forbes - Security
Help Net Security
Help Net Security
Apple Machine Learning Research
Apple Machine Learning Research
P
Proofpoint News Feed
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Simon Willison's Weblog
Simon Willison's Weblog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
V2EX - 技术
V2EX - 技术
N
Netflix TechBlog - Medium
The Last Watchdog
The Last Watchdog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Threatpost
Cloudbric
Cloudbric
T
The Exploit Database - CXSecurity.com
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
Webroot Blog
Webroot Blog

Hi,I`m lan

MCP协议新进展: 使用 Streamable HTTP 替换当前的 HTTP+SSE 实现。-liangyuanpeng 的博客 我的 AI 员工们开发的微信小程序上线了!-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog vercel 记录-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog [长期更新]cocos creator问题列表-liangyuanpeng 的博客 | liangyuanpeng's Blog go问题列表记录-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog node镜像的更多选择-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog containerd 中的弃用警告 - 为 2.0 做好准备!-liangyuanpeng 的博客 liangyuanpeng 的博客 | liangyuanpeng's Blog kep-1880-多服务CIDR-liangyuanpeng 的博客 | liangyuanpeng's Blog [长期更新]argoworkflow 的一些实践和思考-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 将Etcd作为一个kubernetes sig来运作-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog argoworkflow 云原生工作流引擎-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog kubecon china 2023将在上海举办-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 从零到 Kubernetes 子项目负责人-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog Kubernetes HPA:定制指标实现有效的CPU和内存扩展-liangyuanpeng 的博客 | liangyuanpeng's Blog JFrog 向 CD 基金会授予开源 Pyrsia-liangyuanpeng 的博客 helmchart发布v2.10.1-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog ingress浅试-liangyuanpeng 的博客 | liangyuanpeng's Blog gateway-liangyuanpeng 的博客 | liangyuanpeng's Blog 1.24.0发布-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 部署去ZK后的Apache Pulsar-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 用GO开发Envoy wasm filter-liangyuanpeng 的博客 | liangyuanpeng's Blog 用Rust开发Envoy wasm filter-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog v1.18.3发布-liangyuanpeng 的博客 | liangyuanpeng's Blog v1.20.0-beta.1发布-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog Bookkeeper-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog Bookkeeper开发环境搭建-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog webhook开发技巧-liangyuanpeng 的博客 | liangyuanpeng's Blog 部署在线的lank8s webhook之后,不再为k8s.gcr.io/gcr.io镜像苦恼-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 部署metrics-server,把kubectl top用起来-liangyuanpeng 的博客 | liangyuanpeng's Blog v1.9.0发布-liangyuanpeng 的博客 | liangyuanpeng's Blog v1.19.1发布-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog KubeSphere使用Contour Ingress作为项目网关-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 宣布Contour v1.13.0-liangyuanpeng 的博客 | liangyuanpeng's Blog [了解Rust基金会]介绍Mark Rousskov-liangyuanpeng 的博客 | liangyuanpeng's Blog [了解Rust基金会]介绍Tyler Mandry-liangyuanpeng 的博客 | liangyuanpeng's Blog [了解Rust基金会]介绍Bobby Holley-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog [了解Rust基金会]介绍Shane Miller-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog prometheus-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog 使用Cloudflare pages部署静态博客-liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog liangyuanpeng 的博客 | liangyuanpeng's Blog
liangyuanpeng 的博客 | liangyuanpeng's Blog
2021-02-17 · via Hi,I`m lan

TOC

缘由

静态博客不像动态博客一样想要什么功能就写个代码实现,但是折腾一番还是可以满足日常需求的。本文主要讲述使用utterances给静态博客实现评论功能。

了解utterances

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

安装utterances

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

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

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

配置utterances评论显示

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

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

<script src="https://utteranc.es/client.js"
repo="{你的github用户名}/{你的github page仓库名/或者是希望存放评论的仓库名}"
issue-term="title"
theme="github-light"
crossorigin="anonymous"
async>
</script>  

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

html中的配置模板

{{ if .Site.Params.utteranc.enable }}
<script src="https://utteranc.es/client.js"
repo="{{ .Site.Params.utteranc.repo }}"
issue-term="{{ .Site.Params.utteranc.issueTerm }}"
theme="{{ .Site.Params.utteranc.theme }}"
crossorigin="anonymous"
async>
</script>
{{ end }}

配置文件中的配置项:

## 配置 utteranc 评论,教程参考 https://utteranc.es/
[params.utteranc]
  enable = false
  repo = "{你的github用户名}/{你的github page仓库名/或者是希望存放评论的仓库名}" ##换成自己得
  issueTerm = "title"
  theme = "github-light"

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

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

  1. github-light
  2. github-dark
  3. github-dark-orange
  4. icy-dark
  5. dark-blue
  6. photon-dark
  7. preferred-color-scheme
  8. boxy-light

映射到 issue 也有几种方式:

  1. pathname
  2. url
  3. title
  4. og:title
  5. issue-number
  6. specific-term

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

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

最后

利用了 github issue 作为评论系统的底座确实很实用,但是有一个问题是当用户在浏览博客时如果没有登录 github 的话看不到评论,这是因为 utterances 会使用 github 的 api 去查询 issue,但 github api 需要有 token 才能够请求,因此如果用户没用登录过 github 的话是没有这个 token 的,也就因此无法显示出当前文章的评论了,目前我正在计划做一个 github api 的代理,使得用户没有 token 也依然可以看到文章的评论。

可以查看本文下方评论来查看这件事情的最新进度:)

现在,你的静态博客拥有了评论的功能,再多一个阅读本文需要x分钟的功能不过分吧?

再多一个自动化构建 algolia 索引不过分吧?

再多一个自动化优化图片不过分吧?

微信公众号

扫描下面的二维码关注我们的微信公众号,第一时间查看最新内容。同时也可以关注我的Github,看看我都在了解什么技术,在页面底部可以找到我的Github。

wechat-qrcode