本篇文章将持续更新

主题标题居中

开发者设置-自定义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
将这行代码

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行

<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文章置顶插件
其他设置:本站禁用了和注释了一些用不上的代码,详细禁用步骤请参考主题的使用文档,这里就不多说了

如果觉得我的文章对你有用,请随意赞赏