Lumen

主题模式

Icon
如何部署请查看 Twikoo 文档一个简洁、安全、免费的静态网站评论系统。

创建数据 ​

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

ts
// .vitepress/data/Twikoo.ts

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

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

引入组件 ​

TIP

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

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 }) 
    }) 
  }
  ...
}

在首页使用 ​

ts
//.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)
  }
  ...
}
md
---
layout: home

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

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