VitePress 集成 Twikoo 评论

Twikoo 是一个简洁、安全、免费的静态网站评论系统。

主要特点：免费搭建，部署简单，功能很完善，隐私护安全，通知发邮件，管理有内嵌，总之免费又方便

关于后端部署，大家可以看官网，或者这篇 VitePress 资源汇总 - 使用 Twikoo 评论系统。
推荐使用 Vercel 部署 (免费，需配置域名加速访问) 或者 Netlify 部署（免费）。

这篇主要讲 Vitepress 前端如何集成。

预览

集成步骤

1. 安装 twikoo

pnpm install twikoo

2. 初始化 twikoo 组件

<template>
  <div id="twikoo"></div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRoute } from 'vitepress'

const route = useRoute()

const initTwikoo = async () => {
  // 判断是否在浏览器环境中
  if (typeof window !== 'undefined') {
    const twikoo = await import('twikoo')
    twikoo.init({
      envId: 'https://twikoo.xxx.com/', // 换成你自己配置的域名
      el: '#twikoo'
    })
  }
}

// 监听路由刷新评论
watch(route, () => {
  initTwikoo()
})

onMounted(() => {
  initTwikoo()
})
</script>

3. 组件插入 Layout 插槽

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import Twikoo from './Twikoo' //评论组件
</script>

<template>
  <DefaultTheme.Layout>
    <template #doc-after>
      <Twikoo />
    </template>
  </DefaultTheme.Layout>
</template>

美化样式

1. 配置 twikoo

twikoo 配置面板里的插件页签，选择代码高亮主题 coy，代码复制插件 copyButton。

2. 自定义 css

以下代码中使用的部分变量，可利用开发者工具在本站查找或自己配置。

.twikoo {
  .el-input-group__append,
  .el-input-group__prepend,
  .el-textarea__inner {
    border: 1px solid #DCDFE6;
    box-shadow: none;
  }
  .el-input-group__prepend {
    border-right: none;
  }
  .el-button--small {
    height: auto;
  }
  .el-textarea > .el-textarea__inner {
    min-height: 117px !important;
    border-radius: var(--weiz-border-radius);
    margin-top: var(--weiz-spacing-2xl);
  }
  .tk-preview-container {
    border-radius: var(--weiz-border-radius);
  }
  .tk-comments-count {
    font-size: var(--weiz-font-size-sm);
    color: var(--vp-c-text-2);
  }
  .tk-nick,
  .tk-replies .tk-nick-link {
    font-size: var(--weiz-font-size-st);
    margin-right: var(--weiz-spacing);
    color: var(--weiz-primary-color);
  }
  .tk-tag {
    margin-right: var(--weiz-spacing);
  }
  .tk-comments-container > .tk-comment {
    border: solid 1px #F3F4F6;
    border-radius: var(--weiz-card-border-radius);
    padding: var(--weiz-spacing-6xl);
    margin-top: 0;
    margin-bottom: var(--weiz-spacing-6xl);
    transition: var(--weiz-transition-3);
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
  }
  .tk-replies-expand > .tk-comment {
    border-top: solid 1px #f7f7f7;
    padding-top: var(--weiz-spacing-4xl);
  }
  .tk-content p {
    line-height: 1.6;
  }
  a {
    color: var(--weiz-primary-color);
    &:hover {
      color: var(--weiz-primary-color-light-1);
    }
  }
  // 代码块
  div.code-toolbar {
    border-radius: var(--weiz-border-radius);
    box-shadow: var(--vp-code-block-shadow);
    :not(pre)>code[class*=language-], pre[class*=language-] {
      background: var(--vp-code-block-bg);
      border-radius: var(--weiz-border-radius);
    }
    pre[class*=language-] {
      &::before, &::after {
        content: none;
      }
      &>code {
        padding: 0.5em;
        border-left: 4px solid var(--weiz-primary-color);
        border-radius: var(--weiz-border-radius);
        box-shadow: var(--vp-code-block-shadow);
      }
    }
    &>div.toolbar {
      z-index: 1;
      top: 8px;
      right: 8px;
      &>.toolbar-item>button {
        display: none;
        padding: 0 6px;
        font-size: 12px;
        color: black;
      }
    }
    &:hover>div.toolbar>.toolbar-item>button {
      display: block;
    }
  }
}
.dark .twikoo {
  .tk-comments-container > .tk-comment {
    border-color: #454545;
    &:hover {
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    }
  }
  .tk-replies-expand > .tk-comment {
    border-color: #343434;
  }
  // 代码块
  div.code-toolbar {
    pre[class*=language-] {
      &>code {
        filter: brightness(0.8);
      }
    }
  }
}

3. css 注入主题配置

// 全局样式
import './style/index.scss'

参考文档

Twikoo 官方文档

VitePress 集成 twikoo 参考解决方案