Third Comment System
存在许多第三方评论系统，下面简要介绍下各评论系统集成方式。
Waline
Waline 是一个依赖服务端实现的评论系统，它可以托管在 Vercel 等平台上。
使用 valaxy-addon-waline 集成。
valaxy-addon-waline 是基于 Waline 的一个 Valaxy 插件。 除此之外，我们推荐您可以使用 kotodama 进行评论管理，它是一个基于 Waline 服务端实现的评论管理系统。
安装
bash
npm i valaxy-addon-waline
# pnpm add valaxy-addon-walinets
import { defineValaxyConfig } from 'valaxy'
import { addonWaline } from 'valaxy-addon-waline'
export default defineValaxyConfig({
// or write it in site.config.ts
siteConfig: {
// 启用评论
comment: {
enable: true
},
},
// 设置 valaxy-addon-waline 配置项
addons: [
addonWaline({
// Waline 配置项，参考 https://waline.js.org/reference/client/props.html
serverURL: 'https://your-waline-url',
}),
],
})Utterances
Utterances 是一个基于 GitHub Issues 实现的评论系统。
它可以直接通过挂载 JS 脚本集成。
在博客根目录下新建 App.vue，添加挂载脚本:
vue
<!-- You can mount anything here -->
<script lang="ts" setup>
import { useUtterances } from './composables/use-utterances'
useUtterances({
/**
* use your repo
*/
repo: 'YunYouJun/valaxy',
issueTerm: 'pathname',
label: 'utterances',
})
</script>
<template>
<!-- try it -->
<div />
</template>ts
import { useAppStore } from 'valaxy'
import { nextTick, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const utterancesClientSrc = 'https://utteranc.es/client.js'
/**
* @see https://utteranc.es/
*/
export function useUtterances(options: {
repo: string
issueTerm: 'pathname' | 'title'
label: string
}) {
const app = useAppStore()
const route = useRoute()
const utterScriptRef = ref<HTMLScriptElement>()
/**
* mount utterances
* @see https://utteranc.es/
*/
function createUtterancesScript() {
if (utterScriptRef.value) {
utterScriptRef.value.remove()
}
utterScriptRef.value = document.createElement('script')
utterScriptRef.value.src = utterancesClientSrc
utterScriptRef.value.async = true
utterScriptRef.value.crossOrigin = 'anonymous'
utterScriptRef.value.setAttribute('repo', options.repo)
utterScriptRef.value.setAttribute('issue-term', options.issueTerm)
utterScriptRef.value.setAttribute('label', options.label)
utterScriptRef.value.setAttribute('theme', app.isDark ? 'github-dark' : 'github-light')
const commentContainer = document.querySelector('.comment')
if (commentContainer) {
// 如果旧元素存在，移除旧元素
const utterancesContainer = commentContainer.querySelector('.utterances')
if (utterancesContainer)
commentContainer.removeChild(utterancesContainer)
commentContainer.appendChild(utterScriptRef.value)
}
}
// watch dark mode for theme
watch(() => app.isDark, () => {
createUtterancesScript()
})
watch(
() => route.path,
() => {
nextTick(() => {
createUtterancesScript()
})
},
)
onMounted(() => {
createUtterancesScript()
})
}