typecho 模板 Handsome 主题美化教程

本文转载至[喵斯基部落](https://www.moewah.com/archives/3012.html)

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

![](https://conlons.cn:3366/usr/themes/handsome/assets/img/sj/9.jpg)

[scode type="red" size="simple"]考虑到Handsome for typecho主题即将更新新版本，目前尚不确定本教程涉及代码是否兼容，再次声明此教程

仅基于Handsome_for_typecho_v6.0版本，请自行斟酌食用。[/scode]

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

### 10、随机彩色标签云

之前看过一个彩色标签云的插件，这里用 js 为标签随机添加上预先定义的颜色，每次刷新都会进行换色：

使用方法：请将下方代码添加到后台主题设置自定义 JavaScript 中。

```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 即可

```none
/*首页文章列表头图悬停放大并将超出范围隐藏*/
.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 即可

```none
/*首页文章列表悬停上浮*/
.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 中，添加下方代码并保存文件:

```none
//总访问量
    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` 文件找到合适的位置插入以下调用代码：

```none
<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 中，添加下方代码并保存文件:

```none
//加载耗时
    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 文件找到合适的位置插入以下调用代码:

```none
<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 主题](https://www.moewah.com/tag/typecho-theme-handsome/ "handsome主题")使用至今，个人对默认字体不是非常喜欢觉得软绵绵的，对于段落篇幅较大的文章阅读起来会非常吃力。个人偏爱 `Noto Serif SC` 字体多一些。考虑到不想对 `handsome.min.css` 主题样式文件有过多的修改，所以仅在 `handsome.min.css` 文件引入外部字体，然后在主题设置中进行自定义 CSS。（如果你也想使用这样的字体，请根据教程自行修改。）

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

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

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

```none
.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;
}
```

本文转载至[喵斯基部落](https://www.moewah.com/archives/3012.html)

![](https://conlons.cn:3366/usr/themes/handsome/assets/img/sj/9.jpg)

考虑到Handsome for typecho主题即将更新新版本，目前尚不确定本教程涉及代码是否兼容，再次声明此教程

仅基于Handsome_for_typecho_v6.0版本，请自行斟酌食用。
</div>

### 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。

.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> 之前即可。

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

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

若需要在导航折叠的时候，将某些元素隐藏掉，可以对相关元素添加 `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;
    }
}
```

### 10、随机彩色标签云

之前看过一个彩色标签云的插件，这里用 js 为标签随机添加上预先定义的颜色，每次刷新都会进行换色：

使用方法：请将下方代码添加到后台主题设置自定义 JavaScript 中。

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

打开后台 - 更改外观 - 设置外观 - 开发者设置 - 复制代码粘贴至自定义 CSS 即可

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

打开后台 - 更改外观 - 设置外观 - 开发者设置 - 复制代码粘贴至自定义 CSS 即可

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

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

然后在 `handsome/component/sidebar.php` 文件找到合适的位置插入以下调用代码：

```none
<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 中，添加下方代码并保存文件:

在 sidebar.php 文件找到合适的位置插入以下调用代码:

```none
<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、自定义字体

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

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

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

最后修改：2025 年 02 月 09 日

如果觉得我的文章对你有用，愉快的请我喝杯水

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

基于爱快Docker-Frps给无公网群晖内网穿透

Mteam用戶分享率及用戶等級相關及VIP用戶說明

无盘用华硕TUF GAMING B650M-PLUS BIOS设置方法

无盘用华硕TUF GAMING B550M-PLUS BIOS传统启动设置方法

Deep-Freeze破解过程

IP

列表框增删操作

链接

进度条模拟加载

吉利帝豪互联版，车机安装第三方软件教程

typecho 模板 Handsome 主题美化教程

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

typecho 模板 Handsome 主题美化教程

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款