评论配置

comment

评论配置，目前内置 Giscus、Twikoo、Waline、Artalk四种评论插件。

提示

支持每个文章页配置不同的在评论区提供者 provider。

config.mts

import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({comment:{provider:"giscus",options:{repo:"your repo",repoId:"your repoId",category:"your category",categoryId:"your categoryId",},},});

文章页 xxx.md

---tk:comment:provider:giscusoptions:repo:your reporepoId:your repoIdcategory:your categorycategoryId:your categoryId---

更多配置项

interfaceTeekConfig{comment?:|CommentConfig<"twikoo">|CommentConfig<"waline">|CommentConfig<"giscus">|CommentConfig<"artalk">|CommentConfig<"render">;}typeCommentConfig<TextendskeyofCommentProvider="twikoo"|"waline"|"giscus"|"artalk"|"render">={provider:T;options?:CommentProvider[T];};exporttypeCommentProvider={twikoo:{[key:string]:any;envId:string;jsLink?:string;cssLink?:string;version?:string;jsIntegrity?:string;timeout?:number;katex?:{cssLink:string;coreJsLink:string;renderJsLink:string;cssIntegrity?:string;coreJsIntegrity?:string;renderJsIntegrity?:string;};};waline:{[key:string]:any;serverURL:string;jsLink?:string;cssLink?:string;cssIntegrity?:string;dark?:string;};giscus:{[key:string]:any;repo:`${string}/${string}`;repoId:string;category:string;categoryId:string;mapping?:"url"|"title"|"og:title"|"specific"|"number"|"pathname";strict?:"0"|"1";reactionsEnabled?:"0"|"1";emitMetadata?:"0"|"1";inputPosition?:"top"|"bottom";lang?:string;theme?:string;loading?:"lazy"|"eager";useOnline?:boolean;link?:string;integrity?:string;};artalk:{[key:string]:any;server:string;site:string;};render:Record<string,any>;};

如果您使用 Twikoo，你只需要传入 version版本号即可，Teek 会根据版本号去分别请求 Twikoo 的 JS、CSS 文件，其请求地址分别为：

• JS：https:pnpmadd-D@waline/client# 安装 Giscus 依赖pnpmadd-D@giscus/vue# 安装 Artalk 依赖pnpmadd-Dartalk

然后在 .vitepress/theme/index.ts里面注入评论区的实例。

importTeek,{artalkContext,giscusContext,walineContext } from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import{useData,useRoute } from"vitepress";import{init } from"@waline/client";import"@waline/client/style";importGiscus from"@giscus/vue";importArtalk from"artalk";import"artalk/Artalk.css";exportdefault{extends:Teek,Layout:defineComponent({name:"LayoutProvider",setup() {const{isDark,page} =useData();constroute=useRoute();provide(walineContext,(el,options) =>init({serverURL:options.serverURL!,dark:options.dark,el }));provide(giscusContext,() =>Giscus);provide(artalkContext,(el,options) =>Artalk.init({el,darkMode:isDark.value,pageKey:route.path,pageTitle:page.value.title,server:options.server,site:options.site,}));return() =>h(Teek.Layout,null,{});},}),};

提示

这些依赖都是评论插件官方文档提供的，如果无法安装/注入成功，请前往对应官方文档阅读如何安装依赖、初始化实例。

最后可以把 config里的在线链接配置项删除，当然您也可以保留，当两者同时存在，以评论区实例注入为主。

自定义评论区

如果这四个评论区提供者都不符合需求，可以自己实现评论区，然后传入进来。

先把 provider必须指定为 render。

constteekConfig=defineTeekConfig({comment:{provider:"render",},});

最后通过 teek-comment插槽传入自定义评论区组件。

importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";importMyCommentComponent from"./components/MyCommentComponent.vue";import{h } from"vue";exportdefault{extends:Teek,Layout() {returnh(Teek.Layout,null,{"teek-comment":() =>h(MyCommentComponent),});},};