├── docs ├── Test.md ├── zh │ └── index.md ├── index.md └── .vitepress │ ├── en.ts │ ├── config.ts │ ├── theme │ └── index.ts │ └── zh.ts ├── demo.png ├── .gitignore ├── tsconfig.json ├── lib ├── giscus.d.ts ├── giscus.js └── giscus.ts ├── package.json ├── README_zh.md └── README.md /docs/Test.md: -------------------------------------------------------------------------------- 1 | # Index 2 | 3 | Test 4 | -------------------------------------------------------------------------------- /docs/zh/index.md: -------------------------------------------------------------------------------- 1 | # 多语言测试-中文 2 | 3 | 这是一个中文文档 4 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-miracle/vitepress-plugin-comment-with-giscus/HEAD/demo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # 忽略的文件夹 2 | .idea 3 | node_modules 4 | dist 5 | tsconfig.tsbuildinfo* 6 | package-lock.json 7 | **/cache 8 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | comment: true 3 | --- 4 | 5 | # multilingual test - English 6 | 7 | This is an English document 8 | -------------------------------------------------------------------------------- /docs/.vitepress/en.ts: -------------------------------------------------------------------------------- 1 | import { createRequire } from 'module' 2 | import { defineConfig, type DefaultTheme } from 'vitepress' 3 | 4 | export const en = defineConfig({ 5 | lang: 'en-US', 6 | description: 'Vite & Vue powered static site generator.', 7 | 8 | themeConfig: { 9 | sidebar: [ 10 | { text: 'English Demo', link: '/index.md' }, 11 | ], 12 | 13 | footer: { 14 | message: 'Released under the MIT License.', 15 | copyright: 'Copyright © 2019-present Evan You' 16 | } 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitepress'; 2 | import { en } from './en' 3 | import { zh } from './zh' 4 | 5 | export default defineConfig({ 6 | appearance: true, 7 | markdown: { 8 | theme: 'monokai' 9 | }, 10 | // 主题配置 11 | /* themeConfig: { 12 | // 左侧栏目录配置 13 | sidebar: [ 14 | {text: 'index', link : '/index.md'}, 15 | {text: 'Test', link : '/Test.md'}, 16 | ] 17 | } */ 18 | locales: { 19 | root: { label: 'English', ...en }, 20 | zh: { label: '简体中文', ...zh }, 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "jsx": "preserve", 6 | "module": "ESNext", 7 | "strict": true, 8 | "esModuleInterop": true, 9 | "moduleResolution": "node", 10 | "lib": [ 11 | "ESNext", 12 | "DOM" 13 | ], 14 | "noImplicitAny": true, 15 | "skipLibCheck": true, 16 | "declaration": true, 17 | "incremental": false, 18 | "emitDeclarationOnly": false, 19 | "outDir": "./lib", 20 | "declarationDir": "./lib" 21 | }, 22 | "include": [ 23 | "lib/*.ts" 24 | ], 25 | "exclude": [ 26 | "node_modules" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /lib/giscus.d.ts: -------------------------------------------------------------------------------- 1 | import { AvailableLanguage } from '@giscus/vue'; 2 | import { Ref } from 'vue'; 3 | import { PageData, Route } from 'vitepress'; 4 | import { GiscusProps } from '@giscus/vue/dist/types'; 5 | type vitepressAPI = { 6 | frontmatter: Ref; 7 | route: Route; 8 | }; 9 | type GiscusPropsType = GiscusProps & { 10 | lightTheme?: string; 11 | darkTheme?: string; 12 | lang?: AvailableLanguage; 13 | locales?: Record; 14 | homePageShowComment?: boolean; 15 | }; 16 | /** 17 | * initialize comment area 18 | *
初始化评论区 19 | * @param props giscus setting (giscus 配置) 20 | * @param vitepressObj frontmatter & routing (前言 & 路由) 21 | * @param defaultEnable default enable comment area (默认启用评论区) 22 | */ 23 | declare const giscusTalk: (props: GiscusPropsType, vitepressObj: vitepressAPI, defaultEnable?: boolean) => void; 24 | export default giscusTalk; 25 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme'; 2 | import { EnhanceAppContext, useData, useRoute } from 'vitepress'; 3 | import { toRefs } from "vue"; 4 | import giscusTalk from '../../../lib/giscus'; 5 | 6 | export default { 7 | ...DefaultTheme, 8 | enhanceApp(ctx: EnhanceAppContext) { 9 | DefaultTheme.enhanceApp(ctx); 10 | }, 11 | setup() { 12 | // 获取前言和路由 13 | const { frontmatter } = toRefs(useData()); 14 | const route = useRoute(); 15 | giscusTalk({ 16 | repo: 'T-miracle/blog', 17 | repoId: 'R_kgDOJCf-FQ', 18 | categoryId: 'DIC_kwDOJCf-Fc4CUohc', 19 | mapping: 'pathname', 20 | locales: { 21 | 'zh-Hans': 'zh-CN', 22 | 'en-US': 'en' 23 | }, 24 | homePageShowComment: true, 25 | // darkTheme: 'dark_dimmed', 26 | // lightTheme: 'noborder_light' 27 | }, { 28 | frontmatter, route 29 | }); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /docs/.vitepress/zh.ts: -------------------------------------------------------------------------------- 1 | import { createRequire } from 'module' 2 | import { defineConfig, type DefaultTheme } from 'vitepress' 3 | 4 | export const zh = defineConfig({ 5 | lang: 'zh-Hans', 6 | description: '由 Vite 和 Vue 驱动的静态站点生成器', 7 | 8 | themeConfig: { 9 | sidebar: [ 10 | { text: '中文示例', link: '/zh/index.md' }, 11 | ], 12 | 13 | footer: { 14 | message: '基于 MIT 许可发布', 15 | copyright: `版权所有 © 2019-${new Date().getFullYear()} 尤雨溪` 16 | }, 17 | 18 | docFooter: { 19 | prev: '上一页', 20 | next: '下一页' 21 | }, 22 | 23 | outline: { 24 | label: '页面导航' 25 | }, 26 | 27 | lastUpdated: { 28 | text: '最后更新于', 29 | formatOptions: { 30 | dateStyle: 'short', 31 | timeStyle: 'medium' 32 | } 33 | }, 34 | 35 | langMenuLabel: '多语言', 36 | returnToTopLabel: '回到顶部', 37 | sidebarMenuLabel: '菜单', 38 | darkModeSwitchLabel: '主题', 39 | lightModeSwitchTitle: '切换到浅色模式', 40 | darkModeSwitchTitle: '切换到深色模式' 41 | } 42 | }) 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vitepress-plugin-comment-with-giscus", 3 | "version": "1.1.15", 4 | "description": "vitepress comment plugin based on giscus", 5 | "type": "module", 6 | "main": "./lib/giscus.js", 7 | "types": "./lib/giscus.d.ts", 8 | "scripts": { 9 | "run": "vitepress dev docs", 10 | "build": "vitepress build docs" 11 | }, 12 | "files": [ 13 | "dist", 14 | "lib" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/T-miracle/vitepress-plugin-comment-with-giscus.git" 19 | }, 20 | "keywords": [ 21 | "giscus", 22 | "comment", 23 | "discuss", 24 | "vitepress" 25 | ], 26 | "author": "Tmiracle", 27 | "license": "ISC", 28 | "bugs": { 29 | "url": "https://github.com/T-miracle/vitepress-plugin-comment-with-giscus/issues" 30 | }, 31 | "homepage": "https://github.com/T-miracle/vitepress-plugin-comment-with-giscus#readme", 32 | "dependencies": { 33 | "@giscus/vue": "^2.2.8" 34 | }, 35 | "devDependencies": { 36 | "@babel/types": "^7.21.3", 37 | "@types/node": "^18.15.10", 38 | "@vitejs/plugin-vue": "^4.1.0", 39 | "typescript": "^5.0.2", 40 | "vite": "^4.2.1", 41 | "vue-tsc": "^1.2.0", 42 | "vitepress": "^1.0.0-alpha.62", 43 | "vue": "^3.2.47" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | # vitepress-plugin-comment-with-giscus 2 | 3 | [![npm](https://img.shields.io/npm/v/vitepress-plugin-comment-with-giscus?color=green&style=flat)](https://www.npmjs.com/package/vitepress-plugin-comment-with-giscus) 4 | 5 | ![](demo.png) 6 | 7 | > 基于 `giscus` 的 `vitepress` 评论区插件 8 | 9 | ## 安装 10 | 11 | ```shell 12 | // npm 13 | npm i vitepress-plugin-comment-with-giscus 14 | // yarn 15 | yarn add vitepress-plugin-comment-with-giscus 16 | ``` 17 | 18 | ## 用法 19 | 20 | 在 `.vitepress/theme` 路径下的 `index` 文件里 21 | 22 | ```ts 23 | import DefaultTheme from 'vitepress/theme'; 24 | import giscusTalk from 'vitepress-plugin-comment-with-giscus'; 25 | import { useData, useRoute } from 'vitepress'; 26 | import { toRefs } from "vue"; 27 | 28 | export default { 29 | ...DefaultTheme, 30 | enhanceApp(ctx) { 31 | DefaultTheme.enhanceApp(ctx); 32 | // ... 33 | }, 34 | setup() { 35 | // 获取前言和路由 36 | const { frontmatter } = toRefs(useData()); 37 | const route = useRoute(); 38 | 39 | // 评论组件 - https://giscus.app/ 40 | giscusTalk({ 41 | repo: '你的仓库地址', 42 | repoId: '你的仓库id', 43 | category: '你选择的分类', // 默认: `General` 44 | categoryId: '你的分类id', 45 | mapping: 'pathname', // 默认: `pathname` 46 | inputPosition: 'top', // 默认: `top` 47 | lang: 'zh-CN', // 默认: `zh-CN` 48 | // i18n 国际化设置（注意：该配置会覆盖 lang 设置的默认语言） 49 | // 配置为一个对象，里面为键值对组： 50 | // [你的 i18n 配置名称]: [对应 Giscus 中的语言包名称] 51 | locales: { 52 | 'zh-Hans': 'zh-CN', 53 | 'en-US': 'en' 54 | }, 55 | homePageShowComment: false, // 首页是否显示评论区，默认为否 56 | lightTheme: 'light', // 默认: `light` 57 | darkTheme: 'transparent_dark', // 默认: `transparent_dark` 58 | // ... 59 | }, { 60 | frontmatter, route 61 | }, 62 | // 是否全部页面启动评论区。 63 | // 默认为 true，表示启用，此参数可忽略； 64 | // 如果为 false，表示不启用。 65 | // 可以在页面使用 `comment: true` 前言单独启用 66 | true 67 | ); 68 | } 69 | }; 70 | ``` 71 | 72 | `giscus` 的参数获取方式请看：[giscus配置获取](https://giscus.app/) 73 | 74 | [点击查看目前支持的语言列表](https://github.com/giscus/giscus/blob/main/lib/i18n.tsx#L45) 75 | 76 | ## 扩展使用 77 | 78 | 当配置选项默认启用评论区时，添加以下代码，则不会生成评论区 79 | 80 | ```md 81 | --- 82 | comment: false 83 | --- 84 | ``` 85 | 86 | 当配置选项默认不启用评论区时，您仍可以通过以下代码在当前页面启用评论区 87 | 88 | ```md 89 | --- 90 | comment: true 91 | --- 92 | ``` 93 | 94 | ## 更新日志 95 | 96 |
97 | 更新日志 98 |
    99 |
  • 100 |

    v1.1.15

    101 |

    新增国际化 i18n

    102 |
    • 103 |
  • 104 |

    v1.1.10

    105 |

    现在可自定义白天/夜间主题

    106 |
    • 107 |
  • 108 |

    v1.1.9

    109 |

    现在可以设置是否默认全局启用配置

    110 |
    • 111 |
112 |
113 | 114 | ## 更多vitepress插件 115 | 116 | 这些插件你可能会感兴趣：[点我查看更多vitepress插件](https://github.com/T-miracle/vitepress-plugins) 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vitepress-plugin-comment-with-giscus 2 | 3 | [![npm](https://img.shields.io/npm/v/vitepress-plugin-comment-with-giscus?color=green&style=flat)](https://www.npmjs.com/package/vitepress-plugin-comment-with-giscus) 4 | 5 | EN | [中文文档](README_zh.md) 6 | 7 | ![](demo.png) 8 | 9 | > `vitepress` comment section plugin based on `giscus` 10 | 11 | ## Install 12 | 13 | ```shell 14 | // npm 15 | npm i vitepress-plugin-comment-with-giscus 16 | // yarn 17 | yarn add vitepress-plugin-comment-with-giscus 18 | ``` 19 | 20 | ## Usage 21 | 22 | In the `index` file under the `.vitepress/theme` path 23 | 24 | ```ts 25 | import DefaultTheme from 'vitepress/theme'; 26 | import giscusTalk from 'vitepress-plugin-comment-with-giscus'; 27 | import { useData, useRoute } from 'vitepress'; 28 | import { toRefs } from "vue"; 29 | 30 | export default { 31 | ...DefaultTheme, 32 | enhanceApp(ctx) { 33 | DefaultTheme.enhanceApp(ctx); 34 | // ... 35 | }, 36 | setup() { 37 | // Get frontmatter and route 38 | const { frontmatter } = toRefs(useData()); 39 | const route = useRoute(); 40 | 41 | // Obtain configuration from: https://giscus.app/ 42 | giscusTalk({ 43 | repo: 'your github repository', 44 | repoId: 'your repository id', 45 | category: 'your category', // default: `General` 46 | categoryId: 'your category id', 47 | mapping: 'pathname', // default: `pathname` 48 | inputPosition: 'top', // default: `top` 49 | lang: 'en', // default: `zh-CN` 50 | // i18n setting (Note: This configuration will override the default language set by lang) 51 | // Configured as an object with key-value pairs inside: 52 | // [your i18n configuration name]: [corresponds to the language pack name in Giscus] 53 | locales: { 54 | 'zh-Hans': 'zh-CN', 55 | 'en-US': 'en' 56 | }, 57 | homePageShowComment: false, // Whether to display the comment area on the homepage, the default is false 58 | lightTheme: 'light', // default: `light` 59 | darkTheme: 'transparent_dark', // default: `transparent_dark` 60 | // ... 61 | }, { 62 | frontmatter, route 63 | }, 64 | // Whether to activate the comment area on all pages. 65 | // The default is true, which means enabled, this parameter can be ignored; 66 | // If it is false, it means it is not enabled. 67 | // You can use `comment: true` preface to enable it separately on the page. 68 | true 69 | ); 70 | } 71 | }; 72 | ``` 73 | 74 | For the parameter acquisition method of `giscus`, please refer to：[giscus configuration](https://giscus.app/) 75 | 76 | [Click to see the list of currently supported languages](https://github.com/giscus/giscus/blob/main/lib/i18n.tsx#L45) 77 | 78 | ## Extended 79 | 80 | When the configuration option enables the comment area by default, add the following code, the comment area will not be generated 81 | 82 | ```md 83 | --- 84 | comment: false 85 | --- 86 | ``` 87 | 88 | When the configuration options do not enable the comment area by default, you can still enable the comment area on the current page through the following code 89 | 90 | ```md 91 | --- 92 | comment: true 93 | --- 94 | ``` 95 | 96 | ## change log 97 | 98 |
99 | change log 100 |
    101 |
  • 102 |

    v1.1.15

    103 |

    new i18n setting

    104 |
    • 105 |
  • 106 |

    v1.1.10

    107 |

    Now customizable day/night themes

    108 |
    • 109 |
  • 110 |

    v1.1.9

    111 |

    You can now set whether to enable configuration globally by default

    112 |
    • 113 |
114 |
115 | 116 | ## more vitepress plugins 117 | 118 | You may be interested in these plugins： 119 | [Click me to view more vitepress plugins](https://github.com/T-miracle/vitepress-plugins) 120 | -------------------------------------------------------------------------------- /lib/giscus.js: -------------------------------------------------------------------------------- 1 | import giscus from '@giscus/vue'; 2 | import { createApp, h, nextTick, onMounted, watch } from 'vue'; 3 | /** 4 | * add comment container 5 | *
添加评论容器 6 | * @param props giscus setting (配置) 7 | * @param frontmatter frontmatter (前言) 8 | * @param defaultEnable default enable comment area (默认启用评论区) 9 | */ 10 | const setGiscus = (props, frontmatter, defaultEnable = true) => { 11 | const defaultProps = { 12 | id: 'comment', 13 | host: 'https://giscus.app', 14 | category: 'General', 15 | mapping: 'pathname', 16 | term: 'Welcome to giscus!', 17 | reactionsEnabled: '1', 18 | inputPosition: 'top', 19 | lang: 'zh-CN', 20 | loading: 'lazy', 21 | repo: 'xxx/xxx', 22 | repoId: '', 23 | homePageShowComment: false 24 | }; 25 | // console.log('locales --> ', props.locales); 26 | // Set the default language 27 | // 设置默认语言 28 | if (props.locales) { 29 | const element = document.querySelector('html'); 30 | const lang = element.getAttribute('lang'); 31 | // console.log('lang --> ', lang); 32 | if (lang && props.locales[lang]) { 33 | props.lang = props.locales[lang]; 34 | } 35 | } 36 | const lightTheme = props.lightTheme || 'light'; 37 | const darkTheme = props.darkTheme || 'transparent_dark'; 38 | // Delete the original comment container 39 | // 删除原有评论容器 40 | let oldCommentContainer = document.getElementById('giscus'); 41 | if (oldCommentContainer) { 42 | oldCommentContainer.parentNode.removeChild(oldCommentContainer); 43 | } 44 | if (frontmatter?.value.comment !== undefined) { 45 | // If comment is false, comments are not loaded 46 | // 如果 comment 为 false，则不加载评论 47 | if (!Boolean(frontmatter?.value.comment)) { 48 | return; 49 | } 50 | } 51 | else { 52 | if (!defaultEnable) { 53 | return; 54 | } 55 | } 56 | // Whether to display comments on the homepage 57 | // 首页是否显示评论 58 | if (!props.homePageShowComment && (!location.pathname || location.pathname === '/')) { 59 | return; 60 | } 61 | const isDark = document.querySelector('html')?.className.indexOf('dark') !== -1; 62 | // Get the parent container and create a comment container 63 | // 获取父容器，并创建评论容器 64 | const docContent = document.getElementsByClassName('content-container')[0]; 65 | if (docContent) { 66 | const bindGiscus = document.createElement('div'); 67 | // Set the attribute and style of the comment container 68 | // 设置评论容器的属性及样式 69 | bindGiscus.setAttribute('id', 'giscus'); 70 | bindGiscus.style.height = 'auto'; 71 | bindGiscus.style.marginTop = '40px'; 72 | bindGiscus.style.borderTop = '1px solid var(--vp-c-divider)'; 73 | bindGiscus.style.paddingTop = '20px'; 74 | // Add comment container 75 | // 添加评论容器 76 | docContent.append(bindGiscus); 77 | // Use vue to dynamically create comment components and bind them to the corresponding elements 78 | // 使用vue动态创建评论组件并绑定到相应元素上 79 | createApp({ 80 | render: () => { 81 | return h(giscus, { ...defaultProps, theme: isDark ? darkTheme : lightTheme, ...props }); 82 | } 83 | }).mount('#giscus'); 84 | } 85 | }; 86 | /** 87 | * Listen to the page theme and change the theme of the comment container 88 | *
监听页面主题，更改评论容器的主题 89 | */ 90 | const setThemeWatch = (props) => { 91 | const element = document.querySelector('html'); 92 | const lightTheme = props.lightTheme || 'light'; 93 | const darkTheme = props.darkTheme || 'transparent_dark'; 94 | const observer = new MutationObserver(mutations => { 95 | mutations.forEach(mutation => { 96 | if (mutation.type == 'attributes') { 97 | let comment = document.getElementById('comment'); 98 | comment?.setAttribute('theme', element.className.indexOf('dark') !== -1 ? darkTheme : lightTheme); 99 | } 100 | }); 101 | }); 102 | observer.observe(element, { 103 | attributeFilter: ['class'] 104 | }); 105 | }; 106 | /** 107 | * initialize comment area 108 | *
初始化评论区 109 | * @param props giscus setting (giscus 配置) 110 | * @param vitepressObj frontmatter & routing (前言 & 路由) 111 | * @param defaultEnable default enable comment area (默认启用评论区) 112 | */ 113 | const giscusTalk = (props, vitepressObj, defaultEnable = true) => { 114 | onMounted(() => { 115 | setGiscus(props, vitepressObj.frontmatter, defaultEnable); 116 | setThemeWatch(props); 117 | }); 118 | watch(() => vitepressObj.route.path, () => nextTick(() => { 119 | setGiscus(props, vitepressObj.frontmatter, defaultEnable); 120 | })); 121 | }; 122 | export default giscusTalk; 123 | -------------------------------------------------------------------------------- /lib/giscus.ts: -------------------------------------------------------------------------------- 1 | import giscus, { AvailableLanguage } from '@giscus/vue'; 2 | import { Component, createApp, h, nextTick, onMounted, Ref, watch } from 'vue'; 3 | import { PageData, Route } from 'vitepress'; 4 | import { GiscusProps } from '@giscus/vue/dist/types'; 5 | 6 | type vitepressAPI = { 7 | frontmatter: Ref, 8 | route: Route 9 | } 10 | 11 | type GiscusPropsType = GiscusProps & { 12 | lightTheme?: string, 13 | darkTheme?: string, 14 | lang?: AvailableLanguage, 15 | locales?: Record, 16 | homePageShowComment?: boolean 17 | } 18 | 19 | /** 20 | * add comment container 21 | *
添加评论容器 22 | * @param props giscus setting (配置) 23 | * @param frontmatter frontmatter (前言) 24 | * @param defaultEnable default enable comment area (默认启用评论区) 25 | */ 26 | const setGiscus = (props: GiscusPropsType, frontmatter?: Ref, defaultEnable: boolean = true) => { 27 | const defaultProps: GiscusPropsType = { 28 | id: 'comment', 29 | host: 'https://giscus.app', 30 | category: 'General', 31 | mapping: 'pathname', 32 | term: 'Welcome to giscus!', 33 | reactionsEnabled: '1', 34 | inputPosition: 'top', 35 | lang: 'zh-CN', 36 | loading: 'lazy', 37 | repo: 'xxx/xxx', 38 | repoId: '', 39 | homePageShowComment: false 40 | }; 41 | 42 | // console.log('locales --> ', props.locales); 43 | 44 | // Set the default language 45 | // 设置默认语言 46 | if (props.locales) { 47 | const element: HTMLElement | Node | null = document.querySelector('html'); 48 | const lang = (element as HTMLElement).getAttribute('lang'); 49 | // console.log('lang --> ', lang); 50 | if (lang && props.locales[lang]) { 51 | props.lang = props.locales[lang]; 52 | } 53 | } 54 | 55 | const lightTheme = props.lightTheme || 'light'; 56 | const darkTheme = props.darkTheme || 'transparent_dark'; 57 | // Delete the original comment container 58 | // 删除原有评论容器 59 | let oldCommentContainer = document.getElementById('giscus'); 60 | if (oldCommentContainer) { 61 | oldCommentContainer.parentNode!.removeChild(oldCommentContainer); 62 | } 63 | if (frontmatter?.value.comment !== undefined) { 64 | // If comment is false, comments are not loaded 65 | // 如果 comment 为 false，则不加载评论 66 | if (!Boolean(frontmatter?.value.comment)) { 67 | return; 68 | } 69 | } else { 70 | if (!defaultEnable) { 71 | return; 72 | } 73 | } 74 | // Whether to display comments on the homepage 75 | // 首页是否显示评论 76 | if (!props.homePageShowComment &&(!location.pathname || location.pathname === '/')) { 77 | return; 78 | } 79 | const isDark:boolean = document.querySelector('html')?.className.indexOf('dark') !== -1; 80 | // Get the parent container and create a comment container 81 | // 获取父容器，并创建评论容器 82 | const docContent = document.getElementsByClassName('content-container')[0]; 83 | if (docContent) { 84 | const bindGiscus = document.createElement('div'); 85 | // Set the attribute and style of the comment container 86 | // 设置评论容器的属性及样式 87 | bindGiscus.setAttribute('id', 'giscus'); 88 | bindGiscus.style.height = 'auto'; 89 | bindGiscus.style.marginTop = '40px'; 90 | bindGiscus.style.borderTop = '1px solid var(--vp-c-divider)'; 91 | bindGiscus.style.paddingTop = '20px'; 92 | // Add comment container 93 | // 添加评论容器 94 | docContent.append(bindGiscus); 95 | // Use vue to dynamically create comment components and bind them to the corresponding elements 96 | // 使用vue动态创建评论组件并绑定到相应元素上 97 | createApp({ 98 | render: () => { 99 | return h( 100 | (giscus as Component), { ...defaultProps, theme: isDark ? darkTheme : lightTheme, ...props } 101 | ); 102 | } 103 | }).mount('#giscus'); 104 | } 105 | }; 106 | 107 | /** 108 | * Listen to the page theme and change the theme of the comment container 109 | *
监听页面主题，更改评论容器的主题 110 | */ 111 | const setThemeWatch = (props: GiscusPropsType) => { 112 | const element: HTMLElement | Node | null = document.querySelector('html'); 113 | const lightTheme = props.lightTheme || 'light'; 114 | const darkTheme = props.darkTheme || 'transparent_dark'; 115 | const observer = new MutationObserver(mutations => { 116 | mutations.forEach(mutation => { 117 | if (mutation.type == 'attributes') { 118 | let comment: Element | null = document.getElementById('comment'); 119 | comment?.setAttribute('theme', (element! as HTMLElement).className.indexOf('dark') !== -1 ? darkTheme : lightTheme); 120 | } 121 | }); 122 | }); 123 | observer.observe((element as Node), { 124 | attributeFilter: [ 'class' ] 125 | }); 126 | }; 127 | 128 | /** 129 | * initialize comment area 130 | *
初始化评论区 131 | * @param props giscus setting (giscus 配置) 132 | * @param vitepressObj frontmatter & routing (前言 & 路由) 133 | * @param defaultEnable default enable comment area (默认启用评论区) 134 | */ 135 | const giscusTalk = (props: GiscusPropsType, vitepressObj: vitepressAPI, defaultEnable: boolean = true) => { 136 | onMounted(() => { 137 | setGiscus(props, vitepressObj.frontmatter, defaultEnable); 138 | setThemeWatch(props); 139 | }); 140 | watch(() => vitepressObj.route.path, () => nextTick(() => { 141 | setGiscus(props, vitepressObj.frontmatter, defaultEnable); 142 | })); 143 | }; 144 | 145 | export default giscusTalk; 146 | --------------------------------------------------------------------------------