VitePress 集成 Twikoo 评论
Twikoo 是一个简洁、安全、免费的静态网站评论系统。主要特点：免费搭建，部署简单，功能很完善，隐私护安全，通知发邮件，管理有内嵌，总之免费又方便
关于后端部署，大家可以看官网，或者这篇 VitePress 资源汇总 - 使用 Twikoo 评论系统。
推荐使用 Vercel 部署 (免费，需配置域名加速访问) 或者 Netlify 部署（免费）。
这篇主要讲 Vitepress 前端如何集成。
预览
集成步骤
1. 安装 twikoo
pnpm install twikoo2. 初始化 twikoo 组件
<template>
</template>3. 组件插入 Layout 插槽
<template>
</template><template>
</template><template>
</template><template>
</template><template>
</template><template>
</template><template>
</template><template>
</template><template>
</template>美化样式
1. 配置 twikoo
twikoo 配置面板里的插件页签，选择代码高亮主题 coy，代码复制插件 copyButton。
2. 自定义 css
以下代码中使用的部分变量，可利用开发者工具在本站查找或自己配置。
.twikoo {<template>
</template>.el-input-group__append,<template>
</template>.el-input-group__prepend,<template>
</template>.el-textarea__inner {<template>
</template><template>
</template>border: 1px solid #DCDFE6;<template>
</template><template>
</template>box-shadow: none;<template>
</template>}<template>
</template>.el-input-group__prepend {<template>
</template><template>
</template>border-right: none;<template>
</template>}<template>
</template>.el-button--small {<template>
</template><template>
</template>height: auto;<template>
</template>}<template>
</template>.el-textarea > .el-textarea__inner {<template>
</template><template>
</template>min-height: 117px !important;<template>
</template><template>
</template>border-radius: var(--weiz-border-radius);<template>
</template><template>
</template>margin-top: var(--weiz-spacing-2xl);<template>
</template>}<template>
</template>.tk-preview-container {<template>
</template><template>
</template>border-radius: var(--weiz-border-radius);<template>
</template>}<template>
</template>.tk-comments-count {<template>
</template><template>
</template>font-size: var(--weiz-font-size-sm);<template>
</template><template>
</template>color: var(--vp-c-text-2);<template>
</template>}<template>
</template>.tk-nick,<template>
</template>.tk-replies .tk-nick-link {<template>
</template><template>
</template>font-size: var(--weiz-font-size-st);<template>
</template><template>
</template>margin-right: var(--weiz-spacing);<template>
</template><template>
</template>color: var(--weiz-primary-color);<template>
</template>}<template>
</template>.tk-tag {<template>
</template><template>
</template>margin-right: var(--weiz-spacing);<template>
</template>}<template>
</template>.tk-comments-container > .tk-comment {<template>
</template><template>
</template>border: solid 1px #F3F4F6;<template>
</template><template>
</template>border-radius: var(--weiz-card-border-radius);<template>
</template><template>
</template>padding: var(--weiz-spacing-6xl);<template>
</template><template>
</template>margin-top: 0;<template>
</template><template>
</template>margin-bottom: var(--weiz-spacing-6xl);<template>
</template><template>
</template>transition: var(--weiz-transition-3);<template>
</template><template>
</template>&:hover {<template>
</template><template>
</template><template>
</template>box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);<template>
</template><template>
</template>}<template>
</template>}<template>
</template>.tk-replies-expand > .tk-comment {<template>
</template><template>
</template>border-top: solid 1px #f7f7f7;<template>
</template><template>
</template>padding-top: var(--weiz-spacing-4xl);<template>
</template>}<template>
</template>.tk-content p {<template>
</template><template>
</template>line-height: 1.6;<template>
</template>}<template>
</template>a {<template>
</template><template>
</template>color: var(--weiz-primary-color);<template>
</template><template>
</template>&:hover {<template>
</template><template>
</template><template>
</template>color: var(--weiz-primary-color-light-1);<template>
</template><template>
</template>}<template>
</template>}<template>
</template>// 代码块<template>
</template>div.code-toolbar {<template>
</template><template>
</template>border-radius: var(--weiz-border-radius);<template>
</template><template>
</template>box-shadow: var(--vp-code-block-shadow);<template>
</template><template>
</template>:not(pre)>code, pre {<template>
</template><template>
</template><template>
</template>background: var(--vp-code-block-bg);<template>
</template><template>
</template><template>
</template>border-radius: var(--weiz-border-radius);<template>
</template><template>
</template>}<template>
</template><template>
</template>pre {<template>
</template><template>
</template><template>
</template>&::before, &::after {<template>
</template><template>
</template><template>
</template><template>
</template>content: none;<template>
</template><template>
</template><template>
</template>}<template>
</template><template>
</template><template>
</template>&>code {<template>
</template><template>
</template><template>
</template><template>
</template>padding: 0.5em;<template>
</template><template>
</template><template>
</template><template>
</template>border-left: 4px solid var(--weiz-primary-color);<template>
</template><template>
</template><template>
</template><template>
</template>border-radius: var(--weiz-border-radius);<template>
</template><template>
</template><template>
</template><template>
</template>box-shadow: var(--vp-code-block-shadow);<template>
</template><template>
</template><template>
</template>}<template>
</template><template>
</template>}<template>
</template><template>
</template>&>div.toolbar {<template>
</template><template>
</template><template>
</template>z-index: 1;<template>
</template><template>
</template><template>
</template>top: 8px;<template>
</template><template>
</template><template>
</template>right: 8px;<template>
</template><template>
</template><template>
</template>&>.toolbar-item>button {<template>
</template><template>
</template><template>
</template><template>
</template>display: none;<template>
</template><template>
</template><template>
</template><template>
</template>padding: 0 6px;<template>
</template><template>
</template><template>
</template><template>
</template>font-size: 12px;<template>
</template><template>
</template><template>
</template><template>
</template>color: black;<template>
</template><template>
</template><template>
</template>}<template>
</template><template>
</template>}<template>
</template><template>
</template>&:hover>div.toolbar>.toolbar-item>button {<template>
</template><template>
</template><template>
</template>display: block;<template>
</template><template>
</template>}<template>
</template>}}.dark .twikoo {<template>
</template>.tk-comments-container > .tk-comment {<template>
</template><template>
</template>border-color: #454545;<template>
</template><template>
</template>&:hover {<template>
</template><template>
</template><template>
</template>box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);<template>
</template><template>
</template>}<template>
</template>}<template>
</template>.tk-replies-expand > .tk-comment {<template>
</template><template>
</template>border-color: #343434;<template>
</template>}<template>
</template>// 代码块<template>
</template>div.code-toolbar {<template>
</template><template>
</template>pre {<template>
</template><template>
</template><template>
</template>&>code {<template>
</template><template>
</template><template>
</template><template>
</template>filter: brightness(0.8);<template>
</template><template>
</template><template>
</template>}<template>
</template><template>
</template>}<template>
</template>}}3. css 注入主题配置
// 全局样式
import './style/index.scss'参考文档
Twikoo 官方文档
VitePress 集成 twikoo 参考解决方案
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]