v5.5.0
主题模式
月付 85折 优惠码 fb2561885
年付 64折 优惠码 fb2561880
月付 85折 优惠码 spring85
年付 8折 优惠码 spring80
流媒体观影
一站式服务
传世经典著作
山医命相卜
流媒体账号合租
共享车位
zshrc、系统优化一键脚本
Clash/Loon/QX... 配置
一款简洁、安全的评论系统。
在 .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' }
TIP
path 属性已通过 VitePress 提供的 useRoute() 自动获取,一般无需手动设置;如有特殊需求,也可以自行覆盖。
path
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 组件:
Waline
import DefaultTheme from 'vitepress/theme' import { h } from 'vue' import { Waline } from '@theojs/lumen' export default { extends: DefaultTheme, enhanceApp: ({ app }) => { app.component('Waline', Waline) } }
--- layout: home hero: name: Lumen text: 'Enhanced ' textsuffix: 'Theme' tagline: ✨ 专为 VitePress 打造的主题美化与 Vue 扩展组件库 --- # 修改成部署的 Waline 地址 <Waline :Waline_Data="{ serverURL: 'https://xxxxxx' }" />
已预设 部分 CSS 变量,如需进一步自定义,可参考 Waline 官方文档 通过覆盖样式实现个性化调整。
评论组件 - Waline
waline评论
一款简洁、安全的评论系统。
创建数据
在
.vitepress/data/Waline.ts
文件中创建评论配置:接口说明
查看 waline 接口说明文档
TIP
path
属性已通过 VitePress 提供的useRoute()
自动获取,一般无需手动设置;如有特殊需求,也可以自行覆盖。引入评论组件
在文档页使用
在
.vitepress/theme/index.ts
中注册组件并插入评论区域在首页使用
你也可以在首页直接挂载
Waline
组件:CSS 变量
已预设 部分 CSS 变量,如需进一步自定义,可参考
Waline 官方文档 通过覆盖样式实现个性化调整。