文字抖动特效

点击展开

/* 文字抖动特效 */
.Pshake{
    display: inline-block;
    will-change: transform; /*可以删除*/
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
        transform-origin: center center;
    -webkit-animation: Pshake_Crazy 1s ease-in-out infinite;
            animation: Pshake_Crazy 1s ease-in-out infinite;
}
@keyframes Pshake_Crazy{
    10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);}
    20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);}
    30%{transform:translate(1.5px,0.5px) rotate(0.5deg);}
    40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);}
    50%{transform:translate(2.5px,1.5px) rotate(1.5deg);}
    60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);}
    70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);}
    80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);}
    90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);}
    0%,100%{transform:translate(0,0) rotate(0);}
}

响应耗时和访客总数

点击展开

首先将以下代码加到/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>

五颜六色字体

点击展开


自定义JS填入

/*五颜六色字体*/
function sjcolor(){
var colorArr = ["rgba(143,181,158,.8)","rgba(143,192,193,.6)"];
/*设置颜色*/
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > b").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > ul > li > a > b").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*左侧导航字体颜色*/
document.querySelectorAll("#header > div > ul > li > div > div > div > div > div > div > a > span > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*工具导航*/
document.querySelectorAll("#tag_cloud-2 a").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*标签颜色*/
document.querySelectorAll("#blog_info > ul > li > span.badge.pull-right").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*博客信息*/
}sjcolor();

pajx回调函数填入

<!--五颜六色字体-->
sjcolor();

底部版权美化

点击展开


自定义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
}

.right-badge {
    float: right;
}

.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-cyan {
   background-color: rgba(143,181,158,.8)
}

博客底部左侧信息

<div class="github-badge">
<a href="./" title="Codermq">
<span class="badge-subject">Copyright</span><span class="badge-value bg-cyan">©Codermq</span>
</a>
</div>
&nbsp;
<div class="github-badge right-badge">
<a href="https://beian.miit.gov.cn/" target="_blank" title="滇ICP备19007031号-3", pointer;">
<span class="badge-subject">滇ICP备</span><span class="badge-value bg-cyan">19007031号-3</span>
</a>
</div>

博客底部右侧信息

&nbsp;
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" , pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-cyan">Typecho</span>
</a>
</div>
&nbsp;
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" , pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-cyan">Handsome</span>
</a>
</div>

手机端不显示热门文章和标签云

点击展开

/*手机不显示热门文章和标签云*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

最后修改:2022 年 07 月 18 日
如果觉得我的文章对你有用,请随意赞赏