VitePress 集成 Waline

转载自我的个人博客：小树

VitePress 本身基于 Vue3，可以通过组件将 Waline 集成到页面中，关于 VitePress 中的组件可以看这篇文章：组件 | VitePress

首先在 .vitepress 中创建一个 theme 文件夹，theme 文件的路径应该是这样的：

.
├── Layout.vue
├── components
│   └── CommentItem.vue
└── index.ts

首先在 components 中写一个评论组件：

<template>
  <Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
// 从 'vitepress' 导入 useData
import { useData } from 'vitepress';

import '@waline/client/style';

const serverURL = 'https://waline.example.com';
// 使用 useData 获取页面信息
const { page } = useData();
// 通过 page.relativePath 获取当前路径
const path = computed(() => page.value.relativePath);
</script>

之后在布局组件中，将其引用：

<script setup>
import DefaultTheme from 'vitepress/theme'
import Comment from './components/CommentItem.vue' // 导入你的评论组件
import { useData } from 'vitepress'

const { Layout } = DefaultTheme
const { frontmatter } = useData() // 获取 frontmatter 数据
</script>

<template>
  <Layout>
    <template #doc-after>
      <!-- 可以根据 frontmatter 控制是否显示评论 -->
      <Comment v-if="frontmatter.comment !== false" />
    </template>
  </Layout>
</template>

最后按照规定，写一个 index.ts 的注册文件：

import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue' 

export default {
  extends: DefaultTheme, 
  Layout: Layout, 
  enhanceApp({app}) {
  }
}