v5.8.1
主题模式
月/季/半年付 85折: spring85
年付以上 48折: spring80
月/季/半年付 85折: wuyi85
年付以上 64折: wuyi80
全场 8折: Crazy618
流媒体观影
一站式服务
传世经典著作
山医命相卜
流媒体账号合租
共享车位
zshrc、系统优化一键脚本
Clash/Loon/QX... 配置
一款简洁、安全的评论系统。
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' }
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/config.mts
中添加以下内容创建数据
在
.vitepress/data/Waline.ts
文件中创建评论配置:接口说明
查看 waline 接口说明文档
TIP
path
属性已通过 VitePress 提供的useRoute()
自动获取,一般无需手动设置;如有特殊需求,也可以自行覆盖。引入评论组件
在文档页使用
在
.vitepress/theme/index.ts
中注册组件并插入评论区域在首页使用
你也可以在首页直接挂载
Waline
组件:CSS 变量
已预设 部分 CSS 变量,如需进一步自定义,可参考
Waline 官方文档 通过覆盖样式实现个性化调整。