我的评论区是静态HTML

# 我的评论区是静态HTML 来源：https://jva.lol/weblog/my-comment-section-is-static-html/ 2026年8月14日 ## 此处的评论区是静态HTML。阅读无需任何成本。\# (https://jva.lol/weblog/my-comment-section-is-static-html/#the-comment-section-here-is-static-html-reading-costs-nobody-anything) 发布评论则需要多一点步骤。这是我对抗机器人、垃圾信息发送者等的一种防护措施。 本博客是一个Hugo站点。它拥有评论区。如果你查看任何带有评论的文章的页面源代码，会发现评论直接内嵌在HTML中，因为它们像其他内容一样，在构建时就被编译到页面里了。这里没有小部件、没有iframe、没有跟踪器、也没有第三方脚本。加载文章时，除了本站服务器外，不会向任何其他服务器发出请求。页面虽然包含一些JavaScript（用于站内搜索等小功能），但评论功能从不需要它：即使关闭JavaScript，你也能阅读所有评论并发表评论。 ## 架构形式\# (https://jva.lol/weblog/my-comment-section-is-static-html/#the-shape) 评论数据存储在我运行的一个小型Phoenix服务器上，它叫做“冰棒船”。每篇文章在服务器上都有一个对应的线程；发布文章时，系统会发起一次API调用以创建该线程，并将其URL写入文章的前置元数据（front matter）中。这个URL是连接两个系统的唯一纽带。 在构建时，Hugo会获取每个线程的`replies.json`文件，并在每次构建时将回复渲染为纯HTML一次，结果会被缓存，且缩进层级有限制。如果服务器不可达，构建过程会继续进行，但不会渲染任何评论。评论系统不会搞垮博客。 在回复列表下方，是一个纯HTML表单：一个文本框和一个提交按钮，将内容POST到“冰棒船”。没有脚本、没有cookie、页面加载时没有请求。如果你需要登录，“冰棒船”会引导你完成登录、确认，然后将你重定向回文章页面，并在URL中加上`#just-posted`。一个隐藏的提示会通过CSS的`:target`选择器显示，告知你的评论正在处理中。确实如此：“冰棒船”会触发我的构建钩子，大约一分钟后，评论就会成为页面的一部分。一个小便利是，评论落地后，页面会为你自动刷新。手动刷新也能达到同样效果。 ## 为何采用这种形式\# (https://jva.lol/weblog/my-comment-section-is-static-html/#why-this-shape) 阅读是静态的。写入是动态的。这就是全部理念。 阅读者无需付出任何代价，也不依赖任何东西。他们在此获得的页面，就是我构建的包含评论的页面。而评论者只在写入的那一刻接触服务器——那正是一个服务器不仅有用，而且宛如护城河的关键点：身份验证、垃圾信息防护、通知功能。评论者受到保护，网站所有者（如我）在有人留言时会收到通知。 持久性自然随之而来。评论存储在我生成的页面中，因此无论评论服务器发生什么，它们都会与博客同在。大多数评论系统恰恰相反：对话内容存放在它们的基础设施上，你的页面只是在每次读取时借用它，每一次读取，永远如此。 没有验证码。垃圾信息防护是“冰棒船”的职责，并且保持隐形：蜜罐陷阱、提交时间间隔检查、速率限制以及登录步骤本身。简单来说，“冰棒船”就是门口的守卫。 ## 真实的成本\# (https://jva.lol/weblog/my-comment-section-is-static-html/#the-honest-costs) 评论会滞后于一次构建。在这个博客上大约一分钟。 发表评论需要在“冰棒船”上拥有一个账户。这会劝退一些人。我保留这个要求，因为署名评论是实现“无验证码”立场的关键。 如果“冰棒船”在构建期间宕机，受影响的文章的本次构建将不会渲染新评论，直到下一次构建才会将其收录。我宁愿页面有时“忘记”评论，也不愿它有时直接失效。 ## 如果你想采用此方案\# (https://jva.lol/weblog/my-comment-section-is-static-html/#if-you-want-this) API文档集中在一页：创建线程、获取JSON格式的回复、将构建钩子指向你的主机。文档位于 https://www.popsicleboat.com/for-bloggers/api —— 你可以自行生成一个令牌，该令牌仅展示给你一次。其他人无法看到。 你的回复会出现在该线程中。大约一分钟后，它就会出现在这里。 或在Popsicle Boat上阅读整个线程 → (https://www.popsicleboat.com/c/blogging/posts/333)