日本語

繁體中文
English

日本語

繁體中文
English

Appearance

Giscus ​

AI生成の要約

この記事では、VitePressでGiscusコメントシステムを有効にして設定する方法を紹介します。手順には、GitHubでDiscussions機能を有効にすること、giscus GitHub Appをインストールすること、giscus.appで設定を行うこと、Giscus Vueコンポーネントをインストールすること、GiscusComment.vueコンポーネントを設定すること、そして自動インターフェース言語切り替えを実現するためにVitePressテーマに追加することが含まれます。

Giscusを有効にする ​

Discussions機能を有効にする ​

まず、GitHubの設定でDiscussions機能を有効にします

(Repository Page) > Settings > General > Features > Discussions

github settings

Giscus Appを設定する ​

giscus GitHub Appをインストールし、リポジトリに対してgiscusを認可します

giscus GitHub App

次に、giscus.appにアクセスして初期設定を行います

repository:セクションにリポジトリ名を入力します

以下のようなものが表示されるので、これをコピーします:

html
<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-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

これを今すぐコピーする必要はありません。後でrepo-idとcategory-idだけが必要になります。

VitePressに統合する ​

Giscusコンポーネントを追加する ​

まず、Giscus Vueコンポーネントをインストールします

bash
npm i -S @giscus/vue

docs/.vitepress/components/GiscusComment.vueを追加します

リポジトリ名をrepoに、上記のスクリプトからrepo-idとcategory-idを入力します

vue
<script lang="ts" setup>
import Giscus from "@giscus/vue"
import { useData, useRoute } from "vitepress"

const route = useRoute()
const { isDark } = useData()
</script>

<template>
  <div :class="$style.giscus">
    <Giscus
      :key="route.path"
      repo="[ENTER REPO HERE]"
      repo-id="[ENTER REPO ID HERE]"
      category="General"
      category-id="[ENTER CATEGORY ID HERE]"
      mapping="pathname"
      term="Welcome to giscus"
      strict="0"
      reactions-enabled="1"
      emit-metadata="0"
      input-position="top"
      :theme="isDark ? 'dark' : 'light'"
      lang="en"
      loading="lazy"
    />
  </div>
</template>

<style lang="css" module>
.giscus {
  margin-top: 2rem;
}
</style>

VitePressにコンポーネントを追加する ​

docs/.vitepress/theme/index.tsに追加します:

typescript
import GiscusComment from "../components/GiscusComment.vue"
// ...
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      "doc-after": () => h(GiscusComment), 
    })
  },
  // ...
} satisfies Theme

成功です！コメントを残してみてください

giscus success

インターフェース言語の自動切り替え ​

しかし、私のサイトは複数の言語をサポートしているため、giscusのインターフェースもそれに応じて変更できると良いでしょう

以下の行を追加します:

vue
<script lang="ts" setup>
import Giscus from "@giscus/vue"
import { useData, useRoute } from "vitepress"
import { computed } from "vue"

const route = useRoute()
const { isDark } = useData() 
const { isDark, lang } = useData() 
const displayLang = computed(() => { 
  if (lang.value === "en-US") 
    return "en"
  if (lang.value === "ja-JP") 
    return "ja"
  return "zh-TW"
}) 
</script>

<template>
  <div :class="$style.giscus">
    <Giscus
      :key="route.path"
      repo="[ENTER REPO HERE]"
      repo-id="[ENTER REPO ID HERE]"
      category="General"
      category-id="[ENTER CATEGORY ID HERE]"
      mapping="pathname"
      term="Welcome to giscus"
      strict="0"
      reactions-enabled="1"
      emit-metadata="0"
      input-position="top"
      :theme="isDark ? 'dark' : 'light'"
      :lang="displayLang" # use variable
      loading="lazy"
    />
  </div>
</template>

<style lang="css" module>
.giscus {
  margin-top: 2rem;
}
</style>

References ​