handsome主题美化备忘录

handsome主题美化备忘录

[scode type=”red” size=””]本文章基于V9.0.2版本编写,2023年8月6日handsome主题作者已经将主题更新至V9.2.0,由于底部版权样式被修改,版权美化部分存在些许出入,请读者自行注意差别[/scode]

自定义CSS部分

左上角logo扫光

/* 左上角logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

赞赏、点赞按钮跳动


/*赞赏、点赞按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
from {
transform: scale(1);
}

to {
    transform: scale(1.1);
}
}

头像鼠标悬停旋转放大


/*头像鼠标悬停旋转放大*/
.img-full {
border-radius: 50%;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

自定义JavaScript部分

复制右上角版权提示


//复制弹框
$("body").bind('copy',
        function(e) {
            copytips()
        })   
 function copytips() {
      var sitesurl=window.location.href;
        $.message({
            message: "尊重原创,转载请注明出处!
本文作者:李嘉宁
原文链接:" + sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "3000" }) }

彩色标签及右侧彩色数字

设置步骤:
后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript
如果主题中启用了pjax,需要将代码添加到pjax回调函数中。


/*彩色标签云代码开始*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
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;
});
/*彩色标签云代码结束*/

自定义右键

请将代码放到自定义输出body 尾部的HTML代码中
[collapse status=”false” title=”自定义右键”]

<!-- 自定义右键 -->
<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(100,160,255,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.5)!important}
    div.usercm{background:#fff !important;}
    </style>

<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.yinlangclub.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="你的友链链接"><i class="fa fa-meh-o fa-fw"></i><span>友链申请</span></a></li>  
           <li><a href="你的留言板链接"><i class="fa fa-pencil-square-o fa-fw"></i><span>留言反馈</span></a></li>
    </ul>
</div>
<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>

[/collapse]

左侧彩色小图标

分别添加到自定义 JavaScript 和pjax回调函数中


 
  let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

涉及修改主题文件部分

[scode type=”red”]下面的操作请在进行前进行主题文件备份,或仅将原代码进行注释,以免修改错误发生不测。[/scode]
[scode type=”blue”]将以下代码放到:网站目录/usr/themes/handsome/libs/Content.php的class content{}前[/scode]

class-content

右侧访客总数和响应时间统计

/*访问总量代码开始*/
function theAllViews(){
    $db = Typecho_Db::get();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
        echo number_format($row[0]['SUM(VIEWS)']);
}
/*访问总量代码结束*/
/*响应时间代码开始*/
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime()  );
$timestart = $mtime[1] + $mtime[0];
return true; 
}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime()  );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision  );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display  ) {
    echo $r;
}
return $r;
}
/*响应时间代码结束*/

[scode type=”blue”]然后将以下代码放到/usr/themes/handsome/component/sidebar.php内,找到博客信息添加即可[/scode]

<!--访客总数代码开始-->
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<!--访客总数代码结束-->

<!--响应耗时代码开始-->
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
<!--响应耗时代码结束-->

文章末尾结束线

[scode type=”blue”]将以下代码放到:网站目录/usr/themes/handsome/post.php内的“文章内容”下方[/scode]

end

  <!-------文章end-------->
             <div class="entry-content l-h-2x">
             <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
             <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">感谢阅读,点个赞再走吧~</span>
            </div>

底部版权美化

[scode type=”blue”]下述代码放在:后台-外观-主题设置-开发者设置-博客底部左侧信息 中[/scode]

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="./" title="©2023 银狼技术分享">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">银狼技术分享</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn" target="_blank" title="备案号文字">
<span class="badge-subject">X ICP备</span><span class="badge-value bg-green">XXXXXXXX号</span>
</a>
</div>

[scode type=”blue”]下述代码放在:后台-外观-主题设置-开发者设置-博客底部右侧信息 中[/scode]

<!-- 博客底部右侧信息 -->
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Typecho</span><span class="badge-value bg-blue">强力驱动</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用handsome主题">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

<div class="github-badge">
<a href="https://www.jinrishici.com" target="_blank" title="特别鸣谢今日诗词">
<span class="badge-subject">今日诗词</span><span class="badge-value bg-orange"> API</span>
</a>
</div>

[scode type=”blue”]下述代码放在:后台-外观-主题设置-开发者设置-自定义CSS 中[/scode]

/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.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: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

[scode type=”blue”]将:网站目录/usr/themes/handsome/component/footer.php中的版权信息即红框部分注释或删除,大概在117行附近,可以使用编辑器的搜索功能,为了主题良性发展,最好保留版权信息或者添加主题信息到友链[/scode]

版权

更改一言接口为今日诗词

[scode type=”blue”]网站目录/usr/themes/handsome/index.php,找到红框内的代码并注释或删除,添加绿框内的代码,并且打开一言功能:主题增强功能->增强功能开关->启用一言接口[/scode]
今日诗词

 <!------今日诗词接口------------->
                    <span id="jinrishici-sentence">正在加载今日诗词....</span>
                    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
 <!--------结束------------------>

今日诗词官网:今日诗词

访问密码页面底部版权信息美化

[scode type=”blue”]在:网站目录/usr/themes/handsome/libs下的Lock.php中注释红框部分的代码[/scode]
底部版权
更改后效果如下
效果

网站字体修改

[scode type=”share” size=””]最开始是将字体woff文件放在软件字体中的,尝试下来发现字体(大小为3MB)加载速度较慢,效果不是很理想,因为美化时网站还没有CDN不知道上了CDN之后会不会有改善,因此采用了在head引入字体文件的方法。[/scode]

本站字体为“阿里妈妈方圆体”

官网:阿里妈妈方圆体

官网提供了内嵌代码

内嵌代码

<style>
@font-face {
    font-family: AlimamaFangYuanTiVF-Thin;
    src:url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaFangYuanTiVF/AlimamaFangYuanTiVF-Thin/AlimamaFangYuanTiVF-Thin.eot) format('embedded-opentype'),
url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaFangYuanTiVF/AlimamaFangYuanTiVF-Thin/AlimamaFangYuanTiVF-Thin.otf) format('opentype'),
url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaFangYuanTiVF/AlimamaFangYuanTiVF-Thin/AlimamaFangYuanTiVF-Thin.ttf) format('TrueType'),
url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaFangYuanTiVF/AlimamaFangYuanTiVF-Thin/AlimamaFangYuanTiVF-Thin.woff) format('woff'),
url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaFangYuanTiVF/AlimamaFangYuanTiVF-Thin/AlimamaFangYuanTiVF-Thin.woff2) format('woff2');
}
</style>

[scode type=”blue” size=””]将上述代码放到:主题设置-开发者设置-自定义输出head 头部的HTML代码中即可,同时在:自定义CSS中添加字体设置[/scode]

/* 更换字体 */
body{font-family: 'AlimamaFangYuanTiVF-Thin' ;color:black; }

主题原版的字体为灰色,自我感觉不是很清晰,因此在上面的代码中把字体颜色改为了“黑色”,即color:black;部分,如果不想更改颜色可以去除此语句。

[scode type=”share” size=””]由于本站启用了CDN对字体文件进行了加速,上述美化已经更改为以下内容[/scode]

[scode type=”blue” size=””]将准备好的.woff或者.woff2格式的字体文件放在/themes/handsome/assets/fonts/sourcesanspro目录下,同时在/handsome/assets/css/features目录下的font.min.css中添加以下代码[/scode]

@font-face {
  font-family: 'FangYuanTiVF-Thin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('AlimamaFangYuanTiVF-Thin'), local('AlimamaFangYuanTiVF-Thin'), url('../../fonts/sourcesanspro/AlimamaFangYuanTiVF-Thin.woff2') format('woff2');
}

FangYuanTiVF-Thin和AlimamaFangYuanTiVF-Thin均为字体名称,url(”)单引号内的内容为字体文件的路径

同样的在自定义CSS中添加以下代码进行字体的引入

/* 更换字体 */
body{font-family: 'FangYuanTiVF-Thin' ;color:black; }

同时在主题设置-外观设置-文章字体大小设置中将字体大小改为了“16”px,为了照顾小屏用户,看起来感觉刚刚好,注:本人显示器24寸,笔记本15.6寸

特别鸣谢:

HelloCode

部分内容参考自上述文章

用云无忧
© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容