vuepress2.x集成评论插件

这是官方文档

这是效果

开通Giscus

Giscus是github的一个功能，用了专门存放评论的功能。需要依托一个仓库。

我这里就拿我这个当前vuepress项目开开通。

Settings>Features>Discussions

获取Giscus信息

进入此网站，获取信息

在你的vuepress项目中启用此插件

yarn add -D vuepress-plugin-comment2@next

my-book/docs/.vuepress/config.js

plugins: [
    ...
    commentPlugin({
      provider: "Giscus",
      repo: "dshvv/red-treasure-book",
      repoId: "MDEwOlJlcG9zaXRvcnk0MDcxNDYxODA=",
      category: "Announcements",
      categoryId: "DIC_kwDOGESOxM4CPs5U",
    })
]

配置和应用主题

此插件需要自己全局注册评论组件 。

推荐将评论组件 () 插入在 组件后。

所以我们需要使用一个主题来完成这些（vuepress2 已经不提供暴漏layout组件了，所以只能如此）

创建一个主题

在my-book/docs/.vuepress下创建如下目录结构

.vuepress
 |--index.js
 |--layout
    |--index.vue

index.js

const { path } = require('@vuepress/utils');
const { defaultTheme } = require("@vuepress/theme-default");

module.exports.commentTheme = options => ({
  name: "comment-theme",

  // we are extending @vuepress/theme-default
  extends: defaultTheme(options),

  layouts: {
    // we override the default layout to provide comment service
    Layout: path.resolve(__dirname,"layout", "index.vue"),
  },
});

layout>index.vue

<template>
  <ParentLayout>
    <template #page-bottom>
      <CommentService :darkmode="isDarkMode" />
    </template>
  </ParentLayout>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import ParentLayout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
const isDarkMode = ref(false);
let observer;
onMounted(() => {
  const html = document.querySelector("html") as HTMLElement;
  isDarkMode.value = html.classList.contains("dark");
  // watch theme change
  observer = new MutationObserver(() => {
    isDarkMode.value = html.classList.contains("dark");
  });
  observer.observe(html, {
    attributeFilter: ["class"],
    attributes: true,
  });
});
onBeforeUnmount(() => {
  observer.disconnect();
});
</script>

然后应用主题

在my-book/docs/.vuepress/config.js修改主题属性如下

const { commentPlugin } = require("vuepress-plugin-comment2");
const { commentTheme } = require("./theme");

module.exports = {
  ...
  theme: commentTheme({
    contributorsText: "作者",
    lastUpdatedText: "最后更新",
    sidebar,
    navbar: [
      {
        text: "博客",
        link: "https://www.cnblogs.com/dshvv",
      },
    ],
  }),

  plugins: [
    ...
    commentPlugin({
      provider: "Giscus",
      repo: "dshvv/red-treasure-book",
      repoId: "MDEwOlJlcG9zaXRvcnk0MDcxNDYxODA=",
      category: "Announcements",
      categoryId: "DIC_kwDOGESOxM4CPs5U",
    }),
  ],
};