文档 — 接入

为 Astro 接入评论

零框架绑定。Astro 默认不发 JS，评论只在岛屿里水合。

创建站点

在后台创建站点并验证你要嵌入的域名。

加入客户端岛屿

用 client:load 岛屿或直接把 <script type="module"> 放到 layout，无需额外打包配置。

放置容器

在 .astro 页面或 layout 里加入 <div id="comment"></div>。

Astro 示例（src/layouts/Base.astro）

需要响应式 props 就包一层 client:load 岛屿，否则直接 module script 足够。

src/layouts/Base.astro

---
 // Base.astro — works for both SSG & SSR
 ---
 <html>
   <head>
     <link rel="stylesheet" href="https://unpkg.com/@roudanio/awesome-comment@latest/dist/style.css" />
   </head>
   <body>
     <slot />
     <div id="comment" style="min-height:360px"></div>
     <script type="module">
       import { getInstance } from 'https://unpkg.com/@roudanio/awesome-auth@latest/dist/awesome-auth.js';
       import Comment from 'https://unpkg.com/@roudanio/awesome-comment@latest/dist/awesome-comment.js';
       const auth = getInstance({ googleId: "YOUR_GOOGLE_CLIENT_ID", root: "https://awesomecomment.org/api/site/auth" });
       Comment.init(document.querySelector('#comment'), {
         siteId: "YOUR_SITE_ID",
         apiUrl: "https://awesomecomment.org",
         awesomeAuth: auth,
         postId: location.pathname,
         locale: navigator.language,
       });
     </script>
   </body>
 </html>

小技巧

• SSG：每个静态页通过 postId 独立 thread；SSR 同一套代码可用。
• 用 client:load 或 client:visible 延迟到可见再加载。
• 避免把组件放进 view-transitions，防止重复初始化。

常见问题

支持 Starlight 吗？

支持。Starlight 基于 Astro，给自定义文档页或覆盖默认 layout 即可。

性能影响？

组件 gz 后约 18kB，只水合评论岛屿，Astro 仍可 100 分。

查看示例查看全部对比