美化记录

自定义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>

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

<!--左侧底部-->
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
    <a href="https://beian.miit.gov.cn" rel="external nofollow" target="_blank" class="icon-container">
        <img src="https://cdn.liuyue.net/assets/img/icp.png" alt="ICP图标" width="17" height="17">
        陕ICP备2024043983号-1
    </a>
    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=61092602000124" target="_blank">
        <img src="https://cdn.liuyue.net/assets/img/gwab.png" alt="公网备案图标" width="17" height="17">
        陕公网安备61092602000124号
    </a>
</div>
<div style="color: black; margin-top: 10px; display: flex; justify-content: space-between; align-items: center;">
    <span>本站由
        <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank">
            <img src="https://cdn.liuyue.net/assets/img/ypy.png" style="width: 48px; height: 23px;">
        </a>
        提供云计算/CDN加速服务
    </span>
    <div class="hide-on-mobile">
        <a href="https://typecho.org/" style="margin-left: 5px" target="_blank">
            <svg style="width: 16px;height: 16px;vertical-align: -4px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="26px" viewBox="0 0 30 26" version="1.1">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                    <path d="M13,26 C3.36833333,26 0,22.631 0,13 C0,3.36866667 3.36833333,0 13,0 C22.6316667,0 26,3.36866667 26,13 C26,22.631 22.6316667,26 13,26 Z M6,9 L20,9 L20,7 L6,7 L6,9 Z M6,14 L16,14 L16,12 L6,12 L6,14 Z M6,19 L18,19 L18,17 L6,17 L6,19 Z" id="icon" fill="#000000" sketch:type="MSShapeGroup"/>
                </g>
            </svg>
        </a>
        <a class="highlightlink" href="https://www.ihewro.com/archives/489/" target="_blank">
            <span>Theme by handsome</span>
        </a>
    </div>
</div>
<style>
    /* 电脑端（屏幕宽度大于 768px）时显示 */
    @media (min-width: 768px) {
        .hide-on-mobile {
            display: block;
        }
    }
    /* 手机端（屏幕宽度小于等于 768px）时隐藏 */
    @media (max-width: 768px) {
        .hide-on-mobile {
            display: none;
        }
    }
</style>