响应耗时

  • 在主题的functions.php文件中添加以下代码
//加载耗时
    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"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

评论添加一键打卡

  • 主题设置 - 开发者设置 - 自定义JavaScript 和 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:04:: ")
  },
  cai: function() {
  a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
  }
  };
  • 主题目录的component/comments.php里面的130行左右参照下面代码进行修改
<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> 

                      <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("开启该功能，您的评论仅作者和评论双方可见") ?>">
  • 主题设置 - 开发者设置 - 自定义CSS 添加以下代码
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}

访客总数统计

  • 在/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)']);
        }
  • 在/usr/themes/handsome/component/sidebar.php文件中插入以下调用代码
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
  pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

左侧文章图标和评论头像圆角化鼠标悬停旋转

.img-square {
transition: all 0.3s;
border-radius: 50%;
}.img-square:hover {
transform: rotate(360deg);
}

一言api古诗词版

  • 主题根目录下打开index.php，找到以下代码：
<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码：

<small class="text-muted letterspacing indexWords"><span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

头像呼吸光环和鼠标悬停旋转放大

  • 主题设置 - 开发者设置 - 自定义CSS添加以下代码
.img-full {
     width: 100px;
     border-radius: 50%;
     animation: light 4s ease-in-out infinite;
     transition: 0.5s;
 }
 
 .img-full:hover {
 transform: scale(1.15) rotate(720deg);
 }
 
 @keyframes light {
     0% {
         box-shadow: 0 0 4px #f00;
     }
 
     25% {
     box-shadow: 0 0 16px #0f0;
     }
 
     50% {
     box-shadow: 0 0 4px #00f;
     }
 
     75% {
     box-shadow: 0 0 16px #0f0;
     }
 
     100% {
     box-shadow: 0 0 4px #f00;
     }
 }

左侧文章图标和评论头像鼠标悬停旋转

.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

文章内打赏图标跳动

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

首页文章列表悬停上浮

.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);
}

首页头图悬停放大并超出范围

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

文章内头图和图片悬停放大并超出范围

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

春节倒计时代码

  • 主题设置 - 开发者设置 - 首页列表最前方广告位添加以下代码
<!--倒计时开始--> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</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> </h1> <center> <div id="CountMsg" class="HotDate"> <span id="t_d"> 天</span> <span id="t_h"> 时</span> <span id="t_m"> 分</span> <span id="t_s"> 秒</span> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2022/02/01 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 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 + " 秒"; } setInterval(getRTime, 1000); </script> </div> <!--倒计时结束-->
  • 主题设置 - 开发者设置 - 自定义CSS添加以下代码
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}

超链接特效

  • 修改/usr/themes/handsome/assets/css/handsome.min.css删掉下面的内容：
comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}
  • 然后在主题设置 - 开发者设置 - 自定义CSS添加以下代码
/*超链接特效*/
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
    position: relative;
    margin: auto 4px;
    color: #23b7e5;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: inherit;
    width: inherit;
}
.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    box-sizing: content-box;
    padding: 0 4px;
    width: 100%;
    height: 100%;
    content: '';
}
.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
    background-color: #23b7e5;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}

标签云颜色

  • 主题设置 - 开发者设置 - 自定义JS添加以下代码：
<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--彩色标签云-->
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;
});

<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

博客版权美化

  • 将以下代码加入主题后台的开发者选项中的自定义CSS
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
  background-color: #007ec6
}
.github-badge .bg-orange {
  background-color: #ffa500
}
.github-badge .bg-red {
  background-color: #f00
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-purple {
  background-color: #ab34e9
}
  • 将以下代码添加至后台主题设置博客底部左侧信息，信息修改成自己的:
<div class="github-badge">
    <a href="./" title="2019  iStar" >
        <span class="badge-subject">Copyright    </span><span class="badge-value bg-blue">©2019  iStar  </span>
    </a>
</div>
 | 
<div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" >
        <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
    </a>
</div>
 |  
<div class="github-badge">
    <a href="https://m.abcdl.cn" target="_blank" title="baidu">
        <span class="badge-subject">Modified</span><span class="badge-value bg-red">一路阳光</span>
    </a>
</div>

添加更多表情

  1. 将表情包图片上传至/usr/themes/handsome/assets/img/emotion
  2. 然后替换或者修改/usr/themes/handsome/usr/OwO.json
  3. 修改/usr/themes/handsome/assets/css/handsome.min.css表情大小如下：
.comment-content-true img {
    max-width: 6%!important
}

右侧边栏添加全站字数

  • 在component/sidebar.php的开头加入下面的代码:
<?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;
}
?>
  • 在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>

正文结束添加版权信息

  • 在主题根目录下post.php文件中 <?php echo Content::exportPayForAuthors(); ?>(大概在87行左右)添加以下内容
<!--版权声明开始-->
              <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>
           <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>
              <!--版权声明结束-->

修复TePass插件点击支付按钮无反应

  • 删除 /var/Typecho/common.php 中以下代码：
/** 兼容php6 */
        if (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc()) {
            $_GET = self::stripslashesDeep($_GET);
            $_POST = self::stripslashesDeep($_POST);
            $_COOKIE = self::stripslashesDeep($_COOKIE);

            reset($_GET);
            reset($_POST);
            reset($_COOKIE);
        }
最后修改：2022 年 04 月 04 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题：Typecho 主题美化
 本文地址：https://blog.abcdl.cn/index.php/archives/3/
 版权说明：若无注明，本文皆iStar Blog原创，转载请保留文章出处。