个人博客魔改记录,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-link
CSS 去除超链接小图标
.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. 标签云背景改为彩色
在开发者设置
- 自定义JavaScript
和PJAX
- 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