VitePress 集成 Twikoo 评论

Twikoo 是一个简洁、安全、免费的静态网站评论系统。
主要特点：免费搭建，部署简单，功能很完善，隐私护安全，通知发邮件，管理有内嵌，总之免费又方便
关于后端部署，大家可以看官网，或者这篇 VitePress 资源汇总 - 使用 Twikoo 评论系统。
推荐使用 Vercel 部署 (免费，需配置域名加速访问) 或者 Netlify 部署（免费）。
这篇主要讲 Vitepress 前端如何集成。
预览

集成步骤

1. 安装 twikoo

1. pnpm install twikoo

复制代码

2. 初始化 twikoo 组件

1. <template>
2.   
3. </template>

复制代码

3. 组件插入 Layout 插槽

1. <template>
2.   
3. </template><template>
4.   
5. </template><template>
6.   
7. </template><template>
8.   
9. </template><template>
10.   
11. </template><template>
12.   
13. </template><template>
14.   
15. </template><template>
16.   
17. </template><template>
18.   
19. </template>

复制代码

美化样式

1. 配置 twikoo

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

2. 自定义 css

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

1. .twikoo {<template>
2.   
3. </template>.el-input-group__append,<template>
4.   
5. </template>.el-input-group__prepend,<template>
6.   
7. </template>.el-textarea__inner {<template>
8.   
9. </template><template>
10.   
11. </template>border: 1px solid #DCDFE6;<template>
12.   
13. </template><template>
14.   
15. </template>box-shadow: none;<template>
16.   
17. </template>}<template>
18.   
19. </template>.el-input-group__prepend {<template>
20.   
21. </template><template>
22.   
23. </template>border-right: none;<template>
24.   
25. </template>}<template>
26.   
27. </template>.el-button--small {<template>
28.   
29. </template><template>
30.   
31. </template>height: auto;<template>
32.   
33. </template>}<template>
34.   
35. </template>.el-textarea > .el-textarea__inner {<template>
36.   
37. </template><template>
38.   
39. </template>min-height: 117px !important;<template>
40.   
41. </template><template>
42.   
43. </template>border-radius: var(--weiz-border-radius);<template>
44.   
45. </template><template>
46.   
47. </template>margin-top: var(--weiz-spacing-2xl);<template>
48.   
49. </template>}<template>
50.   
51. </template>.tk-preview-container {<template>
52.   
53. </template><template>
54.   
55. </template>border-radius: var(--weiz-border-radius);<template>
56.   
57. </template>}<template>
58.   
59. </template>.tk-comments-count {<template>
60.   
61. </template><template>
62.   
63. </template>font-size: var(--weiz-font-size-sm);<template>
64.   
65. </template><template>
66.   
67. </template>color: var(--vp-c-text-2);<template>
68.   
69. </template>}<template>
70.   
71. </template>.tk-nick,<template>
72.   
73. </template>.tk-replies .tk-nick-link {<template>
74.   
75. </template><template>
76.   
77. </template>font-size: var(--weiz-font-size-st);<template>
78.   
79. </template><template>
80.   
81. </template>margin-right: var(--weiz-spacing);<template>
82.   
83. </template><template>
84.   
85. </template>color: var(--weiz-primary-color);<template>
86.   
87. </template>}<template>
88.   
89. </template>.tk-tag {<template>
90.   
91. </template><template>
92.   
93. </template>margin-right: var(--weiz-spacing);<template>
94.   
95. </template>}<template>
96.   
97. </template>.tk-comments-container > .tk-comment {<template>
98.   
99. </template><template>
100.   
101. </template>border: solid 1px #F3F4F6;<template>
102.   
103. </template><template>
104.   
105. </template>border-radius: var(--weiz-card-border-radius);<template>
106.   
107. </template><template>
108.   
109. </template>padding: var(--weiz-spacing-6xl);<template>
110.   
111. </template><template>
112.   
113. </template>margin-top: 0;<template>
114.   
115. </template><template>
116.   
117. </template>margin-bottom: var(--weiz-spacing-6xl);<template>
118.   
119. </template><template>
120.   
121. </template>transition: var(--weiz-transition-3);<template>
122.   
123. </template><template>
124.   
125. </template>&:hover {<template>
126.   
127. </template><template>
128.   
129. </template><template>
130.   
131. </template>box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);<template>
132.   
133. </template><template>
134.   
135. </template>}<template>
136.   
137. </template>}<template>
138.   
139. </template>.tk-replies-expand > .tk-comment {<template>
140.   
141. </template><template>
142.   
143. </template>border-top: solid 1px #f7f7f7;<template>
144.   
145. </template><template>
146.   
147. </template>padding-top: var(--weiz-spacing-4xl);<template>
148.   
149. </template>}<template>
150.   
151. </template>.tk-content p {<template>
152.   
153. </template><template>
154.   
155. </template>line-height: 1.6;<template>
156.   
157. </template>}<template>
158.   
159. </template>a {<template>
160.   
161. </template><template>
162.   
163. </template>color: var(--weiz-primary-color);<template>
164.   
165. </template><template>
166.   
167. </template>&:hover {<template>
168.   
169. </template><template>
170.   
171. </template><template>
172.   
173. </template>color: var(--weiz-primary-color-light-1);<template>
174.   
175. </template><template>
176.   
177. </template>}<template>
178.   
179. </template>}<template>
180.   
181. </template>// 代码块<template>
182.   
183. </template>div.code-toolbar {<template>
184.   
185. </template><template>
186.   
187. </template>border-radius: var(--weiz-border-radius);<template>
188.   
189. </template><template>
190.   
191. </template>box-shadow: var(--vp-code-block-shadow);<template>
192.   
193. </template><template>
194.   
195. </template>:not(pre)>code[class*=language-], pre[class*=language-] {<template>
196.   
197. </template><template>
198.   
199. </template><template>
200.   
201. </template>background: var(--vp-code-block-bg);<template>
202.   
203. </template><template>
204.   
205. </template><template>
206.   
207. </template>border-radius: var(--weiz-border-radius);<template>
208.   
209. </template><template>
210.   
211. </template>}<template>
212.   
213. </template><template>
214.   
215. </template>pre[class*=language-] {<template>
216.   
217. </template><template>
218.   
219. </template><template>
220.   
221. </template>&::before, &::after {<template>
222.   
223. </template><template>
224.   
225. </template><template>
226.   
227. </template><template>
228.   
229. </template>content: none;<template>
230.   
231. </template><template>
232.   
233. </template><template>
234.   
235. </template>}<template>
236.   
237. </template><template>
238.   
239. </template><template>
240.   
241. </template>&>code {<template>
242.   
243. </template><template>
244.   
245. </template><template>
246.   
247. </template><template>
248.   
249. </template>padding: 0.5em;<template>
250.   
251. </template><template>
252.   
253. </template><template>
254.   
255. </template><template>
256.   
257. </template>border-left: 4px solid var(--weiz-primary-color);<template>
258.   
259. </template><template>
260.   
261. </template><template>
262.   
263. </template><template>
264.   
265. </template>border-radius: var(--weiz-border-radius);<template>
266.   
267. </template><template>
268.   
269. </template><template>
270.   
271. </template><template>
272.   
273. </template>box-shadow: var(--vp-code-block-shadow);<template>
274.   
275. </template><template>
276.   
277. </template><template>
278.   
279. </template>}<template>
280.   
281. </template><template>
282.   
283. </template>}<template>
284.   
285. </template><template>
286.   
287. </template>&>div.toolbar {<template>
288.   
289. </template><template>
290.   
291. </template><template>
292.   
293. </template>z-index: 1;<template>
294.   
295. </template><template>
296.   
297. </template><template>
298.   
299. </template>top: 8px;<template>
300.   
301. </template><template>
302.   
303. </template><template>
304.   
305. </template>right: 8px;<template>
306.   
307. </template><template>
308.   
309. </template><template>
310.   
311. </template>&>.toolbar-item>button {<template>
312.   
313. </template><template>
314.   
315. </template><template>
316.   
317. </template><template>
318.   
319. </template>display: none;<template>
320.   
321. </template><template>
322.   
323. </template><template>
324.   
325. </template><template>
326.   
327. </template>padding: 0 6px;<template>
328.   
329. </template><template>
330.   
331. </template><template>
332.   
333. </template><template>
334.   
335. </template>font-size: 12px;<template>
336.   
337. </template><template>
338.   
339. </template><template>
340.   
341. </template><template>
342.   
343. </template>color: black;<template>
344.   
345. </template><template>
346.   
347. </template><template>
348.   
349. </template>}<template>
350.   
351. </template><template>
352.   
353. </template>}<template>
354.   
355. </template><template>
356.   
357. </template>&:hover>div.toolbar>.toolbar-item>button {<template>
358.   
359. </template><template>
360.   
361. </template><template>
362.   
363. </template>display: block;<template>
364.   
365. </template><template>
366.   
367. </template>}<template>
368.   
369. </template>}}.dark .twikoo {<template>
370.   
371. </template>.tk-comments-container > .tk-comment {<template>
372.   
373. </template><template>
374.   
375. </template>border-color: #454545;<template>
376.   
377. </template><template>
378.   
379. </template>&:hover {<template>
380.   
381. </template><template>
382.   
383. </template><template>
384.   
385. </template>box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);<template>
386.   
387. </template><template>
388.   
389. </template>}<template>
390.   
391. </template>}<template>
392.   
393. </template>.tk-replies-expand > .tk-comment {<template>
394.   
395. </template><template>
396.   
397. </template>border-color: #343434;<template>
398.   
399. </template>}<template>
400.   
401. </template>// 代码块<template>
402.   
403. </template>div.code-toolbar {<template>
404.   
405. </template><template>
406.   
407. </template>pre[class*=language-] {<template>
408.   
409. </template><template>
410.   
411. </template><template>
412.   
413. </template>&>code {<template>
414.   
415. </template><template>
416.   
417. </template><template>
418.   
419. </template><template>
420.   
421. </template>filter: brightness(0.8);<template>
422.   
423. </template><template>
424.   
425. </template><template>
426.   
427. </template>}<template>
428.   
429. </template><template>
430.   
431. </template>}<template>
432.   
433. </template>}}

复制代码

3. css 注入主题配置

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

复制代码

参考文档

Twikoo 官方文档
VitePress 集成 twikoo 参考解决方案

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！