Handsome 主题魔改备忘录

[collapse status="collapse-block" label="响应时间、访客总数、全站文字"]

在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;
}
?>

将以下代码加到/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="edit-3" style="color:#03A9F4"></i></span>
           <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
           <!-- 全站文字统计结束 -->
           <!-- /*访客总数代码开始*/ -->
        <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users" style="color:#FF5252"></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" style="color:#66BB6A"></i></span>
        <span class="badge
        pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
        <!-- /*响应耗时代码结束*/ -->

[/collapse]

[collapse status="collapse-block" label="过年倒计时"]

在component/sidebar.php的div id="sidebar"下方添加如下代码

<!-- 倒计时引用的JS -->    
<script src="https://blogimgbed.oss-cn-beijing.aliyuncs.com/web/timeinfo.js"></script>
     <style>  .gn_box{     border: none;     border-radius: 10px; }  .gn_box {     padding: 8px 10px;     margin: 8px;     margin-bottom: 15px;     text-align: center;     background-color: ; }  #t_d{     color: grey;     font-size: 18px; }  #t_h{     color: grey;     font-size: 18px; }  #t_m{     color: grey;     font-size: 18px; }  #t_s{     color: grey;     font-size: 18px; }  </style>  <div class="gn_box">      <h3>距2024年还有</h3><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('2024/01/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);      var day = document.getElementById("t_d");     if (day != null) {         day.innerHTML = d + " 天";        }     var hour = document.getElementById("t_h");     if (hour != null) {         hour.innerHTML = h + " 时";       }     var min = document.getElementById("t_m");     if (min != null) {         min.innerHTML = m + " 分";        }     var sec = document.getElementById("t_s");     if (sec != null) {         sec.innerHTML = s + " 秒";     } }      setInterval(getRTime, 1000);      </script> </div></img>

[/collapse]

[collapse status="collapse-block" label="主题部分按钮颜色"]

在自定义CSS处添加如下代码

/*自定义按钮下方颜色*/
.navs-slider-bar{
background:#5090F1;
}
/*热门文章*/
.feather-thumbs-up{
color:#1685a9;
}
/*最多评论*/
.feather-message-square{
color:#fa8c35;
}
/*随机文章*/
.feather-gift{
color:#f00056;
}
/*眼睛按钮颜色*/
.fontello{
color:#5090F1;
}

首页按钮颜色需要到headnav.php中修改，查calss找属性为navbar-brand text-lt项，在后续部分添加如下代码

style="color:#5090F1"

左侧栏目第一个首页颜色修改，在aside.php文件中进行，找到data-feather="home"字段，在后续部分加上如下代码

style="color:#FFA726"

隐藏导航名同样也是在该文件完成，找到li class="hidden-folded padder m-t m-b-sm text-muted text-xs"字段，将其li部分注释掉即可

引用块左侧边框颜色，需要编辑原有CSS文件，找到/handsome/assets/css/handsome.min.css
找到字段#post-content blockquote{margin:1.6em -31px;padding:13px 45px!important;
将原有的border属性改为border-left:4px solid #1E88E5

尾部a链接颜色同样在css文件内修改，找到#footer a:hover删掉或注释掉即可

[/collapse]

[collapse status="collapse-block" label="主题配置自定义CSS"]

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap;
src:url(https://blogimgbed.oss-cn-beijing.aliyuncs.com/web/HarmonyOS_Sans_SC_Medium.subset.woff2) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium}
body {font-family: HarmonyOS!important;}
/* 卡片颜色*/
.bg-white{
background:white
}
.bg-white-only{
background:white
}
/*自定义按钮下方颜色*/
.navs-slider-bar{
background:#5090F1
}
/*热门文章*/
.feather-thumbs-up{
color:#1685a9
}
/*最多评论*/
.feather-message-square{
color:#fa8c35
}
/*随机文章*/
.feather-gift{
color:#f00056
}
/*眼睛按钮颜色*/
.fontello-eye{
color:#5090F1
}
/*QQ空间*/
.icon-qzone{
color:#ffd460
}
/*微博*/
.fontello-weibo{
color:#f57170
}
/*右侧信息面板背景颜色*/
.badge{
background-color:#23b7e5
}
/*右侧信息面板按钮颜色*/
.post-tags a{background-color:#23b7e5}
/*文章*/
.feather-award{
color:#3F51B5
}
/*评论*/
.feather-message-circle{
color:#26C6DA
}
/*天数*/
.feather-calendar{
color:#3F51B5
}
/*时间按钮*/
.feather-clock{
color:#4CAF50
}
/*用户头像*/
.feather-user{color:#2196F3
}
/*眼睛*/
.feather-eye{color:#7C4DFF}
/*活动*/
.feather-activity{color:#43A047}
/*书写*/
.feather-pen-tool{color:#FF9800}
/*分类*/
.feather-grid{color:#FF4081}
/*rss*/
.feather-rss{color:#4CAF50}
/*小Header*/
#small_widgets{
background-color:white
}
div[class="wrapper bg-light"]{background-color:white}
/*自定义页面宽度*/

@media (min-width:1700px) {
    .app.container {
        width: 80%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 80%
    }
}

@media (min-width:2048px) {
    .app.container {
        width: 78%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 78%
    }
}



@media (min-width:1200px) {
    .app.container {
        width: 75%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 75%
    }

    .app.container .app-footer-fixed {
        max-width: 970px
    }

    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }

    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 75%
    }
}

/*自定义组件*/

red{
color:#E53935;
}
.emotion-bilibili{
    width: 25px;
}
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: white;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #80d6ff;
    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
}


/*首页文章图片获取焦点放大*/
.entry-thumbnail{overflow:hidden;}
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}
.item-thumb:hover{
      transform: scale(1.05);  
}
.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}


/*头图放大*/

.panel {
    cursor:pointer;
    transition:all 0.6s;
}
.panel-small {
    cursor:pointer;
    transition:all 0.6s;
}
.item-thumb-small {
    cursor:pointer;
    transition:all 0.6s;
}
.item-thumb-small:hover {
    transform:scale(1.05);
}
.index-post-img{overflow:hidden;}

/*手机不显示*/
@media (max-width:1000px) {
    #tabs-4,#tag_cloud-2,#blog_info,.gn_box {
        display: none;
    }
}
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2,#blog_info,.gn_box {
        display: none;
    }
}
.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
}

[/collapse]