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

762065921.jpg

考虑到Handsome for typecho主题即将更新新版本，目前尚不确定本教程涉及代码是否兼容，再次声明此教程仅基于Handsome_for_typecho_v6.0版本，请自行斟酌食用。

1、首页文章版式圆角化

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

#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

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

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义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);
}

3、首页头像转动并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。

#转动快慢和头像大小自行修改数值(别复制该行)
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

4、首页文章版式阴影化

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

#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.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);
}

5、文章图片居中

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

/*图片居中*/
#post-content img {
    border: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

6、鼠标点击特效

将以下代码放在主题的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>

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

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

8、打赏图标跳动

文章页最底部的打赏图标添加跳动效果，将以下代码添加至后台主题设置 自定义CSS 即可。

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

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

    to {
        transform: scale(1.1);
    }
}

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

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

10、随机彩色标签云

之前看过一个彩色标签云的插件，这里用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;
});

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

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义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)
}

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

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义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);
}

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

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

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

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

15、自定义字体

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

相关推荐

  1. Typecho 启用 Service Workers 浏览器缓存加速首屏访问
  2. TpCache：为 Typecho 配置 Redis 缓存加速（支持密码登录）
  3. 60个CSS代码片段，前端的60个老大难问题！
  4. typecho获取所有标签制作标签云页面
  5. HTML如何实现页面自适应，适配手机屏幕尺寸
  6. Typecho主题Handsome自定义添加表情包
文章作者：喵斯基部落
原文地址：https://www.moewah.com/archives/3012.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。