之前看老麥的部落格文章，說是從 NextJS 換成 Astro，很適合搭建靜態部落格，使用靈活，過程也不複雜，看的我又有折騰的方向了。目前我的部落格除了主站在用的 Wordpress 外，還有其他的如：Typecho,Xlog，靜態部落格曾經也折騰過 Hexo,Hugo（不過那都是很久的事了，其中搭建 / 使用等幾乎也忘得差不多了），當然其他諸如：Ghost、Halo 這種有後台的我們以前也是用過的。
既然 Astro 這麼好玩，那就玩起來吧，官方的教程都有中文的，不得不讚一下，按著步驟來就好，這裡需要注意的是要選好主題，這玩意據說換主題比較麻煩（這點不像其他那麼方便，但也絲毫不能影響我們這折騰的心），選好主題後一番部署基本就差不多了。一些小修改啥的基本都是照著官方教程來就可以了，非常簡單，關鍵信息設定好就可以傳到自己的 Github 上，再用 Vercel 部署就可以了（當然也可以先本地查看一下）。
Astro 最讓我困惑的是怎麼給它添加評論，折騰了很久也沒能搞定，後來還是在老麥的指導下解決了，再次感謝老麥，放棄自己中午休息還給我寫教程，感謝感謝！那麼下面就來記錄一下 Astro 添加評論的過程。
- 在組件目錄下
src/components/下新建一個文件，例如Comments.astro，文件名記牢，後面會引用
- 如果添加 Giscus 評論，按照Giscus 官方先部署好相關，會給一個相應的配置代碼複製好，然後再在前面新建的組件
Comments.astro中添加如下代碼：
<section class="giscus mx-auto mt-10 w-full"></section>
<script
src="https://giscus.app/client.js"
data-repo="username/repo"
data-repo-id="repo-id"
data-category="Blog Posts Comments"
data-category-id="DIC_kwDOB3LMn84CaXpn"
data-mapping="url"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="en"
data-loading="lazy"
crossorigin="anonymous"
async
</script>
這裡只是給一個示例代碼，實際以 Giscus 給的為準，我這個只是參考一下
2. 添加 Twikoo 評論，也是按 Twikoo 教程部署好相關，然後按以下代碼具體修改
<div id="tcomment"></div>
<script>
document.addEventListener('astro:page-load', () => {
function loadTwikoo() {
const commentsContainer = document.getElementById('tcomment');
if (commentsContainer) {
const script = document.createElement('script');
script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
script.async = true;
script.onload = () => {
const initScript = document.createElement('script');
initScript.innerHTML = `
twikoo.init({
envId: '您的環境id',
el: '#tcomment',
});
`;
document.body.appendChild(initScript);
};
document.body.appendChild(script);
}
}
loadTwikoo();
});
</script>
3. 添加 Artalk 評論可以參照 Twikoo 的，部分修改一下就行
4. 添加 Waline 評論，參照以下代碼
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<div id="waline"></div>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
init({
el: '#waline',
serverURL: 'https://waline.vercel.app',
});
</script>
暫時先想到這 4 個評論，除了 Giscus 和 Waline 是我自己搗鼓的外，另外兩個都是在老麥的指導下搞定的。定義好組件Comments.astro後就可以添加自己想要的評論了，在src/layouts/PostDetails.astro中添加一行代碼就可以了，比如：
//其他代碼……
<Content />
</article>
<Comments /> //添加這一段代碼引用一下我們前面定義的組件
</main>
<Footer />
</Layout>
//其他代碼……
自此，Astro 的評論就搞定了，折騰帶來的樂趣，有時確實無法形容，至於要不要主用 Astro，暫且不說（說不定樂趣過了也就不折騰了）