Brandon
Giscus 评论插件
Vitepress 安装 Giscus 评论插件 1.0
新建 Comment.vue 文件
/doc/.vitepress/theme/ 下新建。
vue
<template>
<div class="comment">
<component
v-if="isDark"
:is="'script'"
src="https://giscus.app/client.js"
data-repo="[在此输入仓库]"
data-repo-id="[在此输入仓库 ID]"
data-category="[在此输入分类名]"
data-category-id="[在此输入分类 ID]"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="dark"
data-lang="zh-CN"
crossorigin="anonymous"
data-loading="eager"
async
>
</component>
<component
v-else
:is="'script'"
src="https://giscus.app/client.js"
data-repo="[在此输入仓库]"
data-repo-id="[在此输入仓库 ID]"
data-category="[在此输入分类名]"
data-category-id="[在此输入分类 ID]"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="light"
data-lang="zh-CN"
crossorigin="anonymous"
data-loading="eager"
async
>
</component>
</div>
</template>
<script setup>
import { useData } from 'vitepress';
// 获取当前配色方案
const { isDark } = useData();
</script>
<style scoped>
.comment {
margin-top: 16px;
}
</style>挂载到文档中
/doc/.vitepress/theme/ 下新建 index.js。
js
import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
// 导入刚才创建好的组件
import Comment from './Comment.vue';
export default {
...DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
'doc-after': () => h(Comment),
});
},
};Vitepress 安装 Giscus 评论插件 2.0
解决评论与页面无法对应导致评论混合问题。
··· tip 参考链接
···
新建 Comment.vue 文件
/doc/.vitepress/theme/component 下新建。
js
<template>
<div class="comments">
<component v-if="showComment" src="https://giscus.app/client.js" :is="'script'" :key="title"
:data-repo="giscusConfig.repo" :data-repo-id="giscusConfig.repoId" :data-category="giscusConfig.category"
:data-category-id="giscusConfig.categoryId" :data-mapping="giscusConfig.mapping"
:data-strict="giscusConfig.strict" :data-reactions-enabled="giscusConfig.reactionsEnabled"
:data-emit-metadata="giscusConfig.emitMetadata" :data-input-position="giscusConfig.inputPosition"
:data-lang="giscusConfig.lang" :data-theme="giscusConfig.theme" :data-loading="giscusConfig.loading" />
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { useData, useRoute } from "vitepress";
const route = useRoute();
const { title } = useData();
// params generate in https://giscus.app/zh-CN
const giscusConfig = reactive({
repo: "DjyBrandon/brandonlibrary",
repoId: "R_kgDOJ3hyyQ",
category: "General",
categoryId: "DIC_kwDOJ3hyyc4CY2vO",
mapping: "title",
strict: "0",
reactionsEnabled: "1",
emitMetadata: "0",
inputPosition: "top",
theme: "light",
lang: "zh-CN",
loading: "lazy",
});
const showComment = ref(true);
watch(
() => route.path,
() => {
showComment.value = false;
setTimeout(() => {
showComment.value = true;
}, 200);
},
{
immediate: true,
}
);
</script>
<style>
/* // TODO 使用giscus自定义主题结合vitepress主题切换 */
.comments {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
}
</style>挂载到文档中
/doc/.vitepress/theme/ 下新建 index.js。
js
import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
// 导入刚才创建好的组件
import Comment from './component/comment.vue';
export default {
...DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
'doc-after': () => h(Comment),
});
},
};