评论

使用 giscus 实现评论功能。https://giscus.app

完成上面三步骤，即可验证。

安装

pnpm add @giscus/vue

配置

<!-- /components/Comments.vue -->

<template>
  <Giscus
    v-if="showComment"
    :repo="giscusConfig.repo"
    :repo-id="giscusConfig.repo_id"
    :category="giscusConfig.category"
    :category-id="giscusConfig.category_id"
    mapping="title"
    strict="0"
    reactions-enabled="1"
    emit-metadata="0"
    input-position="top"
    theme="light"
    lang="zh-CN"
    loading="lazy"
    crossorigin="anonymous"
    async
  />
</template>

<script lang="ts" setup>
import Giscus from "@giscus/vue";
import { useRoute } from "vitepress";
import { reactive, ref, watch } from "vue";
const route = useRoute();

const giscusConfig = reactive({
  repo: "...", // # 这里就是giscus官方提供的
  repo_id: "...", // # 这里就是giscus官方提供的
  category: "...", // # 这里就是giscus官方提供的
  category_id: "...", // # 这里就是giscus官方提供的
});

const showComment = ref(true);

watch(
  () => route.path,
  () => {
    showComment.value = false;

    setTimeout(() => {
      showComment.value = true;
    }, 200);
  },
  {
    immediate: true,
  }
);
</script>

添加到全局

// https://vitepress.dev/guide/custom-theme
import Theme from "vitepress/theme";
import { h } from "vue";
import Comments from "../components/Comments.vue";

export default {
  extends: Theme,

  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
      "doc-after": () => h(Comments),
    });
  },
};

参考链接

giscus-component vue demo

https://justin3go.com/