Typecho主题Handsome修改记录---（持续更新）

BinGo_Blog

发布于 2022-11-01 16:23:48

1.2K0

发布于 2022-11-01 16:23:48

文章被收录于专栏：BinGo's Blog

本博文持续更新～

有问题请在本博留言～

美化记录

本博一键美化插件

展开

看本博客效果～只要安装后就不需要手动修改了

目前实现的功能

iframe视频文章嵌入优化
iframe视频短代码插入
响应耗时和访客总数（全站字数放弃，减少服务器压力）
右侧边栏时光流逝模块
顶部导航显示心知天气
左侧目录彩色图标
右侧彩色标签和彩色标签云
鼠标经过头像旋转放大
鼠标点击特效
文章标题居中
LOGO扫光
复制成功提示
H1/H2标题背景颜色设置
打赏按钮跳动效果
移动端隐藏标签云和博客信息
首页文章鼠标经过上浮
网站运行时间
文章end标识 (new)
文章二维码 (new)
文章底部增加百度手动推送按钮 (new)（由于网上的百度收录检测方法基本失效，改为手动推送）(new)
全站黑白 (new)
文章底部版权提示 (new)
评论边框和阴影 (new)
评论头像呼吸效果 (new)
文章页头图悬浮效果 (new)
优化首页轮播图样式
动态背景 (new)
移动端隐藏动态背景开关
夜间模式隐藏动态背景开关
静态壁纸设置
文章页广告位和评论列表广告位

此处内容需要评论回复后（审核通过）方可阅读。

底部页脚美化

展开

效果

步骤

usr/themes/handsome/component/footer.php删代码至如图所示

开发者设置➡自定义CSS

/*底部页脚*/
.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
}

开发者设置➡博客底部左侧信息

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-orange">©2022 BinGo's Blog</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn/">
     <span class="badge-subject">闽ICP备</span>
     <span class="badge-value bg-green">2020020013号</span>
</a>

开发者设置➡博客底部右侧信息

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-purple">Typecho</span>
</a>

头像羽毛背景

展开

效果看左侧头像

开发者设置➡自定义css

/*羽毛_css*/
.dropdown.wrapper {
    background:url(https://www.zh996.com/usr/uploads/imag/625eea1c678ff.webp) right bottom no-repeat;
}

博主介绍闪字效果

展开

主题设置➡初级设置➡博主的介绍

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

左侧导航栏

展开

{"name":"说说","class":"message-circle","link":"https://www.zh996.com/cross.html","target":"_blank"},
{"name":"朋友","class":"link","link":"https://www.zh996.com/Links.html","target":"_blank"},
{"name":"归档","class":"archive","link":"https://www.zh996.com/archive.html","target":"_blank"},
{
    "name": "工具",
    "class": "tool",
    "sub": [{
        "name": "简历",
        "class": "calendar",
        "link": "https://cv.zh996.com",
        "target":"_self"
    }, {
        "name": "Tool",
        "class": "tool",
        "link": "https://tool.zh996.com",
        "target":"_self"
    }, {
        "name": "解密",
        "class": "lock",
        "link": "https://jm.zh996.com",
        "target":"_self"
    }]
}

顶部导航栏

展开

{"name":"talk","status":"hide"} // 隐藏闲言碎语

取消时光机文字首字放大效果

展开

修改usr/themes/handsome/component/say.php文件，将以下代码注释掉

#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
    font-size: 140%;
    /* float: left; */
    vertical-align: middle;
}

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

展开

开发者设置➡自定义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;
    }
}

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

展开

开发者设置➡自定义css

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

文章内打赏图标跳动

展开

开发者设置➡自定义css

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

彩色标签云

展开

开发者设置➡自定义js

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax，还需要将上面代码添加到pjax回调函数中

首页文章列表悬停上浮

展开

开发者设置➡自定义css

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

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

展开

开发者设置➡自定义css

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

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

展开

开发者设置➡自定义css

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

右侧列表导航栏图标颜色

展开

开发者设置➡自定义css

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

首页文章版式阴影化

展开

#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.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);
}

#如果也想使盒子四周也有阴影，加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

文本框打字机特效

展开

开发者设置 ➡️ 自定义输出body 尾部的HTML代码

<!--文本框打字机特效-->
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>

禁用右键和控制台调试

展开

禁用F12和右键，自定义尾部html加入，这里引入sweetalert.min.js这个弹框美化包

<script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
<script type="text/javascript">
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        swal({
            text: '禁止F12~',
            icon: 'error',
            button: false,
            timer: 2000
        });
        event.keyCode = 0;
        event.returnValue = false;
        return false;
    }
};
document.oncontextmenu=function (){
    swal({
        text: '禁止右键~',
        icon: 'error',
        button: false,
        timer: 2000
    });
    return!1;
};
</script>

禁止控制台调试：自定义JS中加入

// 禁止调试
(function noDebuger() {
    function testDebuger() {
        var d = new Date();
        debugger;
        if (new Date() - d > 10) {
            document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" target="_blank" style="color:#4285f4;">点击返回</a>试试吧~</div>';
            return true;
        }
        return false;
    }
    function start() {
        while (testDebuger()) {
            testDebuger();
        }
    }
    if (!testDebuger()) {
        window.onblur = function () {
            setTimeout(function () {
                start();
            }, 500)
        }
    }else {
        start();
    }
})();

鼠标点击特效

开发者设置->自定义尾部html中添加代码

点击展开

<script type="text/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": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

腾讯云开发者社区

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

腾讯云开发者社区

css

登录后参与评论

0 条评论

热度