这篇文章作为对 Handsome 9.2.1 Pro美化记录，有新增时会实时更新。

本文内容部分来源于网络，如有侵权请留言删除！

更新时间 2024年 04月 14日

说明

文件源码下载 CSS文件 custom.css和JS文件 custom.js

本站所有美化样式均放在以下文件中

部分样式代码是纯粹的CSS或者JS，如果单独放到 配置外观—自定义CSS或者 自定义JS中，代码多的话是比较乱的，所以才将这些整理成文件。

美化记录

自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS

文章顶部内容居中

文章顶部内容居中 

header.bg-light.lter.wrapper-md {
  text-align: center;
}

首页文章标题居中

首页文章标题居中 

.post_title_wrapper
{
    justify-content: center;
}

首页文章日期居中

首页文章日期居中 

.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}

标签字体颜色

标签字体颜色 

.badge,.padder-v-ssm{
    color:#fff;
}

赞赏按钮跳动

赞赏按钮跳动 

/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}

标题悬停颜色

标题悬停颜色 

.index-post-title a:hover {
  color: #2ebaae;
}

全站页面纯白

全站页面使用白色时，需要在后台设置-外观设置-主题色调自定义搭配修改为white-white-white

全站页面纯白 

/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}

局部阴影

局部阴影 

/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}

获取焦点放大

首页文章图片获取焦点放大 

/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}

文章悬浮效果

文章悬浮效果 

/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}

滚动条效果

滚动条效果 

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}

自定义JavaScript

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义Javascript

左侧彩色图标&右侧彩色标签云

左侧彩色图标&右侧彩色标签云

需要将以下代码添加到PJAX->PJAX回调函数中 

//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});

其他修改

修改源文件记得备份哦~

博主文字介绍动态化

博主文字介绍动态化

将代码里的 这是我的介绍文字内容修改成需要展示的文字内容即可，顺便那个❤也是可以改的。 将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍内即可

<span class="text-muted text-xs block"><div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
"forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
(c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "❤",
o = ["这是我的介绍"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
"rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
"rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
"rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>

放之前记得先清空博主的介绍栏内的所有内容

页面-底部页脚美化

底部页脚美化

修改文件/themes/handsome/component/footer.php版权代码或者删除

<div class="wrapper bg-light">
    <span class="pull-right hidden-xs text-ellipsis">
       <?php $this->options->BottomInfo();?>
       <!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->
    </span>
    <span class="text-ellipsis">
       <?php $this->options->BottomleftInfo(); ?>
    </span>
</div>

以下代码放在外观设置-开发者设置-自定义css中 

/*底部页脚css*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color:#4d4d4d;
    text-shadow:0px 0.86px 0.2px #3333336b;
} 
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
    background-color: #00a1fd;
}
.github-badge .bg-orange {
    background-color: #ffa500;
}
.github-badge .bg-green {
    background-color: #3bca6e;
}
.github-badge .bg-purple{
    background-color:#ab34e9;
}
.github-badge .bg-red{
    background-color:#ff1010;
}

以下代码放在外观设置-开发者设置-博客底部左侧信息中 

<!--左侧底部-->
<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://starsei.com/" target="_blank">
        <span class="badge-value bg-orange">©2023 猫不吃鱼</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-beian"></i>京ICP备</span>
    <a href="https://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2022013581号-1</span></a>
</div>

以下代码放在外观设置-开发者设置-博客底部右侧信息中 

<!--右侧底部-->
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
     <a href="https://cloud.tencent.com" target="_blank">
        <span class="badge-value bg-blue">腾讯云提供服务</span>
      </a>
</div> |
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-typecho"></i>Theme by</span>
    <a href="https://www.ihewro.com/archives/489/" target="_blank">
        <span class="badge-value bg-purple">Handsome</span></a>
</div>

自定义字体

自定义字体

选择字体，然后去字体转换把 otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}

自定义右键美化

自定义右键美化

以下代码放在开发者设置➡自定义输出body尾部的HTML代码中

需要引入JS文件https://lib.baomitu.com/layer/3.1.1/layer.js,以下代码已经添加，无需再次引入。

<!--右键美化-->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="你的网址链接"><i class="fontello fontello-home"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fontello fontello-pencil"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fontello fontello-search"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fontello fontello-chevron-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-left"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fontello fontello-refresh"></i><span>重载网页</span></a></li>
        <li><a href="你的网址链接"><i class="fontello fontello-emo-tongue"></i><span>和我当邻居</span></a></li>  
           <li><a href="你的网址链接"><i class="fontello fontello-edit"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

右侧添加人生倒计时（岁月不待人）

右侧添加人生倒计时（岁月不待人）

首先找到网站根目录 /usr/themes/handsome/component/sidebar.php文件，找到 <!--广告位置-->这一行内容。 在该内容向上两行找到 <?php endif; ?>，在该行紧接着下面添加如下代码：

<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
<div class="sidebar sidebar-count">
    <div class="content">
        <div class="item" id="dayProgress">
            <div class="title">今日已经过去<span></span>小时</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-1"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="weekProgress">
            <div class="title">这周已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-2"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="monthProgress">
            <div class="title">本月已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-3"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="yearProgress">
            <div class="title">今年已经过去<span></span>个月</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-4"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
    </div>
</div>
     </section>
<!-- 时间倒计时代码结束 -->

改好后保存退出，进入网站根目录 /usr/themes/handsome/assets/js/的文件夹
创建一个名为 timeinfo.js的文件，并将以下代码放进该文件后，保存并退出

function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()

js文件弄好后，在 设置外观-开发者设置-自定义输出body尾部的HTML代码处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名

<!-- 时间倒计时 -->
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

最后一步，去自定义CSS里面添加以下代码

/* 时间流逝 */
.sidebar-count .content {
  padding: 15px
}
.sidebar-count .content .item {
  margin-bottom: 15px
}
.sidebar-count .content .item:last-child {
  margin-bottom: 0
}
.sidebar-count .content .item .title {
  font-size: 12px;
  color: var(--minor);
  margin-bottom: 5px;
  display: flex;
  align-items: center
}
.sidebar-count .content .item .title span {
  color: var(--theme);
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px
}
.sidebar-count .content .item .progress {
  display: flex;
  align-items: center
}
.sidebar-count .content .item .progress .progress-bar {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--classC);
  width: 0;
  min-width: 0;
  flex: 1;
  margin-right: 5px
}
@keyframes progress {
 0% {
    background-position: 0 0
 }

 100% {
    background-position: 30px 0
 }

}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
  width: 0;
  height: 100%;
  border-radius: 5px;
  transition: width 0.35s;
  -webkit-animation: progress 750ms linear infinite;
  animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
  background: #bde6ff;
  background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
  background: #ffd980;
  background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
  background: #ffa9a9;
  background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
  background: #67c23a;
  background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
  color: var(--info)
}

步骤完成以后就可以去查看效果了~

新年灯笼

新年灯笼

以下代码放在外观设置-开发者设置-自定义css中 

@media only screen and (max-width: 760px) {
    .deng-box, .deng-box1 {
        display:none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .right {
        float: left!important;
    }
}
.tc_dl1{
    position: relative;
    left: -13.625px;
   width:70.75px;
    }
.tc_dl1 img{width: 95px;/* height: 488px;*/justify-content: center;}
.tc_dl2{position: relative;left:-13.625px;width:70.75px;}
.tc_dl2 img{width: 95px;}
.deng-box {
    position: fixed;
    top:-3rem;
    left: -3rem;
    z-index: 9999;
}
.deng-box1 {
    position: fixed;
    top: -3rem;
    right: -3rem;
    z-index: 9999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 .deng-b {
    width: 45px;
    height: 154px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-b {
    position: absolute;
    top: 22px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
   .shui-c {
    position: absolute;
    top: 28px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
   .deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: "楷体";
    font-size: 26px;
    color: #f9b842;
    font-weight: bold;
    line-height: 37px;
    text-align: center;
   padding-top:10px;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg);
    }
    50% {
        -moz-transform: rotate(10deg);
    }
    100% {
        -moz-transform: rotate(-10deg);
    }
}
@-webkit-keyframes swing {
    0% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
    50% {
        box-shadow: -5px 5px 50px 4px  rgba(250, 108, 0, 1);
        -webkit-transform: rotate(10deg);
    }
    100% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
}
#envelope{width:35px;margin-bottom:25px;}

以下代码放在开发者设置➡自定义输出body尾部的HTML代码中

img标签中的所有src均可更换 

<div class="deng-box">              
        <div class="deng">
        <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">新春
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/> 
                        <div class="tc_dl1">
                            <img src="https://s11.ax1x.com/2024/01/25/pFmVSUg.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>     
        </div>   
    </div>
    <div class="deng-box1">   
        <div class="deng">  
            <div class="xian"></div>
            <div class="deng-a">    
                <div class="deng-b">
                    <div class="deng-t">快乐 
                    <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/>
                    <div class="tc_dl2 ">
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEzVS.jpg"/>
                    </div>
                    </div>
                </div>       
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>

插件推荐

鼠标美化插件HoerMouse

鼠标美化插件HoerMouse

插件下载：
食用方法：

  • 下载插件，解压到usr/plugins/目录中
  • 修改文件夹名为HoerMouse
  • 进入后台设置激活插件

UserAgent插件

UserAgent插件

插件下载：
食用方法：
操作前请做好相应备份工作，此插件只针对于Handsome主题

  • 下载插件，解压到usr/plugins目录中
  • 修改文件夹名为UserAgent
  • 进入后台设置激活插件
  • 修改Handsome主题component目录下comments.php，代码大概在99~100行左右。
<span class="star_count"><?php $stars = $comments->stars;  echo ($stars) ? $stars : ""; ?></span></a>

添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> ，修改后代码如下：

<span class="star_count"><?php  $stars = $comments->stars; echo ($stars) ? $stars : ""; ?></span>
</a><!--UserAgent--><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

原文链接:点击此处跳转

邮箱评论通知插件CommentToMail

邮箱评论通知插件CommentToMail

插件下载：
食用方法：

  • 下载插件，解压到usr/plugins/目录中
  • 修改文件夹名为CommentToMail
  • 进入后台设置激活插件

看板娘插件PioModify

看板娘插件PioModify

插件下载：
食用方法：

  • 下载插件，解压到usr/plugins/目录中
  • 修改文件夹名为PioModify
  • 进入后台设置激活插件

网站优化

Typecho开启Gzip加速

Typecho开启Gzip加速

找到Typecho安装目录中的config.inc.php文件，添加一行代码即可。

/* 开启gzip压缩 */
ob_start('ob_gzhandler');

设置gravatar国内源

设置gravatar国内源

找到Typecho安装目录中的config.inc.php文件，添加一行代码即可更换为国内源

define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');

Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入https://cdn.v2ex.com/gravatar/
国内镜像源：
V2EX：https://cdn.v2ex.com/gravatar/
极客族：https://sdn.geekzu.org/avatar/
loli：https://gravatar.loli.net/avatar/

最后修改：2024 年 04 月 14 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏