AI摘要

博客美化技巧：自定义CSS和JavaScript实现头像旋转、赞赏按钮跳动等功能。

此内容根据文章生成，仅用于文章内容的解释与总结

前言

最近觉得博客有点单调，所以想美化一下

美化

首页头像鼠标悬停旋转

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*头像呼吸光环和鼠标悬停旋转 开始 */
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #22ACD6;
    }
    50% {
        box-shadow: 0 0 16px #22ACD6;
    }
    100% {
        box-shadow: 0 0 4px #22ACD6;
    }
}
/*头像呼吸光环和鼠标悬停旋转 结束 */

文章赞赏按钮跳动

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*赞赏按钮跳动开始*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}
/*赞赏按钮跳动结束*/

转载提醒

点击打开查看

  1. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出head 头部的HTML代码

    <!--转载提醒-->
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

  2. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 JavaScript

    <!--转载提醒-->
document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接！');};

效果预览：

请输入图片描述

时间流逝

点击打开查看

  1. 将下面代码加到 /usr/themes/handsome/component/sidebar.php的放在 <?php endif; ?> 后面，大概150行左右

    <!-- 时间倒计时代码开始 -->
 <section id="blog_info" class="widget widget_categories wrapper-md clear">
     <h5 class="widget-title m-t-none text-md"><?php _me("时间流逝") ?></h5>
 <div class="sidebar sidebar-count">
     <div class="content">
         <div class="item" id="dayProgress">
             <div class="title">今日已经过去<span></span>小时</div>
             <div class="progress">
                 <div class="progress-bar">
                     <div class="progress-inner progress-inner-1"></div>
                 </div>
                 <div class="progress-percentage"></div>
             </div>
         </div>
         <div class="item" id="weekProgress">
             <div class="title">这周已经过去<span></span>天</div>
             <div class="progress">
                 <div class="progress-bar">
                     <div class="progress-inner progress-inner-2"></div>
                 </div>
                 <div class="progress-percentage"></div>
             </div>
         </div>
         <div class="item" id="monthProgress">
             <div class="title">本月已经过去<span></span>天</div>
             <div class="progress">
                 <div class="progress-bar">
                     <div class="progress-inner progress-inner-3"></div>
                 </div>
                 <div class="progress-percentage"></div>
             </div>
         </div>
         <div class="item" id="yearProgress">
             <div class="title">今年已经过去<span></span>个月</div>
             <div class="progress">
                 <div class="progress-bar">
                     <div class="progress-inner progress-inner-4"></div>
                 </div>
                 <div class="progress-percentage"></div>
             </div>
         </div>
     </div>
 </div>
      </section>
 <!-- 时间倒计时代码结束 -->

  2. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS

    /* 时间流逝 开始 */
.sidebar-count .content {
 padding: 15px
}

.sidebar-count .content .item {
 margin-bottom: 15px
}

.sidebar-count .content .item:last-child {
 margin-bottom: 0
}

.sidebar-count .content .item .title {
 font-size: 12px;
 color: var(--minor);
 margin-bottom: 5px;
 display: flex;
 align-items: center
}

.sidebar-count .content .item .title span {
 color: var(--theme);
 font-weight: 500;
 font-size: 14px;
 margin: 0 5px
}

.sidebar-count .content .item .progress {
 display: flex;
 align-items: center
}

.sidebar-count .content .item .progress .progress-bar {
 height: 10px;
 border-radius: 5px;
 overflow: hidden;
 background: var(--classC);
 width: 0;
 min-width: 0;
 flex: 1;
 margin-right: 5px
}
@keyframes progress {
 0% {
     background-position: 0 0
 }

 100% {
     background-position: 30px 0
 }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
 width: 0;
 height: 100%;
 border-radius: 5px;
 transition: width 0.35s;
 -webkit-animation: progress 750ms linear infinite;
 animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
 background: #bde6ff;
 background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
 background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
 background: #ffd980;
 background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
 background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
 background: #ffa9a9;
 background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
 background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
 background: #67c23a;
 background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
 background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
 color: var(--info)
}
/* 时间流逝 结束 */

  3. 打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出body 尾部的HTML代码

    <!-- 时间流逝 -->  
<script src="https://自己的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

  4. 打开网站的/usr/themes/handsome/assets/js目录，新建一个名为timeinfo.js的文件，复制代码到里面

    function init_life_time() {
         function getAsideLifeTime() {
             /* 当前时间戳 */
             let nowDate = +new Date();
             /* 今天开始时间戳 */
             let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
             /* 今天已经过去的时间 */
             let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
             /* 今天已经过去的时间比 */
             let todayPassHoursPercent = (todayPassHours / 24) * 100;
             $('#dayProgress .title span').html(parseInt(todayPassHours));
             $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
             $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
             /* 当前周几 */
             let weeks = {
                 0: 7,
                 1: 1,
                 2: 2,
                 3: 3,
                 4: 4,
                 5: 5,
                 6: 6
             };
             let weekDay = weeks[new Date().getDay()];
             let weekDayPassPercent = (weekDay / 7) * 100;
             $('#weekProgress .title span').html(weekDay);
             $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
             $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
             let year = new Date().getFullYear();
             let date = new Date().getDate();
             let month = new Date().getMonth() + 1;
             let monthAll = new Date(year, month, 0).getDate();
             let monthPassPercent = (date / monthAll) * 100;
             $('#monthProgress .title span').html(date);
             $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
             $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
             let yearPass = (month / 12) * 100;
             $('#yearProgress .title span').html(month);
             $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
             $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
         }
         getAsideLifeTime();
         setInterval(() => {
             getAsideLifeTime();
         }, 1000);
     }
     init_life_time()

文末END及版权提示

点击打开查看

  1. END

    将下面代码加到 /usr/themes/handsome/post.php的放在 <?php if ($this->options->adContentPost != ""): ?> 前面，大概79行左右

    <div class="entry-content l-h-2x">
 <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
 <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>

  2. 将下面代码加到 /usr/themes/handsome/post.php的放在 <?php if ($this->options->adContentPost != ""): ?> 前面，刚刚END代码的后面

    <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 14px;border-left: 3px solid;text-align: left;">
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></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->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
</div>

请输入图片描述

效果预览：

请输入图片描述

博客信息内的访客总数及响应耗时

点击打开查看

将下面代码加到 /usr/themes/handsome/functions.php的放在文件最下面

/*访问总量代码开始*/
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>
<!--响应耗时代码结束-->

效果预览：

请输入图片描述

404页面自动返回首页

点击打开查看

然后将以下代码放到 /usr/themes/handsome/404.php 内<div class="list-group bg-info auto m-b-sm m-b-lg"> 前面，添加下方代码，大概在93行，返回羡逍遥首页 替换成自己的站点名

<div class="juzhong404">
    <p>页面将在 0<span id="countdown">5</span> 秒后返回羡逍遥首页</p>
    <p> <span class="xiaoshou404" onclick="immediateReturn()">立即返回上一页</span></p>
</div>

接着在文件最下面添加下方代码

<script>
    let countdown = 5; // 倒计时初始值
    let countdownElement;

    function updateCountdown() {
        countdownElement.innerText = countdown;
        if (countdown > 0) {
            countdown--;
            setTimeout(updateCountdown, 1000);
        } else {
            // 5秒后返回上一页
            // window.history.back();
            // 5秒后返回首页
            window.location.href = 'https://lyj15.cn';
        }
    }

    function immediateReturn() {
        // 点击立即返回按钮，直接返回上一页
        window.history.back();
        // 点击 OneMuggle首页，直接返回首页
        // window.location.href = 'https://lyj15.cn';
    }

    window.onload = function() {
        countdownElement = document.getElementById('countdown');
        updateCountdown(); // 开始倒计时
    };
</script>
<style>
    .xiaoshou404 {
        cursor: pointer;
        color: #666666;
    }
    .juzhong404{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5px;
        color: #888888;
    }
</style>

效果预览：

请输入图片描述

handsome原生入站提示

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部代码

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})

</script>

评论一键赞、踩、打卡

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript

<!--评论 打卡、赞、踩 功能开始-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED，用于存放编辑器功能

// ... (existing code)

// 定义一个函数 a，用于在文本框中插入文字
function a(a, b, c) {
  if (document.selection) {
    a.focus();
    sel = document.selection.createRange();
    c ? (sel.text = b + sel.text + c) : (sel.text = b);
    a.focus();
  } else if (a.selectionStart || "0" == a.selectionStart) {
    var l = a.selectionStart;
    var m = a.selectionEnd;
    var n = m;
    c
      ? (a.value =
          a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length))
      : (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length));
    c ? (n += b.length + c.length) : (n += b.length - m + l);
    l == m && c && (n -= c.length);
    a.focus();
    a.selectionStart = n;
    a.selectionEnd = n;
  } else {
    a.value += b + c;
    a.focus();
  }
}

window.SIMPALED.Editor = {
 daka: function() {
    var b = new Date().toLocaleTimeString();
    var c = document.getElementById("comment") || 0;
    a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~<br>");

    // 将光标移到文本最后
    if (c.setSelectionRange) {
      var len = c.value.length;
      c.setSelectionRange(len, len);
      c.focus();
    } else if (c.createTextRange) {
      var range = c.createTextRange();
      range.collapse(false);
      range.select();
      c.focus();
    }
  },

  zan: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 这篇文章展现了作者深邃的思想和独特的观点，令人赞叹不已。 ::coolapk:96:: <br>",
      " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动，实在值得赞美。 ::coolapk:96:: <br>",
      " 作者以敏锐的洞察力和真挚的情感，将文字融为一体，这种写作技巧令人赞赏。 ::coolapk:96:: <br>",
      " 这篇文章展现了作者的才华和学识，无不让人对其赞美有加。 ::coolapk:96:: <br>",
      " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ::coolapk:96:: <br> ",
      " 作者的文字流畅而富有节奏感，令人为之倾倒，实在是一篇令人赞美的佳作。 ::coolapk:96:: <br>",
      " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::coolapk:96:: <br>",
      " 这篇文章的独到见解和新颖观点，让人对作者的创意赞美有加。 ::coolapk:96:: <br>",
      " 作者运用生动的比喻和细腻的描写，让读者仿佛身临其境，实在是一种令人赞美的写作艺术。 ::coolapk:96:: <br>",
      " 这篇文章的深情笔触和真挚感受让人深深感叹，实在是一篇值得赞美的美文。 ::coolapk:96:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  cai: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 我是来替大家批评博主的，我是来批评的，这篇文章的结构有点混乱，需要更好地组织和展开内容。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的表达能力有待提高，有些地方表述不够清晰，读者可能会感到困惑。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章的语法错误较多，建议仔细检查并进行修改。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，内容有些空洞，需要更多具体的例子或细节来支撑观点。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏逻辑，有些段落之间的衔接不够自然。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，作者的观点没有充分论证，需要更多的证据和理由来支持主张。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章中出现了一些拼写错误和用词不当的情况，建议进行仔细校对。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，语言表达过于简单，可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，这篇文章的主题不够突出，需要更好地明确中心思想。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的，文章缺乏吸引人的开头，建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊！ ::dunjiao:315:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  yulu: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 有你在的日子才是我的日常。 ::dunjiao:302:: <br>",
      " 夹在我女友与前女友与青梅竹马间的果然是修罗场！ ::dunjiao:302:: <br>",
      " 既然如此，就再努力一次吧。别在这里愁眉不展，也不要再自欺欺人，重新来过！ ::dunjiao:302:: <br>",
      " 比自己,比梦想更重要的东西永远都存在着... ::dunjiao:302:: <br>",
      " 嘛，那又怎么样呢？ ::dunjiao:302:: <br>",
      " 自身不先改变的话，一切都不会改变。 ::dunjiao:302:: <br>",
      " 比起有一百个朋友，不如有个比一百人还要重要的真心朋友。 ::dunjiao:302:: <br>",
      " 我有在反省，但我不后悔。 ::dunjiao:302:: <br>",
      " 要超越过去与悲伤，用坚强和笑容去开拓明天。 ::dunjiao:302:: <br>",
      " 男人许下的诺言就一定要遵守。 ::dunjiao:302:: <br>",
      " 没有回忆就去创造回忆，没有道路就去开辟道路。 ::dunjiao:302:: <br>",
      " 我敬你是条汉子！ ::dunjiao:302:: <br>",
      " 不相信自己的人，连努力的价值都没有。 ::dunjiao:302:: <br>",
      " 微风摇曳着窗帘，夕阳斜射入教室，在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友，不行吗？」 ::dunjiao:302:: <br>",
      " 就算是沉落地面的太阳，只要夜晚过了一定会再度升起，不管有什么痛苦或难过的事，跟今天截然不同的明天也一定会到来。 ::dunjiao:302:: <br>",
      " 我的腿让我停下，可是心却不允许我那么做。 ::dunjiao:302:: <br>",
      " 生活就像超级女生，走到最后的都是纯爷们。 ::dunjiao:302:: <br>",
      " 我要拼，装上假牙也要拼！ ::dunjiao:302:: <br>",
      " 想要成为无论多么悲伤的时候，也能够漂亮微笑的人吧。 ::dunjiao:302:: <br>",
      " 人们只是用好人来称呼对自己有用的人而以，不存在对所有人都有用的人。 ::dunjiao:302:: <br>",
      " 烈焰中舞动的火花，将赐予邪恶异性交往以天罚。 ::dunjiao:302:: <br>",
      " 无论乌云有多浓厚，星星也一定还在，只是暂时看不到了而已。 ::dunjiao:302:: <br>",
      " 不相信人咬不到肚脐的，咬破肚脐去死如何？ ::dunjiao:302:: <br>",
      " 人一生会遇到约万人，两个人相爱的概率是.。所以你不爱我，我不怪你。 ::dunjiao:302:: <br>",
      " 不管看到什么样的过去，都请不要迷失自己，不管你变成什么样子，我都是你的同伴。 ::dunjiao:302:: <br>",
      " 心，可是很重的。 ::dunjiao:302:: <br>",
      " 我爱上的人，称我为怪叔叔 ::dunjiao:302:: <br>",
      " 慕君之心，至死方休。 ::dunjiao:302:: <br>",
      " 虚伪的眼泪，会伤害别人，虚伪的笑容，会伤害自己。 ::dunjiao:302:: <br>",
      " 若隐若现才是艺术！ ::dunjiao:302:: <br>",
      " 生我何用？不能欢笑。灭我何用？不减狂骄。 ::dunjiao:302:: <br>",
      " 就是因为你不好，才要留在你身边，给你幸福。 ::dunjiao:302:: <br>",
      " 呐，我们好像是，被宇宙和地球拆散的恋人似的。 ::dunjiao:302:: <br>",
      " 你会梦游，我会磨牙，我们晚上一起去吓人吧！ ::dunjiao:302:: <br>",
      " 或许只需一滴露水，便能守护这绽放的花朵。 ::dunjiao:302:: <br>",
      " 自己永远是孤单的，但你可以让其他人变得不孤单。 ::dunjiao:302:: <br>",
      " 和哥哥的便当比起来夜空的薯片就像大便一样！只会给我大便的大便夜空是笨蛋～笨蛋～ ::dunjiao:302:: <br>",
      " 我手中的魔法，是守护挚爱的力量，是坚定这个信念所必须的力量，我一定会拯救你的，无论在何时、何地。 ::dunjiao:302:: <br>",
      " 要改变别人的心真是件很难办的事，不过改变自己要容易一点。 ::dunjiao:302:: <br>",
      " 风筝的线你随时可以放开，只是别盼望我会回来。 ::dunjiao:302:: <br>",
      " 与你的生命等价的东西，这个世界上根本没有。 ::dunjiao:302:: <br>",
      " 君子可寓意于物，但不可留意于物。 ::dunjiao:302:: <br>",
      " 最好的感觉，是有人懂你的欲言又止。 ::dunjiao:302:: <br>",
      " 看似美好的东西，往往藏着陷阱。 ::dunjiao:302:: <br>",
      " 爱,其实很简单，困难的是去接受它。 ::dunjiao:302:: <br>",
      " 喜欢大胸只是本能，喜欢贫乳才是审美。 ::dunjiao:302:: <br>",
      " 二次元什么的我本来是不感冒的，直到我的膝盖中了一箭。 ::dunjiao:302:: <br>",
      " 你才是⑨！你全家都是⑨！ ::dunjiao:302:: <br>",
      " 努力是不会背叛自己的，虽然梦想有时会背叛自己。 ::dunjiao:302:: <br>",
      " 面对就好，去经历就好。 ::dunjiao:302:: <br>",
      " 我从小就害怕虫子 ::dunjiao:302:: <br>",
      " 做不到的话，不过就是一死 。但是，赢了就能活下去，要是不战斗就赢不了。 ::dunjiao:302:: <br>",
      " 既然认准这条路，何必去打听要走多久。 ::dunjiao:302:: <br>",
      " 研表究明，汉字的序顺并不定一能影阅响读，比如当你看完这句话后，才发这现里的字全是都乱的。 ::dunjiao:302:: <br>",
      " 少年心意，一如明月松间的青石流水，那些年里看到了，却不懂。 ::dunjiao:302:: <br>",
      " 明明只是活着，哀伤却无处不在⋯⋯ ::dunjiao:302:: <br>",
      " 少罗嗦，你还不如虫子呢！ ::dunjiao:302:: <br>",
      " 天空是连着的，如果我们也能各自发光的话，无论距离有多远，都能看到彼此努力的身影。 ::dunjiao:302:: <br>",
      " 别人恋爱不成功，你连暗恋都不成功！ ::dunjiao:302:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
};
<!--评论 打卡、赞、踩 功能结束-->

代码内::dunjiao:302:: ::dunjiao:315::等是表情文件，可以根据自己的表情内容修改，文字内容是随机输出的

打开 /usr/themes/handsome/component/comments.php 文件，找到并删除/注释以下内容：

请输入图片描述

博客信息内的全站字数统计

点击打开查看

将下面代码加到 /usr/themes/handsome/functions.php的放在文件最下面

/*全站字数统计开始*/
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; }
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
/*全站字数统计结束*/

将下面代码粘贴到 /usr/themes/handsome/component/sidebar.php内，文章数目的下方

<!--全站字数开始-->
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
                            <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<!--全站字数结束-->

右侧边栏恋爱计时

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 全局右侧边栏广告位

<body>
    <div style="text-align: center;margin-top: 10px;">
        <img src=" https://static.lyj15.cn/blogFiles/2025/10/28/微信图片_2025-10-28_162044_368.jpg"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;">
        <div style="display: inline-block">
                    <img src="https://static.lyj15.cn/blogFiles/2025/10/28/15514328777233335.gif" style="width: 60px;height: 60px;">
                </div>
        <img src=" https://static.lyj15.cn/blogFiles/2025/10/28/微信图片_2025-10-28_162037_144.jpg"
            style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"><br>

        <span id="htmer_time"> <span class="zmki_love_ah"></span></span>
    </div>
    <script type="text/javascript" language="javascript">function setTime() {
            <!--有点无语，2021,10,15实际是2021,11,15，注意一下下-->
            var create_time = Math.round(new Date(Date.UTC(2021,10,15,20,30,0)).getTime() / 1000);
            var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
            currentTime = secondToDate((timestamp - create_time));
            currentTimeHtml = ' <span class="zmki_love_ah">一起走过</span><br>' +
    currentTime[0] +
    "年 " +
    currentTime[1] +
    " 天 " +
    currentTime[2] +
    " 时 ";
            document.getElementById("htmer_time").innerHTML = currentTimeHtml;
        }
        function secondToDate(second) {
            if (!second) {
                return 0;
            }
            var time = new Array(0, 0, 0, 0, 0);
            if (second >= 365 * 24 * 3600) {
                time[0] = parseInt(second / (365 * 24 * 3600));
                second %= 365 * 24 * 3600;
            }
            if (second >= 24 * 3600) {
                time[1] = parseInt(second / (24 * 3600));
                second %= 24 * 3600;
            }
            if (second >= 3600) {
                time[2] = parseInt(second / 3600);
                second %= 3600;
            }
            if (second >= 60) {
                time[3] = parseInt(second / 60);
                second %= 60;
            }
            if (second > 0) {
                time[4] = second;
            }
            return time;
        }
        setInterval(setTime, 1000);
    </script>
</body>

上面的图片地址改成自己的

因为填在了全局右侧边栏广告位，所以标题会显示广告

打开网站的 /usr/themes/handsome/component/sidebar.php文件，搜索广告，改成我们相爱了（按自己需求改）

然后刷新一下网站就好了

评论添加一键打卡

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义JavaScript

打开后台-更改外观-设置外观-PJAX-复制代码粘贴至 PJAX回调函数

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你点个赞！ ::funny:07:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
    }
};

打开/usr/themes/handsome/component/comments.php 文件，找到以下内容

<label class="padder-v-sm" for="comment"><?php _me("评论") ?>
    <span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO padder-v-sm"></div>
<?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip"
data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
    <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
    <div class="secret_comment_check">
        <label class="i-switch i-switch-sm bg-info m-b-ss m-r">
            <input type="checkbox" id="secret_comment_checkbox">
            <i></i>
        </label>
    </div>
</div>
<?php endif; ?>

替换成下面内容

<label for="comment"><?php _me("评论") ?>
    <span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div>
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
    <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
         data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
        <div class="secret_comment_check">
            <label class="i-switch i-switch-sm bg-info m-b-ss m-r">
                <input type="checkbox" id="secret_comment_checkbox">
                <i></i>
            </label>
        </div>
    </div>
<?php endif; ?>

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

修改深色模式下行内代码字体颜色

点击打开查看

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS

html.theme-dark :not(pre) > code { color: #ffeb3b !important; }

END
本文作者： 文章标题：博客美化设置自定义外观
 本文地址：https://lyj15.cn/834.html
 版权说明：若无注明，本文皆羡逍遥原创，转载请保留文章出处。
最后修改：2025 年 10 月 29 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏