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

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

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

什麼是“GitHub 討論”?

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

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

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

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

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

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

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

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

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

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

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

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

先決條件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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程式碼庫來支援它們。