共计 15587 个字符，预计需要花费 39 分钟才能阅读完成。
主题配置
主题色调自定义搭配
white-white-white背景颜色
#efefef博主介绍动态彩色打字效果
<html>
<head></head>
<body>
<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>
</body>
</html>左侧导航栏配置
{"name":" 引导页 ","class":"glyphicon glyphicon-star","link":"https://","target":"_blank"},
{"name":" 知识库 ","class":"glyphicon glyphicon-book","link":"https://","target":"_blank"},
{"name":" 导航站 ","class":"glyphicon glyphicon-globe","link":"https://","target":"_blank"},
{"name":" 留言板 ","class":"glyphicon glyphicon-comment","link":"https://"},
{"name":" 时间轴 ","class":"glyphicon glyphicon-time","link":"https://"},
{"name":" 追番剧 ","class":"glyphicon glyphicon-film","link":"https://"},
{"name":" 相片薄 ","class":"glyphicon glyphicon-picture","link":"https://"},
{"name":" 云存储 ","class":"glyphicon glyphicon-hdd","link":"https://"},
{"name":" 壁纸库 ","class":"glyphicon glyphicon-leaf","link":"","target":"_blank"},顶部导航栏配置
{"name":"talk","status":"hide"} // 隐藏闲言碎语彩色标签云
代码添加到 PJAX 回调和开发者设置 -> 自定义 JavaScript 中
<!-- 彩色标签云 -->
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 回调和开发者设置 -> 自定义 JavaScript 中
<!-- 彩色数量标签背景 -->
let badges= document.querySelectorAll(".badge");
badges.forEach(badge => {badgeColor = colorArr[Math.floor(Math.random() * colorArr.length)];
badge .style.backgroundColor = badgeColor ;
});左侧彩色图标
代码添加到 PJAX 回调和开发者设置 -> 自定义 JavaScript 中
<!-- 左侧彩色图标 -->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});优化彩色标签文字在夜间模式的显示
代码添加到开发者设置 -> 自定义 CSS 中
@media (prefers-color-scheme: dark) {
html.theme-dark .badge {color:white}
}文章标题居中
代码添加到开发者设置 -> 自定义 CSS 中
/* 主题标题居中 */
header.bg-light.lter.wrapper-md {text-align: center;}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;}}自定义右键
代码添加到开发者设置 -> 自定义输出 body 尾部的 HTML 代码
<!-- 自定义右键 -->
<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(170,222,18,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://blog.icolak.com"><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="https://blog.icolak.com/friendlink.html"><i class="fa fa-meh-o fa-fw"></i><span> 友链申请 </span></a></li>
<li><a href="https://blog.icolak.com/guestbook.html"><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>复制成功提示
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: " 尊重原创，转载请注明出处！<br> 本文作者：苏为歌 <br> 原文链接：<br>"+sitesurl,
title: " 复制成功 ",
type: "success",
autoHide: !1,
time: "5000"
})
}}
/* 复制成功提示代码结束 */手机端不显示热门文章和标签云
/* 手机不显示 */
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {display: none;}
}万能的控制台
<!-- 输出控制台 -->
<script type="text/javascript">
console.clear(); // 清空控制台
console.log("\n %c iColak's Blog 控制台 -- 没什么可看的 ","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;"); // 万能控制台，可写 html 代码
</script>首页文章上浮
开发者设置 -> 自定义 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);
}
.blog-post .panel-small:not(article) {transition: all 0.3s;}
.blog-post .panel-small:not(article):hover {transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:not(article) {transition: all 0.3s;}
.blog-post .panel-picture:not(article):hover {transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}修改 h1，h2 标题背景颜色
开发者设置 -> 自定义 css中添加代码
/* 文章页 h 标签背景颜色修改 */
#post-content h1, #post-content h2 {background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}鼠标点击特效
开发者设置 -> 自定义尾部 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>自定义页面
每日一读
- 创建页面，名称随意
- 内容填写
<img src="http://api.03c3.cn/zb" />即可
魔改主题
响应时间和访客总数
-
将以下代码放到
/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> <!-- 响应耗时代码结束 -->
心知天气
- 登录 知心天气官网 注册申请免费 API 密钥
-
将以下代码放入
/usr/themes/handsome/component/headnav.php第 180 行左右<?php echo $headerItemsOutput; ?>之后并更换你的公钥秘钥即可<!-- 心知天气 --> <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div> <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script> <script>tpwidget("init", { "flavor": "slim", "location": "WX4FBXXFKE4F", "geolocation": "enabled", "language": "auto", "unit": "c", "theme": "chameleon", "container": "tp-weather-widget", "bubble": "enabled", "alarmType": "badge", "color": "#C6C6C6", "uid": " 公钥 ", "hash": " 密钥 " }); tpwidget("show");</script> <!-- 心知天气 -->
美化主页小头图版式
记得备份
在handsome/libs/Content.php文件中
<div class="panel-small single-post box-shadow-wrap-normal">
<div class="index-post-img-small post-feature index-img-small">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
</a>
</div>替换为：
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
</a>
</div>
<div class="tt-blur-img lazy" {$backgroundImageHtml}></div>设置外观→开发者设置→自定义 CSS，填入以下 css 样式：
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}[scode type="share"]教程来自：听闻 ALL in game[/scode]
增加文章底部版权信息
复制下面代码到你服务器文件路径 usr/themes/handsome/post.php 文件 86 行左右 <?php echo PostContent::exportPostFooter($this->modified,$this->options->timezone - idate("Z"),$this); ?> 之后放置代码即可.
<!-- 版权声明开始 -->
<div class="entry-content l-h-2x">
<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><br></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->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a> 原创，转载请保留文章出处。</span>
</div>
</div>
<!-- 版权声明结束 -->优化文章页面包屑导航
[post cid="380" cover="https://blog.static.icolak.com/typecho/2022/05/03/breadnvaimg.jpg?x-oss-process=style/blog"/]
网站底部增加已运行时间
[post cid="391" cover="https://blog.static.icolak.com/typecho/2022/05/03/uptime.jpg?x-oss-process=style/blog"/]
取消时光机文字首字放大效果
修改 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;
}正文完
