實作 Astro 組件：文章留言版

一篇文章底下，如果有個留言版，可以讓讀者分享他們的看法、提出問題，今天我們將介紹如何在文章底下新增留言版

如圖所示

使用 Utterances 建立留言板

utterances 是一個基於 GitHub Issues 的評論系統，它可以讓使用者使用他們的 GitHub 帳戶來發表評論，且內容會存在 GitHub Issues 裡。

程式碼如下

---
---
<div id="comments"></div>

<script>
  const currentTheme = localStorage.getItem("theme");
  const theme = currentTheme === "light" ? "github-light" : "github-dark";
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://utteranc.es/client.js";
  script.setAttribute("repo", "YOUR_USERNAME/YOUR_REPOSITORY");
  script.setAttribute("issue-term", "pathname");
  script.setAttribute("theme", theme);
  script.setAttribute("crossorigin", "anonymous");
  document.querySelector("#comments")?.appendChild(script);
</script>

在需要嵌入留言版的地方做一個 <div id="comments"></div>

接下來，引入 utterances 腳本，它將負責載入並設置 Utterances 留言板。

有幾點需要注意的

• 將 YOUR_USERNAME/YOUR_REPOSITORY 替換為您的 GitHub 使用者名稱和存儲庫名稱，這樣 Utterances 將知道在哪個存儲庫中創建評論。

• 設定了一個主題 theme 變數，根據當前網站主題（亮暗模式）來選擇 Utterances 的外觀樣式。

---

總結

完成這些步驟後，您的文章將包含一個嵌入的 Utterances 留言板，讓讀者可以輕鬆地分享他們的看法和提出問題。這是一個方便且易於集成的評論系統，讓互動更加豐富。