作為一個新興的框架，Astro 框架有著驚人的速度，構建也相當簡單，但在現階段，其生態還並沒有發展起來，絕大多數主題也不支持例如 giscus 之類的評論系統，本文將會簡單介紹如何在 Astro 框架的博客上使用 giscus 評論系統
NOTE
請注意，本文的受眾為有一定基礎的博主
IMPORTANT
該評論系統在 Vercel 上部署運作正常，但在 Cloudflare Pages 上部署時，從主頁進入文章無法正常加載評論系統，需要刷新頁面，或者直接通過鏈接進入文章，具體情況見下文最後
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>
效果如下：
性能優化#
giscus 作為一個 js 腳本，對於一個靜態網頁的性能開銷是巨大的
對於一個控制變量的測試中（一個 1500 字的複雜博客，不通過主頁直接訪問文章），其 lighthouse_mobile 的 Performance 評分分別為：
不添加評論系統：77 分
添加評論系統但不進行優化：56 分
添加評論系統並進行優化：70 分
可見優化還是相當重要的，優化的方法其實也相當簡單，找到評論組件的 Astro 文件（即剛才的CommentSection.astro）
在開頭添加：
---
export const partial = true
---
<script src="https://giscus.app/client.js"
... // Your giscus settings
</script>
對於一些不正常顯示的猜測和部分解決方案#
NOTE
此部分並非喂飯教程，請自行斟酌，一切僅為猜測
UPDATE
更新：禁止緩存的方式在少數情況下可能可以使部署在 CF Pages 上的評論系統運作正常（但會缺失頁面過渡動畫）！更多情況是根本加載不出來！
在Vercel 平台上，只需要在 Cloudflare 中配置博客站為瀏覽器永不緩存即可
示例如下：
但是此方法可完美解決部署在 Vercel 平台上的網站
對於部署在 Cloudflare Pages 上的網站，此方法不一定奏效，相當讓人迷惑，有時候可以正常加載評論，但頁面過渡動畫消失；有時候乾脆無法加載評論
猜測如下：
本博客配置為靜態網頁，其渲染方式為static，即將所有部件構建為HTML，主題設計之初就是這樣配置，現在已經難以修改為SSR渲染模式
Cloudflare 對於這樣的網頁，會直接當成純靜態網頁，對於進入文章這一動作，不會再進行第二次的刷新，因此評論模塊無法被正確的加載（禁止緩存的方式也許可以解決）
而 Vercel 則會在進入文章後，對於文章中的動態組件（即 giscus 模塊）進行一次重新的加載（你可以看到進入文章頁面後瀏覽器標籤頁的圖標在轉圈），因此 giscus 腳本就可以被正確的加載出來
Vercel 整體對 Astro 的適配要更好，因此部署 Astro 網站的首選應為 Vercel，目前綁定域名後中國大陸也可以直接訪問
至此，你已完成所有設置，成功在 Astro 框架的博客上實現 giscus 評論系統