前文提到，本博客已经支持了Twikoo这一优秀的评论系统，那么这篇文章就说说我用的Twikoo的美化

css文件介绍

评论框高度

image-20210225204742056

不知道你们有没有觉得，Twikoo这个评论框框有点太小了吧，你看看隔壁valine,那玩意多大

image-20210225204904150

看着顺眼多了，Twikoo可以引用css来实现这一点，代码我放在下面

/* Twikoo评论框高度 */
.el-textarea__inner {
    /* min-height: 75px; */
    /* height: 75px; */
    min-height: 210px !important;
  }

效果如下image-20210226151035538

Twikoo卡片式

效果如下image-20210225205308729

同样是引用css来实现，代码如下

/*twikooUA*/
.tk-extra[data-v-d82ce9a0] {
    padding: .2em .5em;
    border-radius: .2em;
    background: #ededed;
    margin-top: 0.5rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
}
.tk-comment[data-v-d82ce9a0] {
    box-shadow: 2px 2px 5px #9a9a9a;
    border-radius: 8px;
    padding: 15px;
    margin-top: 1rem;
}
.tk-comment[data-v-d82ce9a0] {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    word-break: break-all;
}
#twikoo .tk-comment .tk-replies .tk-comment {
    box-shadow: none;
}
.tk-replies {
    margin-left: -85px;

自定义邮件回复模板

这里有两个模板，一个是管理员收到留言的模板，一个是游客收到回复的模板，注意名称，在Twikoo 管理面板找到image-20210225205821312

填入以下代码

<head><base target="_blank"/><style id="scrollbar"type="text/css">::-webkit-scrollbar{width:0!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}#letter img{max-width:300px}</style><style id="from-wrapstyle"type="text/css">#form-wrap{overflow:hidden;height:447px;position:relative;top:0px;transition:all 1s ease-in-out.3s;z-index:0}</style><style id="from-wraphoverstyle"type="text/css">#form-wrap:hover{height:1300px;top:-200px}</style></head><body><div style="width: 530px;margin: 20px auto 0;height: 1000px;"><div id="form-wrap"><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png"alt="before"style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100"><div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;"<form><div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);"><img style="width:100%;overflow: hidden;"src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/><div style="padding: 5px 20px;"><br><div><h3 style="text-decoration: none; color: rgb(246, 214, 175);">${PARENT_NICK}，见信安：</h3></div><br><div id="letter"style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;"><p style="display: inline-block;">您在<a style="text-decoration: none;color: rgb(246, 214, 175)"target="_blank"href="${POST_URL} display: inline-block;">${SITE_NAME}</a>上发表的评论:</p><div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "Arial", "Microsoft YaHei" , "黑体" , "宋体" , sans-serif;">${PARENT_COMMENT}</div><p>收到了来自${NICK}的回复：</p><div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "Arial", "Microsoft YaHei" , "黑体" , "宋体" , sans-serif;">${COMMENT}</div></div><br><div style="text-align: center;margin-top: 40px;"><img src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"alt="hr"style="width:100%; margin:5px auto 5px auto; display: block;"/><a style="text-transform: uppercase;text-decoration: none;font-size: 14px;border: 2px solid #6c7575;color: #2f3333;padding: 10px;display: inline-block;margin: 10px auto 0;background-color: rgb(246, 214, 175);"target="_blank"href="${POST_URL}">${SITE_NAME}｜请您签收~</a></div><p style="font-size: 12px;text-align: center;color: #999;">自动书记人偶竭诚为您服务！<br>©2020<a style="text-decoration:none; color:rgb(246, 214, 175)"href="${SITE_URL}">${SITE_NAME}</a></p></div></div></form></div><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png"alt="after"style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100"></div></div></body>

image-20210225205942923

在这里填入以下代码

<head><base target="_blank"/><style id="scrollbar"type="text/css">::-webkit-scrollbar{width:0!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}#letter img{max-width:300px}</style><style id="from-wrapstyle"type="text/css">#form-wrap{overflow:hidden;height:447px;position:relative;top:0px;transition:all 1s ease-in-out.3s;z-index:0}</style><style id="from-wraphoverstyle"type="text/css">#form-wrap:hover{height:1300px;top:-200px}</style></head><body><div style="width: 530px;margin: 20px auto 0;height: 1000px;"><div id="form-wrap"><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png"alt="before"style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100"><div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;"><form><div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);"><img style="width:100%;overflow: hidden;"src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/><div style="padding: 5px 20px;"><br><div><h3 style="text-decoration: none; color: rgb(246, 214, 175);">来自${NICK}的留言:</h3></div><br><br><div id="letter"style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;"><div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "Arial", "Microsoft YaHei" , "黑体" , "宋体" , sans-serif;">${COMMENT}</div></div><div style="text-align: center;margin-top: 40px;"><img src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"alt="hr"style="width:100%; margin:5px auto 5px auto; display: block;"/><a style="text-transform: uppercase;text-decoration: none;font-size: 14px;border: 2px solid #6c7575;color: #2f3333;padding: 10px;display: inline-block;margin: 10px auto 0;background-color: rgb(246, 214, 175);"target="_blank"href="${POST_URL}">${SITE_NAME}｜请您过目~</a></div><p style="font-size: 12px;text-align: center;color: #999;">自动书记人偶竭诚为您服务！<br>©2020<a style="text-decoration:none; color:rgb(246, 214, 175)"href="${SITE_URL}">${SITE_NAME}</a></p></div></div></form></div><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png"alt="after"style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100"></div></div></body>

image-20210227184709925

image-20210227184737206

优雅的引用css

以下介绍怎么引用css文件，以蝴蝶主题为例【出现了，呆逼特色，胎教】

在themes\butterfly\source\css文件夹里创建对应文件，例如高度，创建文件为Twikoo.css并复制进去代码，之后再蝴蝶的配置文件里找到

inject:
  head:

并引用这个css文件，我这里使用的是jsdelivr外链加载

- <link rel="stylesheet" href="css/Twikoo.css">

image-20210225210956281

表情

我博客表情其实还是蛮丰富的，这主要多亏于某猹的开发,这里贴一下源项目地址点我前往使用方法就是寻找一个你喜欢的表情组,然后填入这里image-20210225212742206

目前博客使用的是https://cdn.jsdelivr.net/gh/2X-ercha/Twikoo-Magic/owo.json

嘛,那就没什么好介绍的了,希望这篇文章能帮助到您,如果对你有帮助,请动动小手帮忙分享一下,谢谢啦