Hur man implementerar giscus med Nuxt 3

Att integrera ett kommentarssystem som skalar och känns modernt är avgörande när man bygger interaktiva webbapplikationer. Nyligen, efter en rekommendation av en fantastisk kollega (kolla in hans arbete), bestämde jag mig för att förbättra mitt Nuxt 3-projekt genom att lägga till giscus, ett GitHub-drivet kommentarssystem som utnyttjar Discussions. I den här artikeln går jag igenom hur du implementerar giscus i Nuxt 3.

Konfigurera miljön

Vi börjar med ett nytt Nuxt 3-projekt. Om du inte redan har ett, skapa ett med hjälp av Nuxt CLI:

npx nuxi@latest init giscus-nuxt3

När projektet är uppsatt installerar vi giscus för Vue:

npm install @giscus/vue

Integrera giscus i ditt Nuxt 3-projekt

För att hålla det organiserat skapar vi en ny Vue-komponent för giscus. Den här komponenten försluter alla giscus-konfigurationsdetaljer.

Innan vi fortsätter behöver du hämta ditt repository's ID och kategoridetaljer tillsammans med eventuella andra konfigurationsalternativ du vill ha. Gå till Giscus och följ dokumentationsstegen där. Deras webbplats kommer att guida dig genom att hämta ditt repo-id och kategori-id, samt anpassa andra inställningar. När du har slutfört inställningen, kopiera webbplatsens utdata och använd den för att ersätta värdena nedan.

<script setup lang="ts">
import Giscus from '@giscus/vue';
</script>

<template>
  <Giscus
    repo="your-github-username/your-repo"
    repo-id="DITT_REPO_ID"
    category="Announcements"
    category-id="DITT_KATEGORI_ID"
    mapping="pathname"
    reactions-enabled="1"
    emit-metadata="0"
    input-position="bottom"
    theme="light"
    lang="sv"
    loading="lazy"
  />
</template>

Ersätt tillfälliga värden med dina faktiska GitHub-repodetaljer och kategorier. Om du är osäker på hur du får dessa värden, se giscus-dokumentationen för mer information.

Arbeta med privata repositories (valfritt)

Om ditt huvudrepo är privat kan du stöta på åtkomstbegränsningar med giscus. En bra lösning är att skapa ett dummy-repo som är offentligt och enbart används för diskussioner. Skapa ett dummy-repo, aktivera Diskussioner i inställningarna och generera dina konfigurationsvärden med det repot på giscus.

Exempel: Dynamiska artiklar med giscus-kommentarer

Om ditt repository är privat kan du stöta på problem med att använda giscus direkt på grund av åtkomstbegränsningar. En bra lösning är att skapa ett dummy-repository som är offentligt och specifikt används för att hysa diskussioner. Här är vad du kan göra:

1. Skapa ett nytt offentligt repository (detta kommer att fungera som ditt dummy-repository).
2. Aktivera Diskussioner i inställningarna för dummy-repositoryt.
3. Följ samma installationsprocess på giscus.app för att generera dina konfigurationsvärden med detta dummy-repository.
4. Använd det genererade repo-id och category-id från dummy-repositoryt i din giscus-komponentkonfiguration.

Denna metod gör det möjligt att använda giscus även om ditt huvudsakliga projekt-repository är privat, vilket säkerställer att kommentarsystemet förblir tillgängligt för dina användare.

Nedan finns ett exempel på en Nuxt-sida där diskussionstråden genereras dynamiskt baserat på artikelns route. I detta exempel använder varje artikel sin route-path som en unik identifierare för sin kommentarstråd.

<script lang="ts" setup>
import Giscus from '@giscus/vue';

const route = useRoute();
</script>

<template>
  <Giscus
    :id="`article-${route.path}-comments`"
    repo="your-github-username/your-dummy-repo"
    repo-id="REPO_ID"
    category="Articles"
    category-id="CATEGORY_ID"
    mapping="specific"
    :term="route.path"
    reactions-enabled="1"
    emit-metadata="0"
    input-position="top"
    theme="light"
    lang="sv"
    loading="lazy"
  />
</template>

I detta exempel använder varje artikel sin route-path som en unik identifierare för sin diskussionstråd. Denna dynamiska metod säkerställer att varje artikel får sin egen kommentarsektion utan någon extra konfiguration.

Registrera komponenten globalt (valfritt)

Om du föredrar att använda giscus-komponenten på flera sidor utan att importera den överallt kan du registrera den globalt. Skapa en plugin-fil inom plugins-katalogen:

import Giscus from '@giscus/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Giscus', Giscus);
});

Denna inställning säkerställer att giscus-komponenten är tillgänglig globalt, vilket förenklar dess användning på vilken sida som helst.

Lägga till giscus på en sida

Nu när komponenten är konfigurerad är det enkelt att integrera den på en sida. Till exempel i din sidkomponent:

<script setup lang="ts">
// Ingen import av Giscus behövs om den har registrerats globalt.
</script>

<template>
  <section>
    <h1>Welcome to My Nuxt 3 Project</h1>
    <p>This is an example page demonstrating giscus integration.</p>
    <Giscus />
  </section>
</template>

<style scoped>
section {
  padding: 2rem;
}
</style>

Och det var allt! Du har nu integrerat giscus i ditt Nuxt 3-projekt. Kommentarsystemet bör nu vara synligt på sidan.

Slutliga tankar

Att integrera giscus i denna bloggapp var en smidig process. Kombinationen av Vue 3:s Composition API och Nuxt 3:s modularitet gjorde det enkelt att lägga till ett modernt kommentarsystem drivet av GitHub Discussions. Flexibiliteten i konfigurationen innebär att du alltid kan justera inställningarna för att passa ditt projekts behov.

Jag hoppas att denna guide hjälper dig att skapa en dynamisk kommentarsupplevelse i dina egna projekt.

Lycka till med kodandet,

Philip! 🚀