如何使用 GitHub 討論作為您部落格的聊天系統

杭州程式設計師張張發表於2022-06-14
Github
如果您有個人部落格，您可能會使用評論系統來管理部落格的討論和評論。如果是這樣，是時候考慮更新您的評論系統了。

在GitHub Discussions(討論區)的幫助下，你可以把你的部落格的評論提升到一個新的水平。在這篇文章中，我將解釋如何將GitHub討論整合到你的部落格中並充分利用它。

什麼是“GitHub 討論”？

GitHub 討論是一個可以在每個 GitHub 倉庫上啟用的論壇。它使開發者能夠輕鬆地討論新功能，從社群獲得反饋，建立投票，釋出公告等。

GitHub討論區是開發者和社群成員的一站式合作場所。

如何使用 GitHub 討論作為聊天系統

為了將GitHub討論整合到你的部落格，我們將使用 giscus。

giscus是一個由GitHub討論支援的評論系統。它可以讓你把倉庫中的討論整合到你的部落格中。

你的讀者可以在你的部落格上留下評論，這些評論會同時出現在你的部落格和你的程式碼庫的討論頁面上。

使用討論區作為你的部落格聊天系統的優勢

  • 它是完全免費的
  • 沒有廣告或跟蹤
  • 它超級強大
  • 你對評論有完全的控制權和完全的修改權。
  • 有很多主題
  • 它是相當可自定義的
  • 你可以在你自己的伺服器上自行託管

請記住，此工具主要適用於開發者部落格，因為大多數開發人員使用 GitHub。

如何在你的部落格中整合giscus

先決條件

  • 一個部落格（你必須能夠獲得原始碼）
  • 一個 GitHub 帳戶
  • 你選擇的程式碼庫必須是公開的

首先，你需要為你的程式碼庫啟用討論功能。

轉到程式碼庫Settings -> 在Features部分下 -> 勾選Discussions框。

接下來，在你的程式碼庫中安裝giscus應用程式。

轉到 https://github.com/apps/giscus，按照提示操作，並僅授予對選定程式碼庫的訪問許可權。

現在是重要的部分：我們需要配置giscus小部件。

首先，進入giscus主頁，滾動到Configuration部分。

選擇您的小部件語言，這是您想要顯示小部件的語言。

=

然後輸入你的程式碼庫名稱和你的使用者名稱，如用username/reponame。

=

對於頁面↔️討論對映，我建議選擇 "討論標題包含頁面URL"。但根據你的需要，選擇最適合你的那一個。

接下來，在你的GitHub 程式碼庫上的討論頁面建立一個類別——比如 "Comments（評論）"——或者選擇現有的類別。

然後根據需要啟用可選功能。

接下來，選擇主題。不要擔心，你可以通過程式設計來切換不同的主題。

最後，複製並貼上生成的程式碼。

Giscus將根據你的設定生成一個指令碼標籤，你可以將其貼上到你的程式碼中。但我們將看到如何使用giscus元件。

如何使用 giscus 元件

如果你的部落格是用React/Vue/Svelte或Web元件構建的，那麼你可以安裝giscus元件。

例如，要在React中整合giscus，請做以下工作：

  • 安裝 giscus 包。

    npm i @giscus/react
or
yarn add $giscus/react

  • 然後在你的元件中匯入 giscus 並使用它。複製我們在上一步得到的屬性，從所有的屬性中刪除 data-，並將屬性轉化為有效的 jsx 屬性。

    import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

對其他框架來說，這基本上是同樣的程式。

總結

在本文中，我們瞭解了將 GitHub 討論用作聊天系統的好處。我們還學習瞭如何在我們的網站中建立和整合 giscus 小部件。

我希望你覺得這很有幫助，確保star了giscus GitHub程式碼庫來支援它們。

相關文章