Handsome是一款功能比较全面的Typecho主题,这款主题基本上集成了博客所有能用到的功能,包括音乐引入,视频引入,相册,留言,丰富的独立页面等,功能性满足的同时用户对于个性化追求其呼声也越来越高。下面整理的一些修改计划,在一定程度上能部分满足对于主题外观的个性化需求,同时也能弥补主题的一些补足。

1、给导航添加抽屉控制按钮和博主信息按钮

  在handsome/component/headnav.php中搜索selectNavbarCollapse,大约在30行。
  在<?php echo Content::selectNavbarCollapse() ?>下面插入如下代码即可:

<div class="nav navbar-nav hidden-xs">
  <a href="#" class="btn no-shadow navbar-btn active clicked" ui-toggle-class="app-aside-folded" target=".app" title="侧边抽屉" style="">
    <i class="fontello fontello-indent" style="color: #a0a0a0;">
    </i>
  </a>
  <a href="#" class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user" title="博主信息">
    <i class="fontello fontello-user" style="color: #a0a0a0;">
    </i>
  </a>
</div>

  若需要在导航折叠的时候,将某些元素隐藏掉,可以对相关元素添加:
class="hidden-folded"

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

  鼠标经过头像放大,并且加有呼吸灯效果。请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义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;
    }
}

  如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:

@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}

3、首页文章列表悬停上浮

  鼠标经过首页文章列表文章上浮放大,请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

.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);
}
.blog-post .panel-small:not(article) {
    transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.box-shadow-wrap-normal {
    transition: all 0.3s;
}
.box-shadow-wrap-normal:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

4、文章内头图和文章图片悬停放大并将超出范围隐藏

  请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

.index-post-img {
    overflow: hidden;
}
.index-post-img-small .post-feature .index-img-small {
    overflow: hidden;
}
.panel-picture .post-thumbnail {
    overflow: hidden;
}
.item-thumb {
    transition: all 0.3s;
}
.item-thumb-small {
    transition: all 0.3s;
}
.panel-picture .post-thumbnail .post-thumbnail-inner {
    transition: all 0.3s;
}
.item-thumb:hover {
    transform: scale(1.1)
}
.item-thumb-small:hover {
    transform: scale(1.1)
}
.panel-picture .post-thumbnail .post-thumbnail-inner:hover {
    transform: scale(1.1)
}

5、文章图片居中

  默认情况文章内的所有图片居左显示,对于大量使用图片的文章而言其阅读体验会大减折扣。请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

#post-content img {
    border: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

6、首页文章版式阴影化

  本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
/* 如果也想使盒子四周也有阴影,加上以下代码 */
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

7、首页文章版式圆角化

  本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

8、首页文章图片获取焦点放大

  本项修改的是首页文章图片,将鼠标放到首页头图后使其放大。请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

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

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

9、鼠标点击特效

  将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

#字体自行修改(别复制改行)
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

10、打赏图标跳动

  文章页最底部的打赏图标添加跳动效果,请将以下代码添加至:后台主题>>设置外观>>开发者设置>>自定义CSS。

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

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

    to {
        transform: scale(1.1);
    }
}

11、随机彩色标签云

  之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:
  使用方法:请将下方代码添加到后台主题>>设置外观>>开发者设置>>自定义JavaScript中。

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

12、侧边栏添加网站总访客数统计

  首先在 Typecho 后台外观选择编辑当前外观 functions.php 中,添加下方代码并保存文件:

//总访问量
    function theAllViews()
        {
            $db = Typecho_Db::get();
            $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                echo number_format($row[0]['SUM(VIEWS)']);
        }

  然后在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>

  Handsome 主题添加代码位置在:网站根目录/usr/themes/handsome/component/sidebar.php

13、侧边栏添加加载耗时显示

  在 Typecho 后台外观选择编辑当前外观 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;
    }

  在 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>

14、自定义字体

  Handsome主题使用至今,个人对默认字体不是非常喜欢觉得软绵绵的,对于段落篇幅较大的文章阅读起来会非常吃力。个人偏爱 Noto Serif SC字体多一些。考虑到不想对handsome.min.css主题样式文件有过多的修改,所以仅在handsome.min.css文件引入外部字体,然后在主题设置中进行自定义CSS。(如果你也想使用这样的字体,请根据教程自行修改。)

1、引入外部字体,修改handsome/assets/css路径下的handsome.min.css文件,在第1行加入

@import url("https://fonts.loli.net/css?family=Noto+Serif+SC:400,400italic,700,700italic");

2、主题设置- 开发者设置 - 自定义CSS

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}
h1 , h2 , h3 , h4 , body , p , li{
    font-family: "Noto Serif SC","Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif,monospace  !important;
        font-display: swap;
}
#post-content h1, #post-content h2 {
    display: inline !important;
}
#post-content h1, #post-content h2, #post-content h3, #post-content h4, #post-content h5, #post-content h6 {
    line-height: 2.0 !important;
}

15、超链接特效

1、修改/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
}

2、自定义CSS:

/*超链接特效*/
.comment-content-true a:not(.light-link):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a){position:relative;margin:auto 4px;color:#23b7e5;-webkit-transition:color .3s;transition:color .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):not(.post_inser_a):focus,.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover{color:#fff}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{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):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{background-color:#23b7e5;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,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):not(.post_inser_a):focus::before,.comment-content-true a:not(.light-link):not(.post_inser_a):hover::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before{-webkit-transform:rotateX(0);transform:rotateX(0)}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after{border-bottom:1px solid #23b7e5}

3、如果使用版权提示插件,链接有可能会超出提示框,添加以下css解决:

.content-copyright {overflow: hidden}

后续...

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