如何部署请查看 Twikoo 文档

一个简洁、安全、免费的静态网站评论系统。

创建数据

在.vitepress目录下新建data/Twikoo.ts文件，并添加以下内容：

.vitepress/data/Twikoo.ts

import type { TwikooData } from '@theojs/lumen'

export const Twikoo_Data: TwikooData = {
  envId: 'https://xxxxxx' // 修改成部署的Twikoo地址
}

引入组件

TIP

.. /data/Twikoo.ts 可替换为存放数据的路径

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import { h } from 'vue'

import { Twikoo } from '@theojs/lumen'

import { Twikoo_Data } from '../data'

export default {
  extends: DefaultTheme,
  Layout() { 
    return h(DefaultTheme.Layout, null, { 
      'doc-after': () => h(Twikoo, { Twikoo_Data }) 
    }) 
  } 
  ...
}

在首页使用

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import { h } from 'vue'

import { Twikoo } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  enhanceApp: ({ app }) => { 
    app.component('Twikoo', Twikoo) 
  } 
  ...
}

.vitepress/index.md

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 集成 Vue 功能组件和主题美化的 VitePress 插件
---

# 修改成部署的Twikoo地址
<Twikoo :Twikoo_Data="{ envId: 'https://xxxxxx'  }" />