接入博客

一行引入

在需要显示评论的页面加入：

<div id="comments"></div>
<script src="https://comments.example.com/embed.js" data-server="https://comments.example.com" defer></script>

embed.js 会自动读取 data-server 并挂载到 #comments。

post 默认取 location.pathname，已按仓库规则规范化（去首尾斜杠、去 .json 后缀）。

显式实例化

需要控制时机或指定文章标识时：

<div id="comments"></div>
<script src="https://comments.example.com/embed.js" defer></script>
<script>
  window.__gitCommentsAutoload = false
  window.addEventListener('DOMContentLoaded', () => {
    new Comments({
      server: 'https://comments.example.com',
      post: 'posts/hello-world',
      mount: '#comments',
    })
  })
</script>

Hugo

在 layouts/partials/comments.html 中加入：

<div id="comments"></div>
<script src="https://comments.example.com/embed.js"
        data-server="https://comments.example.com"
        data-post="{{ .File.TranslationBaseName }}"
        defer></script>

Hexo

在文章模板 layout/post.pug 或 layout/_partial/post/comments.ejs 中加入同样的 script 片段，data-post 用 page.path。

Astro

在 src/components/Comments.astro：

<div id="comments"></div>
<script is:inline src="https://comments.example.com/embed.js"
        data-server="https://comments.example.com"
        data-post={Astro.url.pathname} defer></script>

注意事项

只填 server 是必填项，widget 无法访问你的仓库或 token
样式在 Shadow DOM 内，不会被博客主题污染，也不会污染主题
提交成功文案由服务端审核开关决定：「审核通过后显示」或「约 1 分钟后可见」
草稿（昵称、邮箱、内容）只存在浏览器 localStorage，提交成功后清除

#接入博客

#一行引入

#显式实例化

#Hugo

#Hexo

#Astro