评论组件 - Waline

waline评论

一款简洁、安全的评论系统。

安装依赖

pnpmnpmyarn

pnpm add recaptcha-v3

npm install recaptcha-v3

yarn add recaptcha-v3

然后在 .vitepress/config.mts中添加以下内容

.vitepress/config.mts

import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ['recaptcha-v3']
    } 
  } 
})

创建数据

在 .vitepress/data/Waline.ts 文件中创建评论配置：

.vitepress/data/Waline.ts

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

export const Waline_Data: WalineData = {
  serverURL: 'https://xxxxxx', // 替换为你的 waline 服务地址
  lang: 'zh-CN'
  //其他选项...
}

接口说明查看 waline 接口说明文档

TIP

path 属性已通过 VitePress 提供的 useRoute() 自动获取，一般无需手动设置；如有特殊需求，也可以自行覆盖。

引入评论组件

在文档页使用

在 .vitepress/theme/index.ts 中注册组件并插入评论区域

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import { Waline } from '@theojs/lumen'
import { Waline_Data } from '../data'

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

在首页使用

你也可以在首页直接挂载 Waline 组件：

.vitepress/theme/index.ts

import type { EnhanceAppContext } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import { Waline } from '@theojs/lumen'

export default {
  enhanceApp: ({ app }: EnhanceAppContext) => {
    app.component('Waline', Waline)
  }
}

.vitepress/index.md

yaml

---
layout: home

hero:
  name: Lumen
  text: 'Enhanced '
  textsuffix: 'Theme'
  tagline: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库
---

# 修改成部署的 Waline 地址
<Waline :Waline_Data="{  serverURL: 'https://xxxxxx', ...其他选项  }" />

CSS 变量

已预设部分 CSS 变量，如需进一步自定义，可参考 Waline 官方文档通过覆盖样式实现个性化调整。

评论组件 - Waline ​

waline评论 ​

安装依赖 ​

创建数据 ​

接口说明 查看 waline 接口说明文档 ​

引入评论组件 ​

在文档页使用 ​

在首页使用 ​

CSS 变量 ​