响应式图片组

基于 giscus 的 vitepress 评论区插件。

https://www.npmjs.com/package/vitepress-plugin-comment-with-giscus
https://github.com/T-miracle/vitepress-plugin-comment-with-giscus

安装

npm

npm install -D vitepress-plugin-comment-with-giscus

yarn

yarn add -D vitepress-plugin-comment-with-giscus

pnpm

pnpm add -D vitepress-plugin-comment-with-giscus

bun

bun add -D vitepress-plugin-comment-with-giscus

配置

Theme Config

// .vitepress/theme/index.ts
import { toRefs } from "vue"; 
import type { Theme } from 'vitepress'; 
import type { Theme, useData, useRoute } from 'vitepress'; 
import DefaultTheme from 'vitepress/theme';

import giscusTalk from 'vitepress-plugin-comment-with-giscus'; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {

    });
  },
  enhanceApp({ app, router, siteData }) {
   
  },
  setup() { 
    const { frontmatter } = toRefs(useData()); 
    const route = useRoute(); 

    const props = { 
      repo: 'wewelove/vitepress', 
      repoId: 'R_kgDONfF6fQ', 
      category: 'Announcements', 
      categoryId: 'DIC_kwDONfF6fc4Ctk7k', 
      mapping: 'pathname', 
      strict: '0', 
      reactionsEnabled: '1', 
      emitMetadata: "0", 
      inputPosition: 'top', 
      lang: 'zh-CN', 
      loading: 'lazy', 
      lightTheme: 'light', 
      darkTheme: 'catppuccin_macchiato', 
      homePageShowComment: false, 
    }; 

    giscusTalk(props, { frontmatter, route }, true); 
  }, 
} satisfies Theme;

使用

如何启用 Giscus 评论系统，如何配置参数？

请参考 Giscus 文档。