[scode type="green" size=""]尝试了很多教程，有些美化操作因为主题版本不适配而失效，所以这里只记录适用于handsome8.3版本的美化操作有本文未提到的且适用于8.3版本的美化教程欢迎在评论区中留言。本文会持续更新。[/scode][tabs][tab name="外观" active="true"]此栏美化教程需要在主题设置/开发者设置中自行添加js或者css代码，以及对主题源代码进行改动，若日后更新主题，可能需要重复美化过程，比较麻烦。个人更推荐使用插件。[collapse title="一、 添加额外表情包" status="false"]用压缩包内的0w0.js文件替换usr/themes/handsome/usr下的同名文件将压缩包中另外两个文件夹：weibo和paopao放入/usr/themes/handsome/assets/img/emotion目录下若感觉表情包尺寸太大或太小，可将下面的代码填入开发者设置/自定义css中自行调节大小，个人推荐25px左右.emotion-weibo { width: 100px; } .emotion-tieba { width: 100px; } .comment-content-true img.emotion-weibo { max-width: 100%!important; } .comment-content-true img.emotion-tieba { max-width: 100%!important; }[button color="info" icon="glyphicon glyphicon-download-alt" url="https://pan.baidu.com/s/1rm7RSUhrV5yRO0EHK1csvg" type=""]百度云[/button]提取码：[/collapse][collapse title="二、 给左上角头像添加特效" status="false"]在开发者设置/css中添加以下代码即可旋转特效，可通过totate字段调节旋转角度img-full {width: 100px;border-radius: 50%;animation: light 4s ease-in-out infinite;transition: 0.5s;}.img-full:hover {transform: scale(1.15) rotate(720deg);}礼花特效@keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } }[/collapse][collapse title="三、 去除首页顶部博客名称" status="false"]进入/usr/themes/handsome/index.php文件，删除以下代码 <?php $this->options->title(); ?> [/collapse][collapse title="四、 彩色标签云" status="false"]在开发者设置/java script中添加以下代码 let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; });[/collapse][collapse title="五、 底部栏框高度调节" status="false"]进入开发者设置/css，添加以下代码 .wrapper { padding: 10px } [/collapse][collapse title="六、 文章底部添加版权信息" status="false"]此操作达到的美化效果和CopyRight插件功能类似，但插件可以控制特定页面是否显示版权信息。个人觉得插件显示的版权信息的行间距太大。首先在usr/themes/handsome/post.php添加以下代码 本文作者：<?php $this->author(); ?> 本文链接：<a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?> 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 4.0 许可协议。 然后在开发者设置/css中添加以下代码.post-copyright { font-size: 13px; margin: 8px 0; padding: 10px; border-left: 4px solid #7fff00; background-color: rgba(220, 220, 220, 0.1); list-style: none; word-break: break-all; position: relative; overflow: hidden; } .post-copyright li { display: list-item; text-align: -webkit-match-parent; } .post-copyright a { color: rgba(0, 120, 231, 1); text-decoration: none; transition: color .1s; }[/collapse][collapse title="七、 给文章卡片周围添加灰色阴影" status="false"]在开发者设置/css中添加以下代码.panel{ box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); } .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); } .panel-small{ box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); } .panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); -moz-box-shadow: 1px 1px 5px 5px rgba(169,169,169,2); } #如果也想使盒子四周也有阴影，加上以下代码 .app.container { box-shadow: 0 0 30px rgba(169,169,169,2); }[/collapse][collapse title="持续更新中...." status="false"]暂无[/collapse][/tab][tab name="插件"]此栏目所介绍的插件都可以通过typecho官网下载，这里只介绍我本人使用过且觉得不错的插件。[collapse title="一、 添加评论回复提醒" status="false"]添加评论提醒有很多插件，这里只介绍4种：CommentToMail、CommentToWechat、WeChatNotice、LoveKKComment。[scode type="green" size=""]CommentToMail比较老了，我当时安装的时候测试显示没问题，但是在实际环境中始终收不到提醒，捣鼓了很久也没弄好；[/scode][scode type="green" size=""]CommentToWechat、WeChatNotice这两个插件可以让博主在微信上收到读者的评论提醒，但是博主如果回复了评论，读者是收不到提醒的；[/scode][scode type="green" size=""]LoveKKComment是目前功能比较玩完善的评论提醒插件了，支持阿里云的邮件服务，读者和博主双方都能收到彼此的评论提醒，响应速度也比较快。具体的使用方法下面这个链接里的教程非常详细，不再重复赘述，这里只说我自己踩到的坑：进行验证回复地址这个步骤时，尽量不要在移动端进行验证，否则可能导致验证无法通过。[/scode][button color="success" icon="glyphicon glyphicon-link" url="https://www.wuqintai.com/archives/2157.html" type=""]插件使用教程[/button][/collapse][collapse title="持续更新中...." status="false"]暂无[/collapse][/tab][/tabs]