typecho模板Handsome主题的美化教程

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

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("文字1", "文字2", "文字3", "文字4", "文字5");
        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>

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END