本博客之Typecho Handsome主题美化记录

Author： JiangLiWww
发布时间：May 11, 2025
107 views
2 comments
40030 words
Categories：杂七杂八

这篇文章作为本站美化的记录，有新增时会实时更新。
</div>

这篇文章作为本站美化的记录，有新增时会实时更新。如果您有好玩的效果也欢迎在评论区提出，若可以的话我也会加到文章并实现其效果。
</div>

更新时间：2025年5月10日1:00:00
</div>

# 说明

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

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

# 本站环境

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

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

```php
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：红色
```

## 基础设置

### 开启全站HTTPS

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4dc36ee711af811f47a29261c4496c6f98" aria-expanded="true"><div class="accordion-toggle"><span style="">开启全站HTTPS</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4dc36ee711af811f47a29261c4496c6f98" class="collapse collapse-content"><p></p>1、首先在宝塔/1Panel或通过配置文件给你的网站配置好证书，并开启强制 `HTTPS` 我这里用1Panel

[![请输入图片描述](https://img.us.cc.image.jiang.li/img/20250511/e494534be02c171057f4bc9f00b48c4d.png)](https://)

2、去网站后台，找到 `设置 -> 基本设置 -> 站点地址`将其改为https开头的网址。

### 添加GZIP压缩

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3510b9409c4ad0f9811f641e6ddcaed275" 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-3510b9409c4ad0f9811f641e6ddcaed275" class="collapse collapse-content"><p></p>这个主要是减小带宽压力，以达到加快网站加速速度的目的。
和上面的HTTPS一样，在 `config.inc.php`内加入以下配置即可：

```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-690f505838110efb5abfc428e8a2af2481" 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-690f505838110efb5abfc428e8a2af2481" class="collapse collapse-content"><p></p>

更改前是这样的：https://www.jiang.li/index.php/default/4.html
更改后是这样的：https://www.jiang.li/default/4.html

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

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

### 自定义后台路径

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b3f6dbf8ef0e1fbaeda86c7805261c9e56" 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-b3f6dbf8ef0e1fbaeda86c7805261c9e56" class="collapse collapse-content"><p></p>

1、将 `Typecho`程序根目录中的后台文件夹 `"admin"`改名，名字即为你想自定义的地址名，例如：将 `"admin"`改为 `"xxx"`
2、修改根目录文件 `"config.inc.php"`，打开该文件后找到

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

将代码中 `"admin"`改为你自定义的地址，例如：`xxx`
这样一来，我们的 `Typecho`程序网站的后台就改成：域名 `/xxx`了

### 使Typecho支持emoji

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6d4e1231b917e4b4fee1b33d3addcf0f69" aria-expanded="true"><div class="accordion-toggle"><span style="">使Typecho支持emoji</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6d4e1231b917e4b4fee1b33d3addcf0f69" class="collapse collapse-content"><p></p>

效果 ？ 如果你模板版本更新到截止目前最新 教程作废 已经支持了

> 🔘🔵🟣🟤⚫🔴🟠🟡💰✨🍭🎄

```sql
alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;
```

执行上述 `sql`语句来修改表的编码，如果用的是宝塔面板和 `MySQL`数据库，一般有可视化的 `phpmyadmin`界面，可以在 `phpmyadmin`的控制台里面执行上面的语句。

最后将 `Typecho` 目录下的 `config.inc.php` 配置文件中数据库定义参数中的 `charset` 为 `utf8mb4`：

```php
$db->addServer(array (
      'host'      =>  localhost, 
      'user'      =>  'root',
      'password'  =>  'root',
      'charset'   =>  'utf8mb4', //修改这一行
      'port'      =>  3306,
      'database'  =>  ''
  ), Typecho_Db::READ | Typecho_Db::WRITE);
```

### 每日新闻 自动更新

使用方法
首先先创建一个独立页面，名称随意，将以下代码放在独立页面内

```shell
<img src="去bing搜索api接口" />
```

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

```shell
<img src="去bing搜索api接口" />
```

### 文章中嵌入网页

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-96dedf6b7b87f1c25ee8b25683ca16c4100" 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-96dedf6b7b87f1c25ee8b25683ca16c4100" class="collapse collapse-content"><p></p>

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

```shell
<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-da2c8f12426d0efa265bb88edad07e8a21" 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-da2c8f12426d0efa265bb88edad07e8a21" class="collapse collapse-content"><p></p>

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

```shell
{"id":"iciba","name":"每日一句","url":"去bing搜索api接口"},
{"id":"oschina","name":"开源中国","url":"去bing搜索api接口"},
{"id":"bing","name":"Bing 壁纸","url":"去bing搜索api接口"},
{"id":"sspai","name":"少数派","url":"去bing搜索api接口"},
{"id":"DailyArt","name":"每日艺术","url":"去bing搜索api接口"}
```

### 添加左侧导航

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-cd8140c5f179e09869874fea5d7280ec89" 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-cd8140c5f179e09869874fea5d7280ec89" class="collapse collapse-content"><p></p>

以下代码放在 `后台-外观设置-高级设置-左侧边栏导航`内容请自行更改

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

图标选择：也可选择[Glyphicons 字体图标](http://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-9c2368dd523abc98a1e3098cd4095bd971" 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-9c2368dd523abc98a1e3098cd4095bd971" class="collapse collapse-content"><p></p>

`后台-设置外观-开发者设置-自定义JS` 添加以下代码

```shell
setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);
```

其中 `volume=0.3`为播放器音量控制，默认为 `0.3`支持修改范围为 `0.0 - 1`可自行设置

# 美化记录

## 自定义CSS

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

### 文章标题居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7ff8c186eba2227e57a25ac38db8bb8638" 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-7ff8c186eba2227e57a25ac38db8bb8638" class="collapse collapse-content"><p></p>

```css
/*文章标题居中*/
  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-59563e1b9f7c2a3003823afa3942784632" 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-59563e1b9f7c2a3003823afa3942784632" class="collapse collapse-content"><p></p>

```css
/*首页标题文字居中*/
.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-a2b1e997cef2a48d875c498208a892214" 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-a2b1e997cef2a48d875c498208a892214" class="collapse collapse-content"><p></p>

```css
/* 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-f9e6815efb25faf33baf73464b212c0b41" 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-f9e6815efb25faf33baf73464b212c0b41" class="collapse collapse-content"><p></p>

```css
/* 羽毛_css */
.dropdown.wrapper {
background:url(https://www.jiang.li/yumao.webp) right bottom no-repeat;
}
```

![保存图片上传到你自己服务器](https://img.us.cc.image.jiang.li/img/20250511/59770e50a08fad1185963c69614d1861.webp)

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0fac4bbb6a1348561925e655cd3d58c751" 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-0fac4bbb6a1348561925e655cd3d58c751" class="collapse collapse-content"><p></p>

```css
/* 鼠标经过头像旋转放大 */
.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-5f0079506bf0715f0ce85ca466bf738e68" 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-5f0079506bf0715f0ce85ca466bf738e68" class="collapse collapse-content"><p></p>

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

### 时光机内圆形头像

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a5bf098d33dcf34cba27516ac2483a6222" 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-a5bf098d33dcf34cba27516ac2483a6222" class="collapse collapse-content"><p></p>

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d7abd8cb131cffc9a48985f29400187e69" 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-d7abd8cb131cffc9a48985f29400187e69" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-ef3782a19d2543d602abffef2e8ba2e172" 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-ef3782a19d2543d602abffef2e8ba2e172" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-361ac69e6d6a37a3575ff96d1cf3e9f148" 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-361ac69e6d6a37a3575ff96d1cf3e9f148" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-ed6ad9ea2ebf387edd20fc26babae15a10" 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-ed6ad9ea2ebf387edd20fc26babae15a10" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-1fe3237cb1dbc72388ea67209d75f9e052" 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-1fe3237cb1dbc72388ea67209d75f9e052" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-ba669422c649f25ff21af222419bb98e78" 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-ba669422c649f25ff21af222419bb98e78" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-1343584ed183fcc270462540ff959b1141" 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-1343584ed183fcc270462540ff959b1141" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-6c64ac49fe61d0f9ce65a4d512b8822212" 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-6c64ac49fe61d0f9ce65a4d512b8822212" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-cc564b6446d3a698609c13791bddd2bc49" 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-cc564b6446d3a698609c13791bddd2bc49" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-ef923a87ad3fcd68e94523a4f005197c22" 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-ef923a87ad3fcd68e94523a4f005197c22" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></div></div></div>

### 修改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-48bdf5efcb160cd36214ae29bf1ad22e79" 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-48bdf5efcb160cd36214ae29bf1ad22e79" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-915940efa8ae2c8eeff0f99c38629d1049" 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-915940efa8ae2c8eeff0f99c38629d1049" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-468405d81816368d3de8be9b4b7f290756" 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-468405d81816368d3de8be9b4b7f290756" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></div></div></div>

## 自定义JavaScripts

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处容
</div>

### 网页文字禁止复制

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-309d9cdaf0594c3b506067d3a086458273" 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-309d9cdaf0594c3b506067d3a086458273" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-cd0c795f190cb378495b9cd6deee217d0" 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-cd0c795f190cb378495b9cd6deee217d0" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-eec55b5650a92bd7c207f5b69fc3351242" 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-eec55b5650a92bd7c207f5b69fc3351242" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-97ee5cf8535f890bd0d136241d6b7a7754" 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-97ee5cf8535f890bd0d136241d6b7a7754" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-f4c98ef986f067dcce388ae6a9a4c16178" 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-f4c98ef986f067dcce388ae6a9a4c16178" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></div></div></div>

### 左上角网站FPS显示

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a23bfc3106caf7fb799244644d2e81ef96" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角网站FPS显示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a23bfc3106caf7fb799244644d2e81ef96" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-bcaee51079e8bc586cd34e6aada297f917" 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-bcaee51079e8bc586cd34e6aada297f917" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-a18d726142682c52300134d8bcf70d8051" 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-a18d726142682c52300134d8bcf70d8051" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-347410e0dfcd469b9d3026f09a62cac737" 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-347410e0dfcd469b9d3026f09a62cac737" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></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-d1b090b97e4d07b79c0b1b5b2b94804339" 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-d1b090b97e4d07b79c0b1b5b2b94804339" class="collapse collapse-content"><p></p>这里编辑收缩框内容<p></p></div></div></div>

## 自定义body

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处
</div>

### 万能的控制台

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e2a6e3ca60c49c31f2ff9b990675707138" 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-e2a6e3ca60c49c31f2ff9b990675707138" class="collapse collapse-content"><p></p>

```html

<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c JiangLi's Blog QQ:858006723 控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台，可写html代码
</script>
```

### 气泡背景

```html
id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色
```

在 `开发者设置 自定义输出body 尾部的HTML代码`中添加下面代码，需要修改可参考上方参数

```html
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
```

### 动态网站标题-第二种

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-425176681baa5797c88f7aa725e4c7e491" 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-425176681baa5797c88f7aa725e4c7e491" class="collapse collapse-content"><p></p>

复制下方代码添加至`后台主题设置 自定义输出head 头部的HTML代码`即可

```html
<script>  
// 浏览器标题切换  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title = '草榴社區主論壇 - 1024';  
        clearTimeout(titleTime);  
    }else{  
        document.title = '生命-1s ~ ';  
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 2000); // 2秒后恢复原标题  
    }  
});  
</script>
```

### 动态网站标题-第三种

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1b49819b85e3d84af21eec3ee887a48c36" 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-1b49819b85e3d84af21eec3ee887a48c36" class="collapse collapse-content"><p></p>

复制下方代码添加至`后台主题设置 自定义输出head 头部的HTML代码`即可

```html

<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)我藏好了哦 - TuJun';}else{document.title=normal_title;}});</script>
```

### 自定义右键菜单美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-615ac20caebb8f272845a40e429e3bd483" 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-615ac20caebb8f272845a40e429e3bd483" class="collapse collapse-content"><p></p>

注意：一定首先在`主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码`位置添加以下代码。如果不添加将不会显示图标

```html

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

加完之后再将下面的代码放到`自定义输出body 尾部的HTML代码`处
另外，一定要把代码里的网址改成自己的！！\~

```html

  <style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="放你网站的对应网址"><i class="fa fa-home"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh"></i><span>重载网页</span></a></li>
        <li><a href="放你网站的对应网址"><i class="fa fa-meh-o"></i><span>和我当邻居</span></a></li>  
        <li><a href="放你网站的对应网址"><i class="fa fa-pencil-square-o"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
    </script>

```

### 防止他人F12抓你代码

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-783643511c9e9994b90ea8bd7947c3939" aria-expanded="true"><div class="accordion-toggle"><span style="">防止他人F12抓你代码</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-783643511c9e9994b90ea8bd7947c3939" class="collapse collapse-content"><p></p>

首先要说，这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。
提示内容可以自行修改哦\~

```html

<script type="text/javascript">
    $(document).ready(function () {
      document.oncontextmenu = function () {
        return false;
      }
      //document.onselectstart = function () {
       // return false;
     // }
      //document.oncopy = function () {
        //return false;
     // }
      document.onkeydown = function () {
        //f12
        if (window.event && window.event.keyCode == 123) {
          event.keyCode = 0;
          event.returnValue = false;
          layer.msg("球球了，别再扒孩子了=.=")
          return false;
        }
        //ctrl+u
        if (event.ctrlKey && window.event.keyCode == 85) {
          return false;
        }
        //ctrl+shift+i
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
          return false;
        }
        // Ctrl+S
        else if ((event.ctrlKey) && (event.keyCode == 83)) {
          return false;
        }
      };

});
  </script>
<script>
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.5k5b.com"}});
    console.log(element);
</script>
```

### 顶部导航栏添加网页动态滚动进度条|滚动指示器

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fba5ce9c93ed5c42d2cab6f7caba742550" 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-fba5ce9c93ed5c42d2cab6f7caba742550" class="collapse collapse-content"><p></p>

使用方法
将以下代码加到`后台设置->自定义输出head 头部的HTML代码`

```html

<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), //滚动条的位置
                docHeight = $(document).height(),   //文档高度
                winHeight = $(window).height(); //窗口高度
 
        var scrolled = (winTop / (docHeight - winHeight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
    });
</script>
```

需要注意的是，需要关闭后台的`固定头部`和`固定导航`，效果最佳，不然可能会看不到效果。

### 修改文件

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\~
</div>

### 首页新年倒计时

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-87b91280afd1cb1141e62de8d643a1de26" 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-87b91280afd1cb1141e62de8d643a1de26" class="collapse collapse-content"><p></p>

将如下代码加到`开发者设置-首页列表最前方广告位`即可

```html

<style>
    .gn_box {
        border: none;
        border-radius: 15px;
    }

.gn_box {
        padding: 10px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
    }

#t_d {
        color: #982585;
        font-size: 18px;
    }

#t_h {
        color: #8f79c1;
        font-size: 18px;
    }

#t_m {
        color: #65b4b5;
        font-size: 18px;
    }

#t_s {
        color: #83caa3;
        font-size: 18px;
    }
</style>
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>3</font>
        <font color=#8C0073>年</font>
        <font color=#75008A>-</font>
        <font color=#5E00A1>新</font>
        <font color=#4700B8>年</font>
        <font color=#3000CF>倒</font>
        <font color=#1900E6>计</font>
        <font color=#0200FD>时</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
                id="t_s"> 秒</span></div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2023/01/01 00:00:00');   // 这里是明年第一天时间
            var NowTime = new Date('2022/8/25 23:02:01');    // 这里是当前时间 自己修改
            var t = EndTime.getTime() - NowTime.getTime();
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
            }
            var min = document.getElementById("t_m");
            if (min != null) {
                min.innerHTML = m + " 分";
            }
            var sec = document.getElementById("t_s");
            if (sec != null) {
                sec.innerHTML = s + " 秒";
            }
        }
        setInterval(getRTime, 1000);   
    </script>
</div>
```

### 博主介绍文字动态化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-91dadd990ae8d080404ebb93226126d735" 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-91dadd990ae8d080404ebb93226126d735" class="collapse collapse-content"><p></p>

将代码里的这是我的介绍这一部分修改称自己想要展示的内容即可，顺便那个❤也是可以改的，随你开心就是了
将以下代码放到`主题后台-外观-设置外观-初级设置-博主的介绍`内即可
放之前记得先清空`博主的介绍`栏内的所有内容

```html
<span class="text-muted text-xs block">
    <div id="chakhsu"></div>
    <script>
        var chakhsu = function (r) {
            function t() {
                return b[Math.floor(Math.random() * b.length)]
            }
            function e() {
                return String.fromCharCode(94 * Math.random() + 33)
            }
            function n(r) {
                for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                    var l = document.createElement("span");
                    l.textContent = e(), l.style.color = t(), n.appendChild(l)
                }
                return n
            }
            function i() {
                var t = o[c.skillI];
                c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
                    "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
                        (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
                            (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
                                Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
            }
            /*以下内容自定义修改*/
            var l = "❤",
                o = ["这是我的介绍"].map(function (r) {
                    return r + ""
                }),
                a = 2,
                g = 1,
                s = 5,
                d = 75,
                b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
                    "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
                    "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
                    "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
                ],
                c = {
                    text: "",
                    prefixP: -s,
                    skillI: 0,
                    skillP: 0,
                    direction: "forward",
                    delay: a,
                    step: g
                };
            i()
        };
        chakhsu(document.getElementById('chakhsu'));
    </script>
</span>
```

给正文添加结束标识

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-05dea668396ac4928f30ecd7b89d1a5689" 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-05dea668396ac4928f30ecd7b89d1a5689" class="collapse collapse-content"><p></p>

效果就是像本博客的每篇博文正文下面有一个好看的END标识。

首先打开 网站根目录`/usr/themes/handsome的post.php`文件
找到`<?php if ($this->options->adContentPost != ""): ?>`这行代码，在其上方(截图标出的位置)的空白位置添加以下代码

```html

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

并在改好保存后，在`自定义CSS`处添加以下代码

```html
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}
```

### 后台登陆界面美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-994e00da53e8179ec2a7b823d16e0f8280" 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-994e00da53e8179ec2a7b823d16e0f8280" class="collapse collapse-content"><p></p>

方法
第一步：用压缩包内的`login.php`文件替换掉`/admin/login.php`文件
第二步：将压缩包内的`style`文件夹上传到`/admin/`文件夹下
第三步：修改`login.php`第`35`行，把“TuJun'Blog”替换成自己的信息

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-066e3010ba54a403aa1c18bfa6ec995312" 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-066e3010ba54a403aa1c18bfa6ec995312" class="collapse collapse-content"><p></p>

这个代码同样也是在`<?php if ($this->options->adContentPost != ""): ?>`的上方
添加位置和上面正文结束功能的添加位置相同，如图所示：

找到后添加以下代码(你也可以添加到其他你认为合适的地方)

```html

<div
    style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
    <div class="tt-license">
        <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：
            <?php $this->title() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：
            <?php $this->permalink() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用 <a rel="license"
                href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
        <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
    </div>
</div>

```

添加好后，在`自定义CSS`中添加以下代码：

```css
/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}
```

到这里基本上就大功告成了。放一下改后的代码样子

### 右侧添加人生倒计时(岁月不待人)

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8ca5b1c4f7e868e8898edf56d23ce35e35" 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-8ca5b1c4f7e868e8898edf56d23ce35e35" class="collapse collapse-content"><p></p>

首先找到网站根目录`/usr/themes/handsome/component`
打开`sidebar.php`文件，找到``这一行内容。
在该内容向上两行找到`<?php endif; ?>`，在该行紧接着下面添加如下代码：

```php

<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none text-md">
        <?php _me("岁月不待人") ?>
    </h5>
    <div class="sidebar sidebar-count">
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">今日已经过去<span></span>小时</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">这周已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">本月已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">今年已经过去<span></span>个月</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
        </div>
    </div>
</section>

```

改好后保存退出，进入网站根目录`/usr/themes/handsome/assets/js/`的文件夹
创建一个名为`timeinfo.js`的文件，并将以下代码放进该文件后，保存并退出

```js
function init_life_time() {
function getAsideLifeTime() {
    /* 当前时间戳 */
    let nowDate = +new Date();
    /* 今天开始时间戳 */
    let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
    /* 今天已经过去的时间 */
    let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
    /* 今天已经过去的时间比 */
    let todayPassHoursPercent = (todayPassHours / 24) * 100;
    $('#dayProgress .title span').html(parseInt(todayPassHours));
    $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
    $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
    /* 当前周几 */
    let weeks = {
        0: 7,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6
        };
    let weekDay = weeks[new Date().getDay()];
    let weekDayPassPercent = (weekDay / 7) * 100;
    $('#weekProgress .title span').html(weekDay);
    $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
    $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
    let year = new Date().getFullYear();
    let date = new Date().getDate();
    let month = new Date().getMonth() + 1;
    let monthAll = new Date(year, month, 0).getDate();
    let monthPassPercent = (date / monthAll) * 100;
    $('#monthProgress .title span').html(date);
    $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
    $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
    let yearPass = (month / 12) * 100;
    $('#yearProgress .title span').html(month);
    $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
    $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
    }
    getAsideLifeTime();
    setInterval(() => {
        getAsideLifeTime();
    }, 1000);
    }
    init_life_time()
```

以下代码放在 `后台-外观设置-开发者设置-自定义CSS`

```css
/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}
```

最后一步,将以下代码放在`后台-外观设置-开发者设置-自定义输出body尾部`

```html
  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
```

### 取消时光机文字首字放大效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-375c7dc1a4d722807eaa3920ee2b367691" 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-375c7dc1a4d722807eaa3920ee2b367691" class="collapse collapse-content"><p></p>

修改`usr/themes/handsome/component/say.php`文件，将以下代码注释掉

```css
#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
    font-size: 140%;
    /* float: left; */
    vertical-align: middle;
}
```

### 信息统计增加全站字数、在线人数、响应耗时和访客总数

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1003da8050415f224b52fa4a8dac791b99" 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-1003da8050415f224b52fa4a8dac791b99" class="collapse collapse-content"><p></p>

首先将以下代码加到`/usr/themes/handsome/libs/Content.php`中，放在`class Content`的上面

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

/*响应时间*/
    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;
    }
        /**
     * 全站字数
     */
    function allOfCharacters() {
        $chars = 0;
        $db = Typecho_Db::get();
        $select = $db ->select('text')->from('table.contents');
        $rows = $db->fetchAll($select);
        foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
        $unit = '';
        if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
        else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
        $out = sprintf('%.2lf %s',$chars, $unit);
        return $out;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }
```

然后在`/usr/themes/handsome/component/sidebar.php`文件内，找到合适和位置添加以下代码： 注：``处就是添加代码的地方，找到你想加的位置添加代码即可

```html
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
     <span class="badge
 pull-right"><?php echo theAllViews(); ?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
     <span class="badge
 pull-right"><?php echo timer_stop(); ?></span><?php _me("响应耗时") ?></li>
```

### 底部版权美化

左侧底部放在 `后台-开发者设置-博客底部左侧信息`

```html

<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.5k5b.com" target="_blank">
        <span class="badge-value bg-blue">©2022 5k5b.</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">豫ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2020030958号</span></a>
</div>
<div class="github-badge">
    <img src="https: //cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png" style="float:left;" />
    <span class="badge-subject">豫公网安备</span>
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132" target="_blank">
        <span class="badge-value bg-green">41032602000132号</span></a>
</div>
```

右侧底部放在 `后台-开发者设置-博客底部右侧信息`

```html

<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://www.95vps.com/aff/20" target="_blank">
        <span class="badge-value bg-blue">桔子数据提供服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
</div>
```

css放在 `主题设置-自定义css`内

```css
/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-green {
  background-color: #3bca6e
}
```

把下面代码放在主题目录`usr/themes/handsome/component/footer.php`内大概在`177`行，覆盖原来的即可

```php
<footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
        <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        </span>
        <span class="text-ellipsis">
            <?php
            $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>
```

### 页脚处添加网站运行时间

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0de850d360119dffc88df09284f23d0339" 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-0de850d360119dffc88df09284f23d0339" class="collapse collapse-content"><p></p>

注意这个功能我是在上一个页脚美化的基础上添加的，如果没有添加页脚美化功能，该运行时间的排版会出现问题。当然你也可以改成你喜欢的样子\~
代码放到`后台-开发者设置-博客底部左侧信息`

```html
|  

<div class="github-badge">
<span class="badge-subject">运行时间</span>
<span class="badge-value bg-green"><span id="span_dt_dt"></span></span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2021/09/11 22:30:00"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>
```

### 添加网站加载效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-00dc925053bdaae958d5bc5ce95b764044" 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-00dc925053bdaae958d5bc5ce95b764044" class="collapse collapse-content"><p></p>

首相找到`/usr/themes/handsome/component/`文件夹内的`header.php`，将以下代码加到最后`</style>`之后

```html

<style>
    #PageLoading {
        background-color: #fff;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }

#PageLoading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }

#PageLoading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
    }

.object2 {
        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
        position: absolute;
        border-left: 5px solid #FFB6C1;
        border-right: 5px solid #b6def7;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        -webkit-animation: animate 2s infinite;
        animation: animate 2s infinite;

}

#object_one {
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
    }

#object_two {
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

#object_three {
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

#object_four {
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

@-webkit-keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

@keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
</style>

<body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>
```

加好后刷新博客会出现一直卡在加载页面的问题，我们再将以下代码放到`自定义JavaScripts`里面

```java
/* 加载动画 */
$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

### 添加一键打卡功能

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d624b445c78084b879256cfcd7f4b9b439" 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-d624b445c78084b879256cfcd7f4b9b439" class="collapse collapse-content"><p></p>

该功能在每篇博文的评论框底部
首先找到`/usr/themes/handsome/component/comments.php`
将如下代码(可以直接搜`<div class="comment-form-comment form-group">`)更改为

```html
            <div class="comment-form-comment form-group">
                <label for="comment"><?php _me("评论") ?>
                    <span class="required text-danger">*</span></label>
                    <span class="required text-danger">（请使用真实邮箱地址，方便及时接收评论回复！）</span>
                <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                <div class="OwO" style="display: inline;"></div>
                <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
                <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
                <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                <div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                    <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                    <div class="secret_comment_check">
                        <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                            <input type="checkbox" id="secret_comment_checkbox">
                            <i></i>
                        </label>
                    </div>
                </div>
            </div>
```

接着去`自定义JavaScript`加入如下代码

```javascript

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 文章写得不错，给你点个赞，继续加油哈！")
    },
    cai: function() {
        a(c, "骚年，我怀疑你写了一篇假的文章！")
    }
};
```

在`自定义CSS`处添加

```css
/*评论一键打卡、赞、踩 */
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
```

搞好之后刷新网页就可以看到效果了\~

### 自定义字体

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-267a5677586752410a606c28ea6ae70336" 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-267a5677586752410a606c28ea6ae70336" class="collapse collapse-content"><p></p>

首先我们去[字体天下](https://www.fonts.net.cn/)网站找到一款自己喜欢的字体，记得一定要是免费商用的，防止有版权问题\~
下载好后会发现是一个`.tff`扩展名的文件，我们再去[字体转换](https://www.aconvert.com/cn/image/ttf-to-woff/)网站里将`.tff`转换为`.woff`格式的文件
并将转换后的文件上传到你网站目录里的某个位置，默认是`usr/themes/handsome/assets/fonts`文件夹里。
前往 `外观设置-开发者设置-自定义css`中添加以下代码

```css
/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}
```

### 404页面添加自动返回首页功能

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c2d91a9352f90cee2fd71703674011e859" aria-expanded="true"><div class="accordion-toggle"><span style="">404页面添加自动返回首页功能</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c2d91a9352f90cee2fd71703674011e859" class="collapse collapse-content"><p></p>

找到`/usr/themes/handsome`文件夹内的`404.php`文件并打开。
在`h1 class="text-shadow text-white">404`这一行下面加入以下代码：

```php
<br>
<small class="text-muted letterspacing">
<b id="sp">2</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
```

再把下面的代码加入`404.php`文件内最底下的`</body>`前面

```php
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=2;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>
```

### 在文章顶部添加百度是否收录

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e8b6b4f59a1d372af092715d1fb6260d17" 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-e8b6b4f59a1d372af092715d1fb6260d17" class="collapse collapse-content"><p></p>

使用方法
在`handsome/functions.php`最底部添加代码

```php
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
    echo "百度已收录";
}
else{
    echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
} 
```

然后在`handsome/post.php`在63行左右添加代码

```php

<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>
```

Last modification：May 11, 2025

如果觉得我的文章对你有用，请随意赞赏

2 comments

JiangLiWww Google Chrome 135.0.0.0 Mac OS X 10.15.7
May 11th, 2025 at 02:29 pm

@JiangLiWww

11111OωO
JiangLiWww Google Chrome 135.0.0.0 Mac OS X 10.15.7
May 11th, 2025 at 02:28 pm

1111

本博客之Typecho Handsome主题美化记录

JiangLiWww • 2025 年 05 月 11 日