本篇文章将持续更新 
主题标题居中
开发者设置-自定义css
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}右侧栏博主信息栏和标签云彩色
开发者设置➡自定义JavaScript PJAX➡PJAX回调函数
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}等距标签云
开发者设置➡自定义CSS
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}赞赏和点赞图标跳动
开发者设置➡自定义CSS
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}(顶部)左侧导航多彩图标
开发者设置➡自定义JavaScript PJAX➡PJAX回调函数
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});右侧滚动条美化
开发者设置➡自定义CSS
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}右侧导航图标美化
/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}粗体上色
开发者设置➡自定义CSS
/* 粗体上色 */
strong{
color: rgb(230, 145, 56);
}时光机头像圆形
开发者设置➡自定义CSS
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}Typecho开启Gzip压缩
复制下方代码粘贴到config.inc.php相应位置
/** 开启gzip压缩 */
ob_start('ob_gzhandler');右侧栏加入考研倒计时
在sidebar.php文件的适当位置加入下方的代码
<!-- 考研计时 -->
<h5 class="widget-title m-t-none text-md"></h5>
<div id="lovexhj" style="width: 100%; height: 100%; text-align: center; font-size: 1rem;">
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<div id="wiiuii2"> <h4 id="title-2"><div class="text" style=" text-align:center;font-weight:700;"><alt="网站倒计时" style="border-top-left-radius: 8px;border-top-right-radius: 8px;"><center><br><font color="#E80017">2</font><font color="#D1002E">0</font><font color="#BA0045">2</font><font color="#A3005C">3</font><font color="#8C0073">年</font><font color="#75008A">-</font><font color="#5E00A1">
考</font><font color="#4700B8">研</font><font color="#3000CF">倒</font><font color="#1900E6">计</font><font color="#0200FD">时</font> </center></div></h4> <div><div class="text" style=" text-align:center; padding-bottom: 10px;"> <span id="t_d" style="font-weight:bold;">00 天</span> <span id="t_h" style="font-weight:bold;">00 时</span> <span id="t_m" style="font-weight:bold;">00 分</span> <span id="t_s" style="font-weight:bold;">00 秒</span><br> </div> </div></div><!--
考研倒计时JS--><script type="text/javascript"> var time = new Date("2022-12-25 00:00:00"); countDown(); setInterval(countDown,1000); function countDown(){ var now_time = new Date(); var times = (time-now_time ) /1000; var d = parseInt(times / 3600 / 24); var h = parseInt(times / 3600 % 24); var m = parseInt(times / 60 % 60); var s = parseInt(times % 60); document.getElementById("t_d").innerHTML=d+"天"; document.getElementById("t_h").innerHTML=h+"时"; document.getElementById("t_m").innerHTML=m+"分"; document.getElementById("t_s").innerHTML=s+"秒"; }</script>
</div>
</ul>添加上述代码会造成右栏的字体都居中显示，如果不喜欢居中显示，可将上述代码中的下述代码注释或删除即可
<div id="lovexhj" style="width: 100%; height: 100%; text-align: center; font-size: 1rem;">在右侧栏加入恋爱计时
在sidebar.php文件中适当位置加入下列代码
<!--恋爱计时-->
<h5 class="widget-title m-t-none text-md"></h5>
<div id="lovexhj" style="width: 100%; height: 100%; text-align: center; font-size: 1rem;">
<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3e81b14d-2674-4195-afdb-e4e32359c923/b37935a7-2fb1-4734-9835-fedf5c6167bf.jpg" alt="love"
style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://atbk.oss-cn-shanghai.aliyuncs.com/image/aotian/love.gif" alt="love"
style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3e81b14d-2674-4195-afdb-e4e32359c923/b37935a7-2fb1-4734-9835-fedf5c6167bf.jpg" alt="love"
style="width: 60px; border-radius: 50%;">
</div>
<p id="loveSitetime" style="font-size: 1.0rem;"></p>
<script language=javascript>
function loveSitetime() {
window.setTimeout("loveSitetime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth() + 1
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
// 时间设置
var t1 = Date.UTC(1999, 09, 16, 17, 15, 00)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) - diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
diffMinutes * minutes) / seconds)
document.getElementById("loveSitetime").innerHTML = "已经单身了：</br>" + diffYears + "年" + diffDays + "天" +
diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦</br>"
}
loveSitetime()
</script>
</div>
</ul>在右侧信息栏中加入响应时间和访客总数
将以下代码放到/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>各文件作用
component/aside.php 左边导航栏
component/comments.php 评论区
component/footer.php 底部版权、音乐播放器之类
component/header.php 页面头，没啥要改的
component/headnav.php 顶部导航
component/say.php 时光机动态
component/sidebar.php 右侧栏目
component/third_party_comments.php 3.3.0新增，第三方评论
css/ 博客CSS，一般不要改
fonts/ 博客字体，一般不要改
img/ 图像，一般不要改
js/ js文件，一般不要改
lang/ 语言文件
libs/Content.php 文章内容
libs/... 一般不要改
usr/ 另一个语言文件？
404.php 404界面
archive.php 整合
booklist.php 书单
cross.php 时光机
files.php 归档
functions.php 配置界面的东西
guestbook.php 留言板
index.php 首页
links.php 友链
page.php 文章页面整合
post.php 文章输出
color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色vditor静态资源加速
jsdelivr以及被屏蔽，handsome的vditor静态资源使用的是jsdelivr的CDN，因此更换jsdelivr。
配置文件：/usr/themes/handsome/libs/CDN.php
将这行代码
配置文件：/usr/themes/handsome/libs/CDN.php
将这行代码
https://cdn.jsdelivr.net/npm/vditor@3.8.10替换为了(因为我有cdn，所以弄成这个，大家可以替换为最后的那个代码)
https://cdn.yzlog.top/npm/vditor@3.8.10大家可以把上述的jsdelivr的代码替换为下面这行
https://jsd.sorkai.com/web/npm/vditor@3.8.10删除动态页面中的”关于我“
文件路径：/handsome/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>删除首页文章卡片的作者信息
文件路径：/handsome/libs/Content.php
删除源代码，大约在1028行
删除源代码，大约在1028行
<li>
<span class="m-r-sm right-small-icons"><i data-feather="user"></i></span><a href="{$parameterArray['authorUrl']}">{$parameterArray['author']}</a></li>修改了友链页面，删除了其他内页
用下面的代码全部覆盖links.php
<?php
/**
* 友情链接
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('component/header.php');
?>
<style type="text/css">
</style>
<!-- aside -->
<?php $this->need('component/aside.php'); ?>
<!-- / aside -->
<!-- <div id="content" class="app-content"> -->
<a class="off-screen-toggle hide"></a>
<main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>">
<div class="hbox hbox-auto-xs hbox-auto-sm">
<div class="col center-part" id="post-panel">
<div class="bg-light lter wrapper-md">
<h1 class="entry-title m-n font-thin text-black l-h"><span class="title-icons"><i data-feather="link"></i></span><?php _me
("海内存知己，天涯若比邻")
?></h1>
<?php if (trim($this->fields->intro) !== ""): ?>
<div class="entry-meta text-muted m-b-none small post-head-icon"><?php echo $this->fields->intro; ?></div>
<?php endif ?>
</div>
<div class="wrapper-md">
<div class="tab-container post_tab">
<div class="tab-content">
<!-- list -->
<div id="my-info" class="tab-pane fade in active">
<?php echo Content::returnLinkList("ten","tab_4"); ?>
<div class="wrapper ng-binding" id="post-content">
<?php Content::postContentHtml($this,$this->user->hasLogin()); ?>
</div>
<!--评论-->
<div class="bg-white wrapper border-radius-6">
<?php $this->need('component/comments.php') ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!--首页右侧栏-->
<?php $this->need('component/sidebar.php') ?>
</div>
<!-- /content -->
</main>
<!-- footer -->
<?php $this->need('component/footer.php'); ?>
<!-- / footer -->
首页增加右侧边栏网站公告
文件：/usr/themes/handsome/component/sidebar.php第127行左右，在
<?php while ($tags->next()): ?>
<a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
<?php endwhile; ?>
<?php endif; ?>
</div>
</section>下方增加下列代码
<!--网站公告-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
<h5 class="widget-title m-t-none text-md">网站公告</h5>
<div class="tags l-h-2x">
<!--在这里写公告的内容-->
</div>
</section>在/usr/themes/handsome/libs/Content.php注释了文章标题旁边的阅读模式、朗读、改变字体大小选项代码
本站应用插件：CommentToMail邮件提醒插件、Sticky文章置顶插件
其他设置：本站禁用了和注释了一些用不上的代码，详细禁用步骤请参考主题的使用文档，这里就不多说了
