- handsome
type: channel
link: https://www.sharklj.com/tag/handsome/
items: Handsome8.3主题美化记录

Handsome8.3主题美化记录
type: item
date: 2022-02-26T17:27:00+08:00
description: [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 = tagsC…