说明
关于handsome主题的一些美化和修改统一记录,方便以后开速查找;

1:去除顶部博客名称

展开查看详情

修改/usr/themes/handsome/index.php文件,位于公告位置下方
删除以下代码

<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>

2:标题栏title自动变化

展开查看详情

把下面的代码添加到开发者设置->自定义输出head 头部的HTML代码中即可。
`<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {

if (document.hidden) {
//$('[rel="shortcut icon"]').attr("href", "//www.dreamwings.cn/queue/wp-content/uploads/2016/05/fail.ico");
document.title = "页面已崩溃!点击恢复!";
clearTimeout(titleTime)
} else {
//$('[rel="shortcut icon"]').attr("href", "//www.ihewro.com/favicon.ico");
document.title = "(/≧▽≦/)咦!又好了! " + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
</script>`

3:一言打字特效美化

展开查看详情


第一步
先把这两个js放到:设置外观--开发者设置--自定义输出head头部的HTML代码

<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js";></script>

<script src="https://i.gordsky.cn/assets/weiyu/typed.min.js";;></script>

第二步
把下面的js代码。复制到:设置外观--开发者设置--自定义JavaScript

function typedword(){$.ajax({type:"get",url:"https://api.gqink.cn/api/page/love",data:{page:'index'},async:true,success:function(word){var list=[];for(var i=0;i<word.data.length;i++){list.push(word.data[i]['word'])}$("#word").typed({strings:list,typeSpeed:20,loop:true,backDelay:3000,})}})}
第三步
把下面的html代码复制到:设置外观--初级设置--首页一行文字介绍

<p><span id="word"></span><script>$(function(){typedword();})</script></p>
最后保存一下就大功告成

4:等待添加

展开查看详情

给handsome加入“岁月不待人”

首先

将以下代码加到/usr/themes/handsome/component/sidebar.php,在122行左右,放在<?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> <!-- 时间倒计时代码结束 -->

其次

添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义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)
}`

最后

添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部

`<!-- 时间倒计时 -->

<script src="https://www.lxink.cn/usr/themes/handsome/assets/js/timeinfo.js";></script>`

第一步放在 非文章界面 前面

欢迎来到一朵无名之花的博客!


最后修改:2021 年 05 月 26 日
如果觉得我的文章对你有用,请随意赞赏