请注意，本文编写于 103 天前，最后修改于 8 天前，其中某些信息可能已经过时。
因本人喜欢简洁，所以将原有主题进行简单修改，本文为 Ahui's Blog 博客的简化修改记录及备忘；
主题为handsome
核心为Typecho
文件修改部分
删除闲言碎语
文件路径：/component/headnav.php
将以下代码删除
<!--闲言碎语-->
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
<i data-feather="twitch"></i>
<span class="visible-xs-inline">
<?php _me("闲言碎语") ?>
</span>
<span class="badge badge-sm up bg-danger pull-right-xs"><?php
$read_id = Typecho_Cookie::get('user_read_id');
$latest_time_id = Typecho_Cookie::get('latest_time_id');
//$latest_time_id赋值应该在列表加载的后面
// if (empty($latest_time_id)){
// $latest_time_id = 999999;
// }
if (empty($read_id)){
$read_id = -1;
}
if (!empty($read_id) && !empty($latest_time_id)){
$not_read = $latest_time_id - $read_id;
if ($not_read > 0){
_me("新");
}
}
?></span>
</a>
<!-- dropdown -->
<div class="dropdown-menu w-xl animated fadeInUp">
<div class="panel bg-white">
<div class="panel-heading b-light bg-light">
<strong>
<?php _me("闲言碎语") ?>
</strong>
</div>
<div class="list-group" id="smallRecording">
<?php
$slug = "cross"; //页面缩略名
$limit = 3; //调用数量
$length = 140; //截取长度
$ispage = true; //true 输出slug页面评论，false输出其它所有评论
$isGuestbook = $ispage ? " = " : " <> ";
$db = $this->db; //Typecho_Db::get();
$options = $this->options; //Typecho_Widget::widget('Widget_Options');
$page = $db->fetchRow($db->select()->from('table.contents')
->where('table.contents.created < ?', $options->gmtTime)
->where('table.contents.slug = ?', $slug));
if ($page) {
$type = $page['type'];
$routeExists = (NULL != Typecho_Router::get($type));
$page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#';
$page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index);
$comments = $db->fetchAll($db->select()->from('table.comments')
->where('table.comments.status = ?', 'approved')
->where('table.comments.created < ?', $options->gmtTime)
->where('table.comments.type = ?', 'comment')
->where('table.comments.parent = ?', '0')
->where('table.comments.cid ' . $isGuestbook . ' ?', $page['cid'])
->order('table.comments.created', Typecho_Db::SORT_DESC)
->limit($limit));
$index = 0;
foreach ($comments AS $comment) {
if ($index == 0){
Typecho_Cookie::set('latest_time_id', $comment['coid']);
}
$index ++;
$content = Content::postCommentContent(Markdown::convert($comment['text']),$this->user->hasLogin(),"","","",true);
$content = Content::returnExceptShortCodeContent(trim(strip_tags($content)));
if ($content == ""){
$content = _mt("点击查看详情");
}
echo '<a href="'.BLOG_URL_PHP.'cross.html" class="list-group-item"><span class="clear block m-b-none words_contents">'.Content::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'],
$this->options->commentDateFormat).'</small></span></a>';
}
} else {
echo '<a target="_blank" href="'.BLOG_URL.'admin/write-page.php" class="list-group-item"><span class="clear block m-b-none">这是一条默认的说说，如果你看到这条动态，请去后台新建独立页面，地址填写cross,自定义模板选择时光机。具体说明请参见主题的使用攻略。<br><small class="text-muted">'.date("F jS, Y \a\t h:i a",time()+($this->options->timezone - idate("Z"))).'</small></span></a>';
}
?>
</div>
</div>
</div>
</li>
<!--/闲言碎语-->搜索框移到右侧
文件路径：/component/headnav.php
搜索 navbar-left 改为 navbar-right
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-right shift" method="post"
role="search">删除动态中的“关于我”
文件路径：/cross.php
删除以下代码：
<div class="panel box-shadow-wrap-normal">
<h4 class="font-thin padder"><?php _me("关于我") ?></h4>
<ul class="list-group">
<li class="list-group-item">
<p><?php $this->options->about() ?></p>
</li>
</ul>
</div>JavaScript部分
打字粒子特效
将下方JavaScript代码放入该放的地方；此特效仅为handsome做了适配，支持搜索框和评论框打字出现无震动彩色粒子；
/*打字特效*/
(function webpackUniversalModuleDefinition(a, b) {
if (typeof exports === "object" && typeof module === "object") {
module.exports = b()
} else {
if (typeof define === "function" && define.amd) {
define([], b)
} else {
if (typeof exports === "object") {
exports["POWERMODE"] = b()
} else {
a["POWERMODE"] = b()
}
}
}
})(this, function () {
return (function (a) {
var b = {};
function c(e) {
if (b[e]) {
return b[e].exports
}
var d = b[e] = {
exports: {},
id: e,
loaded: false
};
a[e].call(d.exports, d, d.exports, c);
d.loaded = true;
return d.exports
}
c.m = a;
c.c = b;
c.p = "";
return c(0)
})([function (c, g, b) {
var d = document.createElement("canvas");
d.width = window.innerWidth;
d.height = window.innerHeight;
d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
window.addEventListener("resize", function () {
d.width = window.innerWidth;
d.height = window.innerHeight
});
document.body.appendChild(d);
var a = d.getContext("2d");
var n = [];
var j = 0;
var k = 120;
var f = k;
var p = false;
o.shake = true;
function l(r, q) {
return Math.random() * (q - r) + r
}
function m(r) {
if (o.colorful) {
var q = l(0, 360);
return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
} else {
return window.getComputedStyle(r).color
}
}
function e() {
var t = document.activeElement;
var v;
//(t.tagName === "INPUT" && t.getAttribute("type") === "text")||(t.tagName === "INPUT" && t.getAttribute("type") === "search")
if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")||(t.tagName === "INPUT" && t.getAttribute("type") === "search") ) {
var u = b(1)(t, t.selectionStart);
v = t.getBoundingClientRect();
return {
x: u.left + v.left,
y: u.top + v.top,
color: m(t)
}
}
var s = window.getSelection();
if (s.rangeCount) {
var q = s.getRangeAt(0);
var r = q.startContainer;
if (r.nodeType === document.TEXT_NODE) {
r = r.parentNode
}
v = q.getBoundingClientRect();
return {
x: v.left,
y: v.top,
color: m(r)
}
}
return {
x: 0,
y: 0,
color: "transparent"
}
}
function h(q, s, r) {
return {
x: q,
y: s,
alpha: 1,
color: r,
velocity: {
x: -1 + Math.random() * 2,
y: -3.5 + Math.random() * 2
}
}
}
function o() {
var t = e();
var s = 5 + Math.round(Math.random() * 10);
while (s--) {
n[j] = h(t.x, t.y, t.color);
j = (j + 1) % 500
}
f = k;
if (!p) {
requestAnimationFrame(i)
}
if (o.shake) {
var r = 1 + 2 * Math.random();
var q = r * (Math.random() > 0.5 ? -1 : 1);
var u = r * (Math.random() > 0.5 ? -1 : 1);
document.body.style.marginLeft = q + "px";
document.body.style.marginTop = u + "px";
setTimeout(function () {
document.body.style.marginLeft = "";
document.body.style.marginTop = ""
}, 75)
}
}
o.colorful = false;
function i() {
if (f > 0) {
requestAnimationFrame(i);
f--;
p = true
} else {
p = false
}
a.clearRect(0, 0, d.width, d.height);
for (var q = 0; q < n.length; ++q) {
var r = n[q];
if (r.alpha <= 0.1) {
continue
}
r.velocity.y += 0.075;
r.x += r.velocity.x;
r.y += r.velocity.y;
r.alpha *= 0.96;
a.globalAlpha = r.alpha;
a.fillStyle = r.color;
a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
}
}
requestAnimationFrame(i);
c.exports = o
}, function (b, a) {
(function () {
var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
var e = window.mozInnerScreenX != null;
function c(k, l, o) {
var h = o && o.debug || false;
if (h) {
var i = document.querySelector("#input-textarea-caret-position-mirror-div");
if (i) {
i.parentNode.removeChild(i)
}
}
var f = document.createElement("div");
f.id = "input-textarea-caret-position-mirror-div";
document.body.appendChild(f);
var g = f.style;
var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
g.whiteSpace = "pre-wrap";
if (k.nodeName !== "INPUT") {
g.wordWrap = "break-word"
}
g.position = "absolute";
if (!h) {
g.visibility = "hidden"
}
d.forEach(function (p) {
g[p] = j[p]
});
if (e) {
if (k.scrollHeight > parseInt(j.height)) {
g.overflowY = "scroll"
}
} else {
g.overflow = "hidden"
}
f.textContent = k.value.substring(0, l);
if (k.nodeName === "INPUT") {
f.textContent = f.textContent.replace(/\s/g, "\u00a0")
}
var n = document.createElement("span");
n.textContent = k.value.substring(l) || ".";
f.appendChild(n);
var m = {
top: n.offsetTop + parseInt(j["borderTopWidth"]),
left: n.offsetLeft + parseInt(j["borderLeftWidth"])
};
if (h) {
n.style.backgroundColor = "#aaa"
} else {
document.body.removeChild(f)
}
return m
}
if (typeof b != "undefined" && typeof b.exports != "undefined") {
b.exports = c
} else {
window.getCaretCoordinates = c
}
}())
}])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);点击烟花特效
方式一：本站使用，有防盗链
<script type="text/javascript" src="https://cdn.thtown.cn/JS/yanhua.js"></script>方式二：代码
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);
if (canvas.getContext && window.addEventListener) {
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e) {
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function() {
document.body.classList.add("is-longpress");
longPressed = true;
}, 500);
}, false);
window.addEventListener("mouseup", function(e) {
clearInterval(longPress);
if (longPressed == true) {
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
}
document.body.classList.remove("is-pressed");
}, false);
window.addEventListener("mousemove", function(e) {
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
}, false);
} else {
console.log("canvas or addEventListener is unsupported!");
}
function updateSize() {
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(2, 2);
width = (canvas.width = window.innerWidth);
height = (canvas.height = window.innerHeight);
origin = {
x: width / 2,
y: height / 2
};
normal = {
x: width / 2,
y: height / 2
};
}
class Ball {
constructor(x = origin.x, y = origin.y) {
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
if (longPressed == true) {
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
} else {
this.multiplier = randBetween(6, 12);
}
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
this.r = randBetween(8, 12) + 3 * Math.random();
this.color = colours[Math.floor(Math.random() * colours.length)];
}
update() {
this.x += this.vx - normal.x;
this.y += this.vy - normal.y;
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
this.r -= 0.3;
this.vx *= 0.9;
this.vy *= 0.9;
}
}
function pushBalls(count = 1, x = origin.x, y = origin.y) {
for (let i = 0; i < count; i++) {
balls.push(new Ball(x, y));
}
}
function randBetween(min, max) {
return Math.floor(Math.random() * max) + min;
}
function loop() {
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.r < 0) continue;
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
ctx.fill();
b.update();
}
if (longPressed == true) {
multiplier += 0.2;
} else if (!longPressed && multiplier >= 0) {
multiplier -= 0.4;
}
removeBall();
requestAnimationFrame(loop);
}
function removeBall() {
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
balls.splice(i, 1);
}
}
}
}
clickEffect();//调用网站飘枫叶
var stop, staticx;
var img = new Image();
img.src = "https://cdn.thtown.cn/images/202202251325420webp"; //有防盗链，使用前替换为你的
function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 20 * this.s / 2;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
cxt.restore()
}
;
Sakura.prototype.update = function() {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
this.r = getRandom("fnr");
if (Math.random() > 0.4) {
this.x = getRandom("x");
this.y = 0;
this.s = getRandom("s");
this.r = getRandom("r")
} else {
this.x = window.innerWidth;
this.y = getRandom("y");
this.s = getRandom("s");
this.r = getRandom("r")
}
}
}
;
SakuraList = function() {
this.list = []
}
;
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura)
}
;
SakuraList.prototype.update = function() {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update()
}
}
;
SakuraList.prototype.draw = function(cxt) {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt)
}
}
;
SakuraList.prototype.get = function(i) {
return this.list[i]
}
;
SakuraList.prototype.size = function() {
return this.list.length
}
;
function getRandom(option) {
var ret, random;
switch (option) {
case "x":
ret = Math.random() * window.innerWidth;
break;
case "y":
ret = Math.random() * window.innerHeight;
break;
case "s":
ret = Math.random();
break;
case "r":
ret = Math.random() * 4;
break;
case "fnx":
random = -0.5 + Math.random() * 1;
ret = function(x, y) {
return x + 0.5 * random - 1.7
}
;
break;
case "fny":
random = 1.5 + Math.random() * 0.7;
ret = function(x, y) {
return y + random
}
;
break;
case "fnr":
random = Math.random() * 0.03;
ret = function(r) {
return r + random
}
;
break
}
return ret
}
function startSakura() {
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
var canvas = document.createElement("canvas"), cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
canvas.setAttribute("id", "canvas_sakura");
document.getElementsByTagName("body")[0].appendChild(canvas);
cxt = canvas.getContext("2d");
var sakuraList = new SakuraList();
for (var i = 0; i < 50; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom("x");
randomY = getRandom("y");
randomR = getRandom("r");
randomS = getRandom("s");
randomFnx = getRandom("fnx");
randomFny = getRandom("fny");
randomFnR = getRandom("fnr");
sakura = new Sakura(randomX,randomY,randomS,randomR,{
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
sakuraList.push(sakura)
}
stop = requestAnimationFrame(function() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
stop = requestAnimationFrame(arguments.callee)
})
}
window.onresize = function() {
var canvasSnow = document.getElementById("canvas_snow")
}
;
img.onload = function() {
startSakura()
}
;
function stopp() {
if (staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false
} else {
startSakura()
}
}
;版权相关禁止F12
window.onkeydown = function (e) {
// 屏蔽ctrl+s 保存
if (e.ctrlKey && e.keyCode == 83) {
layer.msg('您好，本站禁止使用Ctrl+S');
e.preventDefault();
e.returnValue = false;
return false;
}
// 屏蔽ctrl+p 打印
if (e.ctrlKey && e.keyCode == 80) {
layer.msg('您好，本站禁止使用Ctrl+P');
e.preventDefault();
e.returnValue = false;
return false;
}
}
// 复制提示
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
// 屏蔽F12
document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("F12被禁用");
event.keyCode=0;
event.returnValue=false;
}
}鼠标点击特效
<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>CSS部分
手机不显示热门及标签云（本站取消使用）
将下方CSS样式代码放入相应位置；
/*手机不显示热门及标签云*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
粗体上色
/* 粗体上色 */
strong{
color: rgb(255, 153, 0);
}时光机圆形头像
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}引入文章图片居中
/*引入文章图片居中*/
.post-inser .inner-image{
background-position-x:center;
background-position-y:center;
background-repeat:no-repeat;
}全站引入HarmonyOS_Sans_SC_Medium字体
/*全站字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap;
src:url(字体链接) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium}
body {font-family: HarmonyOS!important;}添加鼠标样式
/*鼠标指针*/
body {
cursor: url(链接), default;
}
a:hover{cursor:url(链接), pointer;}