vitepress 开启评论功能

准备工作

1. github 创建一个公开仓库

否则访客无法查看 discussion

2. 安装 giscus app 地址

可单独为新建的仓库安装

3. ** **

---

项目配置

此时，已经有一个 vitepress 项目

1. 安装插件

yarn add vitepress-plugin-comment-with-giscus

2. 进行插件配置 路径下的

插件配置参数

giscus 配置参数

import DefaultTheme from "vitepress/theme";
import giscusTalk from "vitepress-plugin-comment-with-giscus";
import { useData, useRoute } from "vitepress";
import { toRefs } from "vue";

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    DefaultTheme.enhanceApp(ctx);
    // ...
  },
  setup() {
    // 获取前言和路由
    const { frontmatter } = toRefs(useData());
    const route = useRoute();

    // 评论组件 - https://giscus.app/
    giscusTalk(
      {
        repo: "你的仓库地址",
        repoId: "你的仓库id",
        category: "你选择的分类", // 默认: `General`
        categoryId: "你的分类id",
        mapping: "pathname", // 默认: `pathname`
        inputPosition: "top", // 默认: `top`
        lang: "zh-CN", // 默认: `zh-CN`
        // i18n 国际化设置（注意：该配置会覆盖 lang 设置的默认语言）
        // 配置为一个对象，里面为键值对组：
        // [你的 i18n 配置名称]: [对应 Giscus 中的语言包名称]
        locales: {
          "zh-Hans": "zh-CN",
          "en-US": "en",
        },
        homePageShowComment: false, // 首页是否显示评论区，默认为否
        lightTheme: "light", // 默认: `light`
        darkTheme: "transparent_dark", // 默认: `transparent_dark`
        // ...
      },
      {
        frontmatter,
        route,
      },
      // 是否全部页面启动评论区。
      // 默认为 true，表示启用，此参数可忽略；
      // 如果为 false，表示不启用。
      // 可以在页面使用 `comment: true` 前言单独启用
      true
    );
  },
};

3. 在页面中使用

在文章.md 文件中，进行配置

---
comment: true
---

---

站点链接：

giscus: https://giscus.app/zh-CN

插件 github: https://github.com/T-miracle/vitepress-plugin-comment-with-giscus/blob/main/README_zh.md