个人博客魔改记录,typecho 1.2.0、handsome主题 8.4.1

1. 时光机去除首字放大

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

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

2. 打字输入彩色火花特效

handsome主题在 设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 内添加下述代码

<script type="text/javascript" src="https://cnfox.oss-cn-beijing.aliyuncs.com/icnfox/js/commentTyping.js"></script>

3. 自定义鼠标光标

handsome主题在 设置 - 开发者设置 - 自定义CSS 内添加下述代码
也可自行上传鼠标指针,替换进修改路径内。default是默认光标,pointer是链接鼠标

    /*自定义鼠标*/
    *{
        cursor: url("https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cu
r"),auto !important;
    }
    a,a *,button,button *,.OwO-item,.OwO-logo,.OwO-logo *,.OwO-packages *{
        cursor: url("https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur"),auto !important;
    }

4. 鼠标点击水波/彩球特效

handsome主题在 设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 内添加下述代码

水波特效:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/augerjk/mouse@main/ripple.js"></script>

彩球特效:

<canvas class="fireworks"
    style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;"
    width="2880" height="902"></canvas>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/augerjk/mouse@main/clickfire.js"></script>
<script type="text/javascript">
    "use strict"; function updateCoords(e) {
    pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}

function setParticuleDirection(e) {
    var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t)
} }

function createParticule(e, t) {
    var a = {
};

return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () {
    ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
},a
}

function createCircle(e, t) {
var a = {
};

return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
},a
}

function renderParticule(e) {
for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw()
} }

function animateParticules(e, t) {
for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t))
}

anime.timeline().add( {
targets: n, x: function (e) { return e.endPos.x
},y: function (e) {
return e.endPos.y
},radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule
}).add( {
targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800)
},duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0
}) }

function debounce(e, t) {
var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i)
},t)
} }

var canvasEl = document.querySelector(".fireworks"); if (canvasEl) {
var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2)
},500), render = anime( {
duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
} });

document.addEventListener(tap, function (e) {
 "sidebar"
!== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
}, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
} "use strict";

function updateCoords(e) {
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}

function setParticuleDirection(e) {
var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t)
} }

function createParticule(e, t) {
var a = {
};

return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function () {
ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
},a
}

function createCircle(e, t) {
var a = {
};

return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
},a
}

function renderParticule(e) {
for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw()
} }

function animateParticules(e, t) {
for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t))
}

anime.timeline().add( {
targets: n, x: function (e) { return e.endPos.x
},y: function (e) {
return e.endPos.y
},radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule
}).add( {
targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800)
},duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0
}) }

function debounce(e, t) {
var a; return function () { var n = this, i = arguments; clearTimeout(a), a = setTimeout(function () { e.apply(n, i)
},t)
} }

var canvasEl = document.querySelector(".fireworks"); if (canvasEl) {
var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2)
},500), render = anime( {
duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
} });

document.addEventListener(tap, function (e) {
 "sidebar"
!== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
}, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
};
</script>

5. 鼠标右键菜单

handsome主题在 设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 内添加下述代码
div.usercm ul li a:hover{color:#fff;background:rgba(112,100,154,0.88)}处可以更改颜色
对应网址菜单项目可更改右键菜单选项和地址

<!-- 自定义右键 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

<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(112,100,154,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="/index.php"><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>

6. 复制后提示

handsome主题在 设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 内添加

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

7. Logo玻璃光泽闪动

handsome主题在 设置 - 开发者设置 - 自定义 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;
    }
}

8. 超链接美化

修改/usr/themes/handsome/assets/css/handsome.min.css 删掉下面的内容:

.comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover {
    color: #222;
    border-bottom-color: #222
}

.comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) {
    color: #3f88bf;
    border-bottom-color: #222;
    border-bottom: 1px solid #3f88bf;
    word-wrap: break-word;
    word-break: break-all
}

修改替.external-linkCSS 去除超链接小图标

.external-link svg {
        width: 0px;
        height: 0px;
        vertical-align: 0px;
        margin-left: 0px
}

handsome主题在 设置 - 开发者设置 - 自定义CSS 内添加下述代码

/*超链接特效*/
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
    position: relative;
    margin: auto 4px;
    color: #23b7e5;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: inherit;
    width: inherit;
}

.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
    color: #fff;
}

.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    box-sizing: content-box;
    padding: 0 4px;
    width: 100%;
    height: 100%;
    content: '';
}

.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
    background-color: #23b7e5;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
    border-bottom: 1px solid #23b7e5;
}

.content-copyright {
    overflow: hidden;
}

9. 标签云背景改为彩色

开发者设置 - 自定义JavaScriptPJAX - PJAX回调函数 中均加入以下代码:

<!--彩色标签云-->
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;
});

一些参考引用博客:
https://blog.icolak.com/program/335.html
https://www.huahuaorz.com/post/Typecho-Handsome主题美化/
https://blog.chrxw.com/archives/2019/10/14/338.html
https://www.kancloud.cn/jarvis0912/handsome/1500818
https://sunpma.com/674.html

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