前言

typecho的handsome主题美化

美化过程

1、时光机头像圆形

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

2、logo扫光效果

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/* 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;}}
/*logo扫光结束*/

3、赞赏按钮跳动

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可


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

4、主题标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可


/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

5、页面两侧框架留白间距

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可


/*两侧框架留白间距*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }
    .app.container .app-aside,
    .app.container .app-header {
        max-width: 95%
    }
}
@media (min-width:2048px) {
    .app.container {
        width: 93%
    }
    .app.container .app-aside,
    .app.container .app-header {
        max-width: 93%
    }
}
@media (min-width:1200px) {
    .app.container {
        width: 90%
    }
    .app.container .app-aside,
    .app.container .app-header {
        max-width: 90%
    }
    .app.container .app-footer-fixed {
        max-width: 970px
    }
    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }
    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 90%
    }
}

6、handsome原生入站提示

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部的html代码即可


<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
</script>

7、右侧导航栏

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可


/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

8、博主介绍闪字效果

打开后台-更改外观-设置外观-初级设置-复制代码粘贴至博主的介绍即可


<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> </span>

9、复制版权提示

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可


/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：MintYouth<br>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */

10、鼠标点击特效

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可


/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FA7298"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

11、自定义右键

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body 尾部的HTML代码即可


<!-- 自定义右键 -->
<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(88,130,238,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="https://www.xuemy.cn"><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="https://www.gxsnote.cn/start-page.html"><i class="fontello fontello-emo-tongue"></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>
</body>
</html>

12、彩色标签云及右栏数字

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可


/*彩色标签云代码开始*/
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;
});
/*彩色标签云代码结束*/

13、全局右边栏展示响应时间和访客总数

将以下代码放到/usr/themes/handsome/libs/Content.php的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;
}
/*响应时间代码结束*/

然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，找到博客信息添加即可


<!--访客总数代码开始-->
<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>
<!--响应耗时代码结束-->

14、侧边栏添加二维码

打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后，也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。


<section  id="blog_qrurl" class="widget widget_categories wrapper-md clear">
        <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
          <h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
          <style>
              #qrcode img{
                  max-width: 100%;
              }
              @media (max-width: 767px){
                  #qrcode{
                      display: none;
                  }
              }
          </style>
          <div id="qrcode"></div>
          <script>
            var elText = window.location.href;
            new QRCode(document.getElementById("qrcode"), elText);
          </script>
      </section>

15、全站字数统计

将以下代码放到/usr/themes/handsome/component/sidebar.php的开头


<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，加到合适的位置


<!--全站字数开始-->
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<!--全站字数结束-->

16、文章末END

在主题文件post.php内，文章内容下方加上下面的代码


<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;">END</span>
</div>
<b style="color:red;">红色的字体</b>

17、版权提示

在主题文件post.php内，文章内容下方加上下面的代码


<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>  
<span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
</div>

18、时间流逝

将以下代码加到/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)
}

添加完成后,在到/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()

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


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

19、禁用F12

将一下代码放置在 设置外观=>开发者设置=>JavaScript内


window.oncontextmenu=function(){
        // alert('禁止右键');
        return false;
    }
    // 注意keyCode,code,key区别，推荐使用code，键盘按键查询地址：https://keycode.info/
    // 禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
    window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
        console.log('键盘事件',event)
        if(event.keyCode == 123){
            // document.herf='/banf12.html';
            // window.location.href='/banf12.html';
            // alert('禁止按F12');
            window.event.returnValue = false;
            return false;
        }
        if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
            // alert('禁止按ctrl+shift+i');
            window.event.returnValue = false;
            return false;
        }
        if (event.shiftKey && event.keyCode == 121) {
            // alert('禁止按Shift+F10');
            window.event.returnValue = false;
            return false;
        }
        if ((event.ctrlKey || event.metaKey) && event.keyCode == 83) {
            // alert('禁止按ctrl+s');
            window.event.returnValue = false;
            return false;
        }
    }

20、头像呼吸光环和鼠标悬停旋转放大

开发者设置-自定义css中添加代码即可。


.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;
    }
}

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：


@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }
    to {
        box-shadow: 0 0 16px #f00;
    }
}

21、左侧文章图标和评论头像鼠标悬停旋转


.img-square {
    transition: all 0.3s;
}
.img-square:hover {
    transform: rotate(360deg);
}

22、首页文章列表悬停上浮


.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

23、首页文章列表头图悬停放大并将超出范围隐藏


.index-post-img {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}

24、文章内头图和文章图片悬停放大并将超出范围隐藏


.entry-thumbnail {
    overflow: hidden;
}
#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
#post-content img:hover {
    transform: scale(1.05);
}

25、右侧列表导航栏图标颜色


.glyphicon-fire {
    color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}
.glyphicon-transfer {
    color: #0e5458;
}

26、图片抖动效果


**-webkit-animation**:sucaijiayuan **1s** .**1s** ease both;
**-moz-animation**:tada **1s** .**1s** ease both;
}
@-**webkit**-**keyframes** sucaijiayuan {
0% {
**-webkit-transform**:**scale**(1)
}
10%, 20% {
**-webkit-transform**:**scale**(0.8) **rotate**(-2deg)
}
30%, 50%, 70%, 90% {
**-webkit-transform**:**scale**(1.1) **rotate**(2deg)
}
40%, 60%, 80% {
**-webkit-transform**:**scale**(1.1) **rotate**(-2deg)
}
100% {
**-webkit-transform**:**scale**(1) **rotate**(0)
}

27、Hansome主题专用的UserAgent插件

获取访客真实IP，参考网址：https://doge.uk/coding/useragent-modify.html

28、首页文章版式阴影化


**.panel**{
   **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}
**.panel****:hover**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}
**.panel-small**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}
**.panel-small****:hover**{
    **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
    **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35);
}

29、自定义鼠标样式


**cursor**:**url**(**'鼠标指针图片链接'**), auto;
}
**select**, **input**, **textarea**, **a**, **button** {
    **cursor**:**url**(**'鼠标指针图片链接'**), auto;
}
**input****[disabled]**, **select****[disabled]**, **textarea****[disabled]**, **input****[readonly]**, **select****[readonly]** {
    **cursor**:**url**(**'鼠标指针图片链接'**), auto;
}

30、浏览器动态标题


<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヽ(●-`Д´-)ノ别走啊！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//这里替换为你需要显示的favicon链接");
         document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

31、头像自动旋转


/*
旋转速度请修改3s数值
首页自动旋转
*/
.thumb-lg {
    width: 130px;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
.img-full {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

32、文章版式圆角化


/*
圆角大小可修改15px数值
首页文章版式圆角化
*/
.panel {
    border: none;
    border-radius: 15px;
}
.panel-small {
    border: none;
    border-radius: 15px;
}
.item-thumb {
    border-radius: 15px;
}

33、随机颜色小爱心点击特效


<!--随机颜色小爱心点击特效-->
<script type="text/javascript">
    !function (e, t, a) {
        function r() {
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }
        function n() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) {
                t && t(), o(e)
            }
        }
        function o(e) {
            var a = t.createElement("div");
            a.className = "heart", s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }), t.body.appendChild(a)
        }
        function i(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }
        function c() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
    }(window, document);
</script>

34、滚动条效果


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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;
}

35、修改字体


/* zcool-kuaile-regular */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: regular;
  src: url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot'); /* IE9 Compat Modes */
  src: local('ZCOOL KuaiLe'), local('ZCOOLKuaiLe-Normal'),
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff') format('woff'), /* Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.svg#ZCOOLKuaiLe') format('svg'); /* Legacy iOS */
}
/* 全局字体 */
* {
    font-family: 'ZCOOL KuaiLe';
}

36、局部阴影


/*博客信息-搜索框-幻灯片 阴影*/
.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);
}
/*文章圆角-阴影*/
.panel {
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
    border-radius: 6px!important;
}

37、文章标题居中


/*文章标题居中*/
.panel h2{
    text-align: center;
}
.panel-small h2{
    text-align: center;
}
.panel-picture h3{
    text-align: center;
}
.post-item-foot-icon{
    text-align: center;
}

38、全站页面纯白


/*白色整体背景*/
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;
}

39、标签/博客信息背景颜色


.badge {
    background-color: rgb(0, 0, 0)!important;
}
.post-tags a {
    background-color: #000000;
}

40、左上角博主信息羽毛背景

background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）


/* 羽毛_css */
.dropdown.wrapper {
    background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}

41、等距标签云


/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

42、首页文章列表悬停上浮


/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

43、右侧列表导航栏图标颜色


/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}
#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}
.img-square {
    transition: all 0.3s;
}
.img-square:hover {
    transform: rotate(360deg);
}
.glyphicon-fire {
    color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}
.glyphicon-transfer {
    color: #0e5458;
}

44、鼠标路过头像时放大并旋转


/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle: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;
    }
}

45、评论边框


/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}

46、网站背景添加海浪背景


/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }

添加至后台主题设置-开发者设置-自定义输出head 头部的HTML代码


<!-- 海浪背景 -->
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>

47、标题卖萌


var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "网页已崩溃！";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来了！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

更多参考


handsome主题美化汇总教程
TuJun's Blog

END
本文作者：
 文章标题：【超完整】Handsome主题魔改记录与分享
 本文地址：https://blog.snwl0311.cn/index.php/archives/435/
 版权说明：若无注明，本文皆薄·客原创，转载请保留文章出处。
Last modification：October 13, 2024
© Allow specification reprint
有钱的给钱，没钱的点赞哦，感谢哥哥姐姐厚爱！