Twikoo部署心得

评论系统比较目前评论系统有很多，各有各的特点，最常见的如valine、gitalk、Livere(来必力)、twikoo等。

• valine简洁、高速，但提醒功能不完善；
• gitalk只支持github登录，国内API不稳定；
• Livere来自韩国，管理功能强大，支持很多社交账号登录，但是网速较慢；
• twikoo比较简洁，可免费使用，支持邮箱甚至微信提醒，但需实名认证。

我之前用过一段时间的valine,之所以我选择使用twikoo，因为我比较喜欢twikoo的自动补全邮箱和头像的功能，给评论者带来很多方便。

---

twikoo部署

twikoo是基于腾讯云开发的一个简洁、安全、免费的静态博客评论系统。详细部署细节可参考官方文档 中的“手动部署”。

---

部署心得

本篇文章主要讲述我在部署twikoo的一些技巧。

免费资源入口（已失效）

twikoo宣称自己是一个永久免费的系统，话虽如此，其官方文档所指引的腾讯云开发CloudBase无论是包年包月套餐还是按量计费资源包均无免费体验内容，难道twikoo的“免费”要打引号，难道白嫖党只能停步于此了吗？

经过博主一个小时的苦苦寻找，终于找到了云开发CloudBase的免费体验版，快点这里 ，找到云开发CloudBase，点击0元试用即可！

其他步骤请参考官方文档 中的“手动部署”。

正确添加域名

博主添加域名时输入 “https://asa-world.github.io/ ” 后发现报错。

一开始以为需要再申请一个万维网的域名，转念一想这也太麻烦了吧，进入官方群询问大佬后发现原来真的只是“格式错误”！

正确做法为输入“asa-world.github.io”即可。

被自己蠢到

twikoo美化

原始的twikoo评论界面太过简约，而且评论框有亿点小，于是博主开始美化twikoo。

前端知识入门后，美化不是很难，博主使用的是外部样式表引入的方式。只需要在.\themes\butterfly\source\css目录下新建css文件，输入下面的代码可实现博主自用的美化方案：

/* Twikoo评论框高度设置 */
.el-textarea__inner {
    min-height: 210px !important;
  }
  
/* Twikoo评论框添加背景图*/
.el-textarea {
	background-image: url(https://s2.loli.net/2022/02/06/gy6AcWI4MTjrNVx.gif);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(0, 0, 255, 0);
	resize: vertical
}

/* Twikoo评论框背景图实现点击下移*/
.el-textarea:focus-within {
	background-position-y: 800px;
	transition: all 0.2s ease-in-out 0s;
}

保存后，在主题文件中引入即可。