作为一个新兴的框架,Astro 框架有着惊人的速度,构建也相当简单,但在现阶段,其生态还并没有发展起来,绝大多数主题也不支持例如 giscus 之类的评论系统,本文将会简单介绍如何在 Astro 框架的博客上使用 giscus 评论系统
NOTE请注意,本文的受众为有一定基础的博主
WARNING如果你的域名托管于 Cloudflare,那么你需要关闭 Rocket Loader,否则会导致评论系统的加载异常
giscus 配置
首先要做的,是对目标评论存储仓库进行 giscus 初始化配置 打开 giscus 官网,与以前使用 giscus 一样,对某一仓库进行配置,生成的配置文件应如下所示:
<script src="https://giscus.app/client.js"
data-repo="YOUR_REPO_NAME"
data-repo-id="REPO_ID"
data-category="Announcements"
data-category-id="CATEGORY_ID"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
将其存储下来,或保留网页不关闭,进入下一环节
Astro 配置
创建评论系统脚本
回到你的编辑器,这里以 VS Code + Fuwari 主题为例,在 src
下找到 components
目录
/
├── ...
└── src
├── components
└── ...
...
在你的 components
目录下新建一个 CommentSection.astro
(名字任意)
将刚才的 giscus 配置填入其中,保存
修改文章页面
找到负责渲染文章的 astro 文件,其应该在 pages
目录下 (这其实与其他框架是类似的,也就是网站由 “页面” 构成,其中会有一个页面是显示文章的)
在 Fuwari 主题中,其应该在 src
->pages
->posts
->[...slug].astro
,对其进行修改:
---
import CommentSection from '@components/CommentSection.astro'
---
...
<!-- 文章渲染主元素 -->
<div>
...
<!-- 最后一个元素 -->
<div>
...
</div>
<CommentSection />
</div>
...
注:Markdown 不支持渲染 Astro 语法,因此这里将代码块设置为相近的 JSX 来正确高亮 此处大幅简化的结构,总之
<CommentSection />
应该被放置在文章渲染主元素内的最后,或者说文章最后一个元素之后
如果以 Fuwari 主题为例,其应该放置在版权信息下
<div>
...
{licenseConfig.enable && <License ...></License>}
<CommentSection />
</div>
效果如下:
性能优化
IMPORTANT重新进行的本地严谨测试表明加与不加评论系统对性能没有影响,以下内容已作废!
giscus 作为一个 js 脚本,对于一个静态网页的性能开销是巨大的
对于一个控制变量的测试中 (一个 1500 字的复杂博客,不通过主页直接访问文章),其 lighthouse_mobile 的 Performance 评分分别为:
不添加评论系统 **:77 分 **
添加评论系统但不进行优化 **:56 分 **
添加评论系统并进行优化 **:70 分 **
可见优化还是相当重要的,优化的方法其实也相当简单,找到评论组件的 Astro 文件 (即刚才的CommentSection.astro
)
在开头添加:
// 该部分内容已删除
至此,你已完成所有设置,成功在 Astro 框架的博客上实现 giscus 评论系统