如何部署请查看 Twikoo 文档

创建数据

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

// .vitepress/data/Twikoo.ts

export const Twikoo_Data = {
  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)
  }
  ...
}

<!-- index.md -->

---

layout: home

---

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