Handsome 主题大升级：原版基础上的惊艳修改与网站风格完美适配全记录（总）

博主： demius
发布时间：2024 年 08 月 27 日
193 次浏览
1 条评论
62434字数
分类： typecho

<div class="tip share">请注意，本文编写于 87 天前，最后修改于 30 天前，其中某些信息可能已经过时。</div>

## 主题整体细节设置以及美化方案（总）

该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴\~\~
注意：以下代码出现/\* \*/ 、或//字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。
在这里不建议删除，因为会影响后期修改时的辨别。悉知\~

为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂\~

原本在浏览器写完了，但是发布的时候出了问题导致瞬间没有了。。。哭死！！

这是重写的！！即便是学习，也是太累了啊！！！

### 本站环境

Typecho：1.2.1正式版
HandSome：9.2.1 Pro
其他版本的Typecho和HandSome不确定其可行性，请自行测试\~

```
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色
```

### 基础设置

这些设置有些可能是开站都必须的吧。

#### 添加GZIP压缩

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-335554b06b14e47ec1a660138bbf87c186" aria-expanded="true"><div class="accordion-toggle"><span style="">添加GZIP压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-335554b06b14e47ec1a660138bbf87c186" class="collapse collapse-content"><p></p>这个主要是减小带宽压力，以达到加快网站加速速度的目的。
和上面的HTTPS一样，在 config.inc.php内加入以下配置即可：

```
/** 开启gzip压缩 */
ob_start('ob_gzhandler');
```

#### 去掉地址栏的index.php

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c300c76480ec479d4c8186d69d0dc58b95" aria-expanded="true"><div class="accordion-toggle"><span style="">去掉地址栏的index.php</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c300c76480ec479d4c8186d69d0dc58b95" class="collapse collapse-content"><p></p>

更改前是这样的：[https://blog.demius.tech/index.php/archives/368.html](https://blog.demius.tech/archives/366.html)
更改后是这样的：[https://blog.demius.tech/archives/368.html](https://blog.demius.tech/archives/366.html)

首先进入后台，找到 设置 - 永久链接，改成如下图所示:

![](https://imgs.demius.tech//imgs/2024/08/202408262118776.webp)

然后我们需要配置伪静态规则
如果使用的面板，就在 网站-设置-伪静态-选择Typecho-保存即可

#### 自定义后台路径

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1fef5b39b53c5e0fec99f66981c29f9c56" aria-expanded="true"><div class="accordion-toggle"><span style="">自定义后台路径</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1fef5b39b53c5e0fec99f66981c29f9c56" class="collapse collapse-content"><p></p>1、将 Typecho程序根目录中的后台文件夹 "admin"改名，名字即为你想自定义的地址名，例如：将 "admin"改为 "xxx"
2、修改根目录文件 "config.inc.php"，打开该文件后找到：

```
/* 后台路径(相对路径) /
define(' **TYPECHO_ADMIN_DIR** ', '/admin/');
```

#### 每日新闻自动更新

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f9e998e80402ab56ab121990a1763a6a71" aria-expanded="true"><div class="accordion-toggle"><span style="">每日新闻自动更新</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f9e998e80402ab56ab121990a1763a6a71" class="collapse collapse-content"><p></p>使用方法
首先先创建一个独立页面，名称随意，将以下代码放在独立页面内：

```
<img src="https://api.4rz.cn/zbPhoto.jpg" />
```

在我给大家增加一个接口，二选一 感觉哪个速度快就用哪个：

```
<img src="http://api.03c3.cn/zb" />
```

#### 添加左侧导航

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3e98261b125f4c9d3c516592237a87d399" aria-expanded="true"><div class="accordion-toggle"><span style="">添加左侧导航</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3e98261b125f4c9d3c516592237a87d399" class="collapse collapse-content"><p></p>以下代码放在 后台-外观设置-高级设置-左侧边栏导航内容请自行更改

```
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}
{"name":"名称","class":"图标","link":"链接位置","target":"_blank"}
```

图标选择：[Glyphicons字体图标](https://v3.bootcss.com/components/#glyphicons)，[feather图标](https://feathericons.com/)

#### 左侧边栏导航

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4e05e5525d72b3c288dfcc41a94b781f57" aria-expanded="true"><div class="accordion-toggle"><span style="">左侧边栏导航</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4e05e5525d72b3c288dfcc41a94b781f57" class="collapse collapse-content"><p></p>

* `name`：代表显示栏目/按钮的名称
* `class`：表示栏目/按钮的网页图标的样式
* `link`：代表栏目/按钮的链接
* `target`（可选）: 代表定在何处打开链接文档，如 `_blank`:浏览器总在一个新打开、未命名的窗口中载入目标文档。`_self`:代表在当前窗口打开。不填则为：`_blank`。

```
{"name":"音乐","class":"fa fa-music","link":"xxx.com"},
{"name":"笔记","class":"fa fa-book","link":"xxx.com"}
```

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

</div><div role="tabpanel" id='tabs-7e9859b76f214ed9308f8e97d99cf39c491' class="tab-pane fade  ">

左侧边栏目默认加载**首页**按钮。隐藏方法：

```
{"name":"home","status":"hide"}
```

</div>
</div>
</div>

#### 顶部导航栏目

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-53ebde3185d1e3e872b61db9ee39691472" aria-expanded="true"><div class="accordion-toggle"><span style="">顶部导航栏目</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-53ebde3185d1e3e872b61db9ee39691472" class="collapse collapse-content"><p></p>

`{"name":"音乐","class":"fa fa-music","link":"xxx.com"}`

或者：

`{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://blog.demius.tech/","target":"_blank"}`

</div><div role="tabpanel" id='tabs-df76b066c0578505945c2f4a3a522129451' class="tab-pane fade  ">

`{"name":"talk","status":"hide"}`

</div>
</div>
</div>

#### 首页轮播图

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-db9454de6cae09b78ef87657cadfb80426" aria-expanded="true"><div class="accordion-toggle"><span style="">首页轮播图</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-db9454de6cae09b78ef87657cadfb80426" class="collapse collapse-content"><p></p>

在外观设置——高级设置——首页轮播图中可以配置首页的轮播图

格式：

```
{"title":"第一篇文章","link":"","cover":"","desc":""},
{"title":"第一篇文章","link":"","cover":"","desc":""}

```

示例：

```
{"title":"handsome主题基于原版修改项，美化适配网站风格记录","link":"https://blog.demius.tech/archives/368.html", "cover":"https://tc.demius.tech/i/2024/09/11/66e0fdff49f74.webp","desc":"在复杂中，保持简洁。 一款精心打磨后的typecho主题。"},
{"title":"typecho的插件推荐，持续更新...","link":"https://blog.demius.tech/archives/453.html","cover":"https://tc.demius.tech/i/2024/09/11/66e0fe0eba820.webp","desc":"拒绝信息化的算法推送"}

```

属性介绍：

* title: 文章标题
* link: 文章的地址
* cover: 文章图片地址，比例建议8：3，不要太小，否则显示的不清楚
* desc: 简单描述（不要太长）

最后一个 `}`后面不要加上英文逗号

#### 时光机社会化图标

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2e0d16cb6af10e3b6c8d8aad0af9d5ea9" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机社会化图标</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2e0d16cb6af10e3b6c8d8aad0af9d5ea9" class="collapse collapse-content"><p></p>

默认已经填入了配置，书写规则和上面基本类似：

* `name`：代表显示按钮的名称
* `class`：表示按钮的网页图标的样式
* `link`：代表按钮的链接
* `status`：当 `status`值为 `single`时，特指页面中的**绿色文字按钮**，此时无需填写 `class`项。

```
{"name":"twitter","class":"fa fa-twitter","link":"#"},
{"name":"facebook","class":"fa fa-facebook","link":"#"},
{"name":"googlepluse","class":"fa fa-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}
```

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

#### 时光机联系方式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ea2d98ee4087f83a2ced3c337bdcc8c5100" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机联系方式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ea2d98ee4087f83a2ced3c337bdcc8c5100" class="collapse collapse-content"><p></p>

默认已经填写email、QQ、微博以及网易云音乐的配置：

* `name`：代表显示栏目的名称
* `img`：表示该联系方式的图标（图片格式）
* `link`：代表联系方式的地址

```
{"name":"email","img":"图片地址","value":"ihewro@163.com","link":"#"},
{"name":"QQ","img":"图片地址","value":"535425690","link":"#"},
{"name":"微博","img":"图片地址","value":"昵称","link":"地址"},
{"name":"网易云音乐","img":"图片地址","value":"昵称","link":"地址"}
```

简单配置，只需要修改”value”和”link”的值。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

#### 文章中嵌入网页

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-83006abc32469a1a1e0b2e050631229845" aria-expanded="true"><div class="accordion-toggle"><span style="">文章中嵌入网页</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-83006abc32469a1a1e0b2e050631229845" class="collapse collapse-content"><p></p>

在独立页面上放置一个单独的网页页面
使用方法
在文章中添加代码即可，将链接地址修改为你需要展示的网站地址

```
<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>
```

#### 时光机栏目增添额外内容

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3396fcb3fd4f84edd3b775fad977468c9" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机栏目增添额外内容</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3396fcb3fd4f84edd3b775fad977468c9" class="collapse collapse-content"><p></p>

使用方法
将以下代码按照需求自行修改后放到主题 `后台-时光机配置-RSS动态`内容配置内即可

```
{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}
```

#### 博主介绍闪字效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-232f5455f205c2c7da7ba21b4744eb8a96" aria-expanded="true"><div class="accordion-toggle"><span style="">博主介绍闪字效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-232f5455f205c2c7da7ba21b4744eb8a96" class="collapse collapse-content"><p></p>

打开后台-更改外观-设置外观-初级设置-复制代码粘贴至 博主的介绍即可

### 美化方案

#### 自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内

##### 页面两侧框架留白间距

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-68e45493986af9600f5706bc6877877551" aria-expanded="true"><div class="accordion-toggle"><span style="">页面两侧框架留白间距</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-68e45493986af9600f5706bc6877877551" class="collapse collapse-content"><p></p>

将页面扩大化了，看原版：

![请输入图片描述](https://tc.demius.tech/i/2024/09/11/66e12838bc4b9.webp)

修改后：

![请输入图片描述](https://tc.demius.tech/i/2024/09/11/66e12838c7644.webp)

代码：

```
/*两侧框架留白间距*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }

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

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

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

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

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

.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: 90%
    }
}
```

##### 文章标题居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5445bccbb0292d77c1dc08eb1e54a28957" aria-expanded="true"><div class="accordion-toggle"><span style="">文章标题居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5445bccbb0292d77c1dc08eb1e54a28957" class="collapse collapse-content"><p></p>

```
/*文章标题居中*/
  header.bg-light.lter.wrapper-md {
  text-align: center;
}
```

##### 首页标题文字居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-19f3551e80dd7b21e0eee1ce29ba4d0a33" aria-expanded="true"><div class="accordion-toggle"><span style="">首页标题文字居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-19f3551e80dd7b21e0eee1ce29ba4d0a33" class="collapse collapse-content"><p></p>

```
/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}
```

##### 左上角博客LOGO/博客名称的扫光效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-357469de1932575a4b71dffaa54658c066" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角博客LOGO/博客名称的扫光效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-357469de1932575a4b71dffaa54658c066" class="collapse collapse-content"><p></p>

```
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
```

##### 左上角博主信息羽毛背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0523962f1042649073e48619afa84d5617" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角博主信息羽毛背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0523962f1042649073e48619afa84d5617" class="collapse collapse-content"><p></p>background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）：

```
/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}
```

![](https://imgs.demius.tech//imgs/2024/08/202408262348317.webp)

##### 鼠标路过头像时放大并旋转

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-96e5d37fcc0a58ed102c59a9e702efba94" aria-expanded="true"><div class="accordion-toggle"><span style="">鼠标路过头像时放大并旋转</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-96e5d37fcc0a58ed102c59a9e702efba94" class="collapse collapse-content"><p></p>

```
/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle: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;
    }
}
```

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8f95a9c8be7616dfcf83152b05b6554c81" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸光环和鼠标悬停旋转放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8f95a9c8be7616dfcf83152b05b6554c81" class="collapse collapse-content"><p></p>

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

##### 时光机内圆形头像

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-09a697575eb952862da7e61c50e500a2100" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机内圆形头像</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-09a697575eb952862da7e61c50e500a2100" class="collapse collapse-content"><p></p>

将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)：

```
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
```

##### 网站右侧滚动条样式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-809e0dcfd89dd6dfc838cf4353c322d043" aria-expanded="true"><div class="accordion-toggle"><span style="">网站右侧滚动条样式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-809e0dcfd89dd6dfc838cf4353c322d043" class="collapse collapse-content"><p></p>

此处的 `#949494;`即为滚动条的颜色，你可以去 `http://tools.jb51.net/static/colorpicker/ `这个链接去找到你喜欢的颜色然后替换
注意：替换的是 `#`后面的 `6`位数字，`#`不要动

```
/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #949494;
    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
}
```

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f44d2a95b5426549978a3d0197fc85ab80" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章图片获取焦点放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f44d2a95b5426549978a3d0197fc85ab80" class="collapse collapse-content"><p></p>

```
/* 首页文章图片获取焦点放大 */
.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);
}
```

##### 首页头图悬停放大并超出范围

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b2da298328f32f4f8ed222d897b18e2167" aria-expanded="true"><div class="accordion-toggle"><span style="">首页头图悬停放大并超出范围</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b2da298328f32f4f8ed222d897b18e2167" class="collapse collapse-content"><p></p>

```
.index-post-img {
 overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

##### 首页文章添加圆角效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6c9a0a0d588735574792a60c1f80215c43" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章添加圆角效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6c9a0a0d588735574792a60c1f80215c43" class="collapse collapse-content"><p></p>

```
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

##### 博客头图阴影眼睛

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7f67b344b4252118b28fe3dcb469bc2a1" aria-expanded="true"><div class="accordion-toggle"><span style="">博客头图阴影眼睛</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7f67b344b4252118b28fe3dcb469bc2a1" class="collapse collapse-content"><p></p>

```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异次元鼠标经过文章Banner效果</title>
</head>
<style>
.entry-banner {background: #f4f4f4;width: 680px;height: 130px;clear: both;position: relative;display: block;border-radius: 8px;overflow: hidden}
.entry-banner a {border-radius: 8px;display: inline-block;width: 681px;height: 130px}
.entry-banner a img {-webkit-transition: all .2s;-moz-transition: all .2s;-ms-transition: all .2s;transition: all .2s}
.entry-banner a:before {position: absolute;top: 0;left: 0;z-index: 2;visibility: hidden;border-radius: 8px;width: 100%;height: 100%;background: #026dd4;content: '';opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:after {position: absolute;top: 0;left: 0;z-index: 5;margin-top: 0;visibility: hidden;content: "";background-image: url(https://s2.ax1x.com/2019/06/11/VcwS8f.png);background-repeat: no-repeat;background-size: 101px 63px;background-position: center center;height: 130px;width: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:hover:before {visibility: visible;opacity: .75;-ms-filter: "alpha(opacity=75)"}
.entry-banner a:hover:after {visibility: visible;opacity: 1;-ms-filter: "alpha(opacity=100)"}
.entry-banner a:hover img {-webkit-transform: scale(1.08);-moz-transform: scale(1.08);transform: scale(1.08)}
</style>
<body>
  <div class="entry-banner">
   <a href="#">
           <img border="0" width="680" height="130" src="https://img.iplaysoft.com/wp-content/uploads/2018/618-apps-sale/618_2019_banner.jpg" />
       </a>
  </div>
</body>
</html>
```

注意：这个效果本博还没测试过，蛮好玩的这里先收录一下了。

##### 文章内头图和图片悬停放大并超出范围

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a98edb3da35a93acfd2ad22df6a5ef4946" aria-expanded="true"><div class="accordion-toggle"><span style="">文章内头图和图片悬停放大并超出范围</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a98edb3da35a93acfd2ad22df6a5ef4946" class="collapse collapse-content"><p></p>

```
.entry-thumbnail {
overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

##### 修改h1，h2标题背景颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0d6c9cf376a14aec98e3a3438f7813c047" aria-expanded="true"><div class="accordion-toggle"><span style="">修改h1，h2标题背景颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0d6c9cf376a14aec98e3a3438f7813c047" class="collapse collapse-content"><p></p>

```
/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}
```

##### 文章一二三四级标题美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-49a9b0bda1f98d9a36c4c1d4a4785f512" aria-expanded="true"><div class="accordion-toggle"><span style="">文章一二三四级标题美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-49a9b0bda1f98d9a36c4c1d4a4785f512" class="collapse collapse-content"><p></p>

```
/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
/*文章一二三四级标题美化 结束*/
```

##### 文章版式阴影化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e76470f2adfad0659f42bd2bacf6b40c76" aria-expanded="true"><div class="accordion-toggle"><span style="">文章版式阴影化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e76470f2adfad0659f42bd2bacf6b40c76" class="collapse collapse-content"><p></p>可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。
所有 rgba后面的，如 26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。
你同样可以去 [http://tools.jb51.net/static/colorpicker/]([在线颜色选择器 | RGB颜色查询对照表 (jb51.net)](https://tools.jb51.net/static/colorpicker/) 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~：

```
/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}
```

##### 右侧列表导航栏图标颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9f085894e554659d976dbf73dcc4ff7f35" aria-expanded="true"><div class="accordion-toggle"><span style="">右侧列表导航栏图标颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9f085894e554659d976dbf73dcc4ff7f35" class="collapse collapse-content"><p></p>这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。同样 #后面的六位数字代表颜色，可以改\~

```
/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
```

##### 文章列表悬停上浮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-846024f913277e3e594789f99979b92213" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章列表悬停上浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-846024f913277e3e594789f99979b92213" class="collapse collapse-content"><p></p>

```
/*首页文章列表悬停上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article), .panel-picture {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover, .panel-picture:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/*首页文章版式圆角化*/
.panel{
    border: none !important;
    border-radius: 15px !important;
}

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

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

.border-radius-6 {
border-radius: 15px;
}
```

这段可能还需要改进，在目前这个主题版本中测试没有生效。

##### 赞赏按钮跳动

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2a2345c63650f32f27f271c8faf9d58d61" aria-expanded="true"><div class="accordion-toggle"><span style="">赞赏按钮跳动</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2a2345c63650f32f27f271c8faf9d58d61" class="collapse collapse-content"><p></p>

```
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}
```

##### 页面两侧框架留白间距

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-eda5421b6a1aa0f4cfb1e7162aa4426846" aria-expanded="true"><div class="accordion-toggle"><span style="">页面两侧框架留白间距</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-eda5421b6a1aa0f4cfb1e7162aa4426846" class="collapse collapse-content"><p></p>打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS即可: