Systém komentářů využívající diskuze React a GitHub

Úvod

V aplikaci zaměřené na uživatele by uživatelé měli dostat příležitost vyjádřit se. Uživatelé potřebují možnost poskytovat komentáře a zpětnou vazbu k určitým věcem ve vaší aplikaci. Comment System je výkonná funkce, kterou lze přidat do vašich aplikací/webů, ale není příliš jednoduchá na sestavení od začátku.

Naštěstí zavedené služby mohou ve vaší aplikaci zapojit a přehrát nástroj pro komentáře. Například Disqus, Facebook Comments, Cackle a Metype je několik. Další chytrý nástroj s názvem Giscus umožňuje používat funkci Diskuze na GitHubu jako systém komentářů a funguje dobře.

Seznamte se s Giscus

Giscus je systém komentářů s otevřeným zdrojovým kódem, který pod kapotou využívá funkci Diskuze na GitHubu. Je snadné jej nakonfigurovat pomocí několika vlastností, takže uživatelé mohou komentovat, přidávat reakce a vše, co je namapováno na Discussions úložiště GitHub.

Giscus je bez reklam, podporuje motivy, je vysoce přizpůsobitelný a můžete také hostovat svou vlastní instanci. K aktivaci Giscus ve vaší aplikaci potřebujete pouze následující fragment kódu,

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

Nyní se naučíme, jak nastavit a integrovat Giscus v React-based aplikace a přitom porozumíme každému z atributů zmíněných ve výše uvedeném úryvku kódu.

Počáteční nastavení

Nejprve vytvořte úložiště GitHub, které by měl Giscus připojit pro ukládání komentářů a reakcí. Přejděte na Settings kartě úložiště a najděte Discussions možnost pod General nastavení.

Zaškrtněte políčko a klikněte na Set up discussions tlačítko pro spuštění funkce Diskuze. Vytvoří nový Discussions kartu pro vaše úložiště.

Potřebujeme nainstalovat Giscus aplikace ve vašem úložišti GitHub. Přejděte na stránku aplikace Giscus a klikněte na Install tlačítko.

Pokud máte více organizací pro jeden účet GitHub, můžete vybrat organizaci a pokračovat v instalaci.

Nakonec vyberte úložiště, do kterých chcete nástroj Giscus nainstalovat. Případně jej můžete nainstalovat do všech svých úložišť.

Součást React pro Giscus

Giscus má obaly pro React, Vue, Svelte a Web Components. Všechny obaly jsou dostupné v rámci projektu giscus-component. U aplikací React nejprve nainstalujte obal pomocí npm nebo yarn příkaz

npm i @giscus/react

# Or

yarn add @giscus/react

Dále importujte Giscus komponentu z knihovny wrapperu do vaší komponenty,

import Giscus from '@giscus/react';

Nakonec můžete použít Giscus komponentu, jako je tato,

export default function MyApp() {
  // some code
  return (
    <Giscus
      id="comments"
      repo="[ENTER REPO HERE]"
      repoId="[ENTER REPO ID HERE]"
      category="[ENTER CATEGORY NAME HERE]"
      categoryId="[ENTER CATEGORY ID HERE]"
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

Pojďme pochopit každý z těchto atributů definovaných v komponentě Giscus.

  • id :Jedinečný identifikátor. Libovolný alfanumerický řetězec.
  • repo :Název úložiště, do kterého jste nainstalovali aplikaci Giscus a chcete se k němu připojit.
  • repoId :Jedinečný identifikátor vašeho úložiště.
  • category :Název kategorie diskuse, pod kterou musí Giscus vytvářet komentáře.
  • categoryId :ID kategorie diskuse.
  • mapping :Je to mapování mezi stránkou vaší aplikace a diskusí. Hodnoty mohou být path, URL, title, og:title, konkrétní výraz nebo číslo.
  • reactionsEnabled :Pokud je nastaveno na 1 , budete moci přidávat reakce pomocí emotikonů. Nastavení hodnoty 0 nezobrazí možnost reakce.
  • emitMetadata :Pokud je nastaveno na 1 , bude Giscus pravidelně posílat metadata diskuze na stránku vaší aplikace.
  • inputPosition :Na základě nastavené hodnoty můžete pole pro zadání komentáře umístit na začátek nebo konec existujícího seznamu komentářů.
  • theme :Motiv může být světlý, tmavý, s vysokým kontrastem nebo libovolný vlastní motiv.
  • lang :Podporuje více než 15 jazyků. Určete jazyk, ve kterém se bude giskus zobrazovat.
  • loading :Pokud nastavíte hodnotu lazy , načítání komentářů bude zpožděno, dokud se uživatel neposune poblíž kontejneru s komentáři.

Takže jak o nich nyní víme, možná se ptáte, jak získáme informace o těchto třech atributech?

  • repoId :Jedinečný identifikátor vašeho úložiště.
  • category :Název kategorie diskuse, pod kterou musí být komentáře vytvořeny.
  • categoryId :ID kategorie diskuse.

Dobře, pojďme se to naučit.

Jak získat úložiště GitHub a informace o diskuzi

GitHub poskytuje rozhraní GraphQL API k dotazování na tyto podrobnosti. K nalezení těchto podrobností můžete použít GitHub GraphQL Explorer. Abyste mohli tento průzkumník používat, musíte se ověřit pomocí svých přihlašovacích údajů GitHub.

Zkuste následující dotaz načíst ID úložiště, název kategorie diskuse a ID kategorie pro úložiště. Nahraďte prosím <REPOSITORY-NAME> a <GITHUB-USER-NAME> s vaším názvem úložiště a uživatelským jménem.

query { 
  repository(name:"<REPOSITORY-NAME>", owner: "<GITHUB-USER-NAME>"){
   id
    discussionCategories(first:10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

Obdržíte odpověď JSON s ID úložiště (začíná R_ ), ID diskuze (začíná DIC_ ) a jméno. Vyberte jednu kategorii diskuse, kterou chcete použít v konfiguraci Giscus, abyste pod ní vytvořili komentáře. Můžete například vybrat General název a id kategorie. Můžete také vytvořit vlastní kategorii diskuzí na kartě Diskuze na GitHubu a použít ji.

{
  "data": {
    "repository": {
      "id": "R_l4AEGpo4qw",
      "discussionCategories": {
        "edges": [
          {
            "node": {
              "id": "DIC_kwYOGpo4q04DAp3f",
              "name": "Announcements"
            }
          },
          {
            "node": {
              "id": "DIC_kwYOGpo4q04DAp1g",
              "name": "General"
            }
          },
          {
            "node": {
              "id": "DIC_kwYOGpo4q04DApxi",
              "name": "Ideas"
            }
          }
        ]
      }
    }
  }
}

Poznámka:Všechna výše uvedená ID jsou zfalšována, takže se je nepokoušejte použít. Nebudou fungovat.

Systém komentářů – spojte vše dohromady

Nyní tyto hodnoty použijeme v aplikaci React. Je lepší tyto citlivé informace ponechat v proměnné prostředí a nezveřejňovat je. Pokud například používáte create-react-app k vytvoření svého projektu React, můžete je ponechat v .env soubor,

REACT_APP_GISCUS_PROJECT_REPO=react-play
REACT_APP_GISCUS_PROJECT_REPO_ID=R_l4AEGpo4qw
REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID=DIC_kwYOGpo4q04DAp1g
REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME=General

Opět platí, že všechna výše uvedená ID jsou smyšlená nebo s nimi manipulována. Prosím, nepoužívejte je tak, jak jsou. Dále je použijte v komponentě React,

import Giscus from "@giscus/react";

const Comment = () => {
  const projectRepo = process.env.REACT_APP_GISCUS_PROJECT_REPO;
  const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID;
  const discussionCategoryId =
    process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID;
  const discussionCategoryName =
    process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME;

  return (
    <>
      <Giscus
        id="comment-id"
        repo={projectRepo}
        repoId={projectRepoId}
        category={discussionCategoryName}
        categoryId={discussionCategoryId}
        mapping="pathname"
        reactionsEnabled="0"
        emitMetadata="0"
        inputPosition="top"
        theme="light"
        lang="en"
        loading="lazy"
      />
    </>
  );
};

export default Comment;

A je to. Nyní se na stránce vaší aplikace zobrazí widget komentáře.

Chcete-li přidat komentář, musíte se přihlásit pomocí GitHubu.

Jakmile začnete přidávat komentáře, můžete je vidět ve widgetu komentáře.

Tyto komentáře můžete vidět na diskusní stránce vašeho úložiště a v případě potřeby je můžete moderovat/smazat.

To je vše. Doufám, že tyto kroky dobře využijete a integrujete systém komentářů Giscus do vaší aplikace.

Než to zabalím, je čas poděkovat pár lidem. Děkuji Edo, že jsi mi dal vědět o Giscus, když jsem hledal systém komentářů pro integraci s ReactPlay. Děkuji Melvinovi za napsání tohoto článku. Pomohlo mi to dozvědět se o GitHub GraphQL API a o tom, jak získat ID úložiště a kategorií diskuzí. Jste skvělí.

Pojďme se připojit. Sdílím své znalosti,

  • 🌐 Vývoj webu (JavaScript, ReactJS, Next.js, Node.js, atd...)
  • 🛡️ Webová bezpečnost
  • 💼 Kariérní rozvoj
  • 🌱 Opensource
  • ✍️Vytváření obsahu

Pojďme se připojit,

  • Dejte sledovat na Twitteru
  • Přihlaste se k odběru mého kanálu YouTube
  • Vedlejší projekty na GitHubu
  • Komunita Showwcase React