Handsome 博客主题美化记录

Author： kared
发布时间：February 20, 2024
124 views
No comments
49536 words
Categories：资源收藏

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

本文章的美化内容参考自网络，并作为本站主题美化记录，如有新增将会实时更新。
</div>

目前有些CSS美化效果好像已经失效了，但是还没有仔细测试。
</div>

本文最后更新时间：2024年2月21日00:04:00
</div>

## 本站说明

本站基于 `Typecho 1.2.1` 正式版强力驱动，主题由 `HandSome 9.2.1` 提供支持。本文详细介绍本站主题美化及修改内容，如果您想达到类似的效果，欢迎参考下面的修改内容。

> 以下代码中的 `/* */` 、``或 `//` 字符均为注释，删除不会影响实际效果。

## 网站设置

### 主题美化

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

![HandSome 主题](https://www.huarzone.com/usr/uploads/images/blog-images/39/2550205088.png)

`HandSome` 主题精心搭配和设计的纯白色调，适应各个设备和分辨率。拥有十四种色调和多种布局，可以根据个人喜好自由切换。不仅仅是适用于电脑端的响应式设计，还包括置顶导航和折叠导航功能。此外，还特别设计了透明模式，使图片背景更加友好。同时，还提供深色模式和简约实用的阅读模式可供选择。

地址：https://www.ihewro.com/archives/489/

![响应式设计](https://www.huarzone.com/usr/uploads/images/blog-images/39/1080886393.png)

</div><div class="flex-block" style="flex:33%">

![置顶导航](https://www.huarzone.com/usr/uploads/images/blog-images/39/190890861.png)

</div><div class="flex-block" style="flex:33%">

![折叠导航](https://www.huarzone.com/usr/uploads/images/blog-images/39/1892709381.png)

</div></div>

| 功能                     | 介绍                                                                                          |
| ------------------------ | --------------------------------------------------------------------------------------------- |
| 时光机                   | 支持**网页端、手机端、微信公众号、浏览器、chrome、Firefox、edge浏览器扩展**，让你随时随时记录 |
| 全站加密                 | 设置密码后，全站前台所有页面访问需要输入密码                                                  |
| 分类加密                 | 设置密码后，当前分类的文章均需要输入密码才可以访问，还支持对该分类的指定日期范围进行加密      |
| 文章加密                 | 支持对单篇文章进行加密                                                                        |
| 文章部分内容登录可见     | 有些比较私密的内容，可以让文章的部分内容需要登录才可以阅读                                    |
| 文章部分内容评论可见     | 不想被白嫖，留下个评论再走吧                                                                  |
| 评论隐私评论             | 进评论者和登录用户可见，适用于涉及到评论者隐私的一些信息评论                                  |
| 支持文章格式复制         | 好的文章想要转载，直接复制能够保持与原文章的格式一致                                          |
| 剪切板中包含图片自动上传 | 转载一篇别人的文章，但同时也想将图片上传到自己服务器，现在一切自动进行                        |
| 复制图片上传             | ctrl+c ctrl+v 完成                                                                            |
| 自定义与美化             | 强大的后台设置，无需了解代码细节，任意操纵属于自己的博客                                      |
| 内置音乐播放器           | 主题内置顶部全局播放器（切换页面不会中断）和文章内插入播放器，为文章添加更多色彩。            |
| 内置视频播放器           | 很多博主是生活博主，希望能在播放上展示一些生活视频。                                          |
| ajax搜索                 | 高亮显示搜索词语                                                                              |
| 图表统计                 | 可以通过图表清晰查看近10个月的博客动态情况以及博客文章、分类、标签的数量信息。                |
| 文章目录树               | 让文章结构更加清晰，支持电脑和手机屏幕尺寸                                                    |
| 代码高亮                 | 适用于有展示代码需求的用户                                                                    |
| mathjax公式支持          | 适用于与数学公式相关的用户                                                                    |
| 更多功能                 | 自行查看作者博客介绍......                                                                    |

</br>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-baf810e2bf03ec3a4421c4830d9e145f92" aria-expanded="true"><div class="accordion-toggle"><span style="">即刻 Admin 后台主题</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-baf810e2bf03ec3a4421c4830d9e145f92" class="collapse collapse-content"><p></p>

`JKAdmin` 是一个新的 `Typecho` 后台样式，在于提供更舒适的后台体验。截止本文发布，该后台主题好像是唯一支持 `Typecho 1.2.1` 正式版的后台美化方案。

地址：https://www.ijkxs.com/8617.html

</div><div class="flex-block" style="flex:50%">

</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-579b125ce0d43a9afea06bcffb2adf3091" 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-579b125ce0d43a9afea06bcffb2adf3091" class="collapse collapse-content"><p></p>

将博客链接由 `域名/index.php/archives/39.html` 更改为 `域名/archives/5`。

进入后台，找到 `设置 - 永久链接`，启用地址重写功能，并按照个人习惯自定义文展/页面/分类路径即可，如下图所示：

![永久链接设置](https://www.huarzone.com/usr/uploads/images/blog-images/39/2543096764.png)

### 自定义后台路径

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

1、将 `Typecho` 程序根目录中的后台文件夹 `"admin"` 改为自定义的地址名 `"manage"`
2、修改根目录文件 `"config.inc.php"`，打开该文件后将代码中 `"admin"` 改为自定义的地址，例如：`manage`，刷新一下，`Typecho` 程序网站的后台就可以通过 `域名/manage` 访问了。

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

### 表情Emoji支持

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-113563733793af2d3fd647672b883b151" aria-expanded="true"><div class="accordion-toggle"><span style="">表情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-113563733793af2d3fd647672b883b151" class="collapse collapse-content"><p></p>

> 支持Emoji小表情，例如：✨🤖🎄📖🧭🎯👻🍳⛅🎉❄️🧐🔍🀄🏆

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

【MySQL】执行上述`sql`语句来修改表的编码，并将 `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);
```

## 自定义 CSS

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义 CSS`

### 首页标题文字居中

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

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

### 文章标题居中

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

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

### 博客名称&LOGO扫光效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f95a696b62a1f80f1400644ac147087f58" 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-f95a696b62a1f80f1400644ac147087f58" 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-191a3cd5bbb1994624d7b8ba0ca628a265" 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-191a3cd5bbb1994624d7b8ba0ca628a265" 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-b8a8dc4bdf17dab28f6a58e194b3600247" 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-b8a8dc4bdf17dab28f6a58e194b3600247" 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-1246cbbc408c2b39ffa08196ee5a2afa93" 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-1246cbbc408c2b39ffa08196ee5a2afa93" class="collapse collapse-content"><p></p>

```css
/* 时光机圆形头像 */
.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-0765ea68ec5e7996a8aa4d0fda5388da40" 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-0765ea68ec5e7996a8aa4d0fda5388da40" class="collapse collapse-content"><p></p>

```css
/* 美化网站右侧滚动条样式 */
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */ 
::-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-186cf8f33060e74d95219edcf58ce0d83" 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-186cf8f33060e74d95219edcf58ce0d83" class="collapse collapse-content"><p></p>

```css
/* 首页文章版式阴影颜色 */
.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-6bbaa7d867b1766ed9e5916b51e385dd19" 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-6bbaa7d867b1766ed9e5916b51e385dd19" class="collapse collapse-content"><p></p>

```css
/* 右侧列表导航栏图标颜色 */
.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-d7779c0b82c9cbdbcafbe532b91901cb63" 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-d7779c0b82c9cbdbcafbe532b91901cb63" class="collapse collapse-content"><p></p>

```css
/* 词云等距美化 */
#tag_cloud-2 a {
    border-radius: 5px;
    width: 32%;
}
```

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

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

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

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

### 赞赏按钮跳动

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

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

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

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

### 评论边框

```css
/* 评论边框 */
.comment-parent {
    margin: 20px;
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.3);
}
```

### 粗斜体上色

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

```css
/* 粗斜体上色 */
strong {
    color: #f26522;
}

em {
    font-style: normal;
    color: #fcaf17;
}
```

### 开启全站黑白模式

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

#### 方式一

```css

html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
}

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

```

#### 方式二

```css

<style type="text/css">html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
} </style>

```

#### 方式三

```css

<style>html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid：lolXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
} </style>

```

#### 方式四

```css

<style>html {
    -webkit-filter: grayscale(100%);
}</style>

```

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

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

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

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

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

### 修改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-f1e0c2d91a665c6495fe93d740182d4829" 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-f1e0c2d91a665c6495fe93d740182d4829" class="collapse collapse-content"><p></p>

```css
/* 文章页H1/H2标签背景颜色修改 */
#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-de4c9a014fbff1e5e476717d4404d4f852" 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-de4c9a014fbff1e5e476717d4404d4f852" class="collapse collapse-content"><p></p>

```css
/* 手机端屏蔽热门文章和标签云 */
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}
```

## 自定义 JavaScript

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义 JavaScript`

### 网页文字禁止复制

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

```javascript

<script language="Javascript">
    document.oncontextmenu = new Function("event.returnValue=false");
    document.onselectstart = new Function("event.returnValue=false");
</script>
```

### 复制成功提示

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

```javascript
/* 复制成功提示代码开始 */
kaygb_copy();
function kaygb_copy() {
    $(document).ready(function() {
        $("body").bind('copy',
        function(e) {
            hellolayer()
        })
    });
    var sitesurl = window.location.href;
    function hellolayer() {
        $.message({
            message: "尊重原创，转载请注明出处！<br> 本文作者：Kared<br>原文链接：" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "5000"
        })
    }
}
/* 复制成功提示代码结束 */
```

### 复制自带文章版权

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

```javascript
/* 复制自带版权代码开始 */
document.body.addEventListener('copy',
function(e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        notie({
            type: 'info',
            text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。',
            autoHide: true
        })
    }
});
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();

var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处！<br>' 
                     + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>' + '作者：Kared<br>' 
                     + '链接：' + window.location.href + '<br>' + '来源：https://www.huarzone.com/<br><br>'
                     + window.getSelection().toString();
        var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处！\n' 
                     + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n' + '作者：Kared\n' 
                     + '链接：' + window.location.href + '\n' + '来源：https://www.huarzone.com/\n\n' 
                     + window.getSelection().toString();

clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain', textData);
    }
}
/* 复制自带版权代码结束 */
```

### 网站加载完成提示

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

```javascript
/* 网站加载完成提示代码开始 */
function kaygb_referrer() {
    var kaygb_referrer = document.referrer;
    if (kaygb_referrer != "") {
        return "感谢您的访问，来自：<br>" + document.referrer;
    } else {
        return "";
    }
}
$.message({
    message: "如果本站内容对您有帮助，欢迎收藏！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
/* 网站加载完成提示代码结束 */

```

### 左侧图标颜色和彩色标签云

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

```javascript
/* 左侧图标颜色and彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag = >{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info = >{
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if (length > 0) {
        document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date
    } else {
        document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag = >{
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});
```

如果博客开启了 `PJAX`，需要在 `PJAX回调函数` 里面添加以下代码：

```javascript
/* 彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
```

### 动态网站标题

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

```javascript
/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange',
function() {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
        document.title = '网页崩溃了！！！';
        clearTimeout(titleTime);
    } else {
        $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
        document.title = '咦，又好啦(✿◡‿◡)';
        titleTime = setTimeout(function() {
            document.title = OriginTitle;
        },
        2000);
    }
});
```

### 打字动画效果

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

```javascript
/* 打字动效 */
(function webpackUniversalModuleDefinition(a, b) {
    if (typeof exports === "object" && typeof module === "object") {
        module.exports = b()
    } else {
        if (typeof define === "function" && define.amd) {
            define([], b)
        } else {
            if (typeof exports === "object") {
                exports["POWERMODE"] = b()
            } else {
                a["POWERMODE"] = b()
            }
        }
    }
})(this,
function() {
    return (function(a) {
        var b = {};
        function c(e) {
            if (b[e]) {
                return b[e].exports
            }
            var d = b[e] = {
                exports: {},
                id: e,
                loaded: false
            };
            a[e].call(d.exports, d, d.exports, c);
            d.loaded = true;
            return d.exports
        }
        c.m = a;
        c.c = b;
        c.p = "";
        return c(0)
    })([function(c, g, b) {
        var d = document.createElement("canvas");
        d.width = window.innerWidth;
        d.height = window.innerHeight;
        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
        window.addEventListener("resize",
        function() {
            d.width = window.innerWidth;
            d.height = window.innerHeight
        });
        document.body.appendChild(d);
        var a = d.getContext("2d");
        var n = [];
        var j = 0;
        var k = 120;
        var f = k;
        var p = false;
        o.shake = true;
        function l(r, q) {
            return Math.random() * (q - r) + r
        }
        function m(r) {
            if (o.colorful) {
                var q = l(0, 360);
                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
            } else {
                return window.getComputedStyle(r).color
            }
        }
        function e() {
            var t = document.activeElement;
            var v;
            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
                var u = b(1)(t, t.selectionStart);
                v = t.getBoundingClientRect();
                return {
                    x: u.left + v.left,
                    y: u.top + v.top,
                    color: m(t)
                }
            }
            var s = window.getSelection();
            if (s.rangeCount) {
                var q = s.getRangeAt(0);
                var r = q.startContainer;
                if (r.nodeType === document.TEXT_NODE) {
                    r = r.parentNode
                }
                v = q.getBoundingClientRect();
                return {
                    x: v.left,
                    y: v.top,
                    color: m(r)
                }
            }
            return {
                x: 0,
                y: 0,
                color: "transparent"
            }
        }
        function h(q, s, r) {
            return {
                x: q,
                y: s,
                alpha: 1,
                color: r,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function o() {
            var t = e();
            var s = 5 + Math.round(Math.random() * 10);
            while (s--) {
                n[j] = h(t.x, t.y, t.color);
                j = (j + 1) % 500
            }
            f = k;
            if (!p) {
                requestAnimationFrame(i)
            }
            if (o.shake) {
                var r = 1 + 2 * Math.random();
                var q = r * (Math.random() > 0.5 ? -1 : 1);
                var u = r * (Math.random() > 0.5 ? -1 : 1);
                document.body.style.marginLeft = q + "px";
                document.body.style.marginTop = u + "px";
                setTimeout(function() {
                    document.body.style.marginLeft = "";
                    document.body.style.marginTop = ""
                },
                75)
            }
        }
        o.colorful = false;
        function i() {
            if (f > 0) {
                requestAnimationFrame(i);
                f--;
                p = true
            } else {
                p = false
            }
            a.clearRect(0, 0, d.width, d.height);
            for (var q = 0; q < n.length; ++q) {
                var r = n[q];
                if (r.alpha <= 0.1) {
                    continue
                }
                r.velocity.y += 0.075;
                r.x += r.velocity.x;
                r.y += r.velocity.y;
                r.alpha *= 0.96;
                a.globalAlpha = r.alpha;
                a.fillStyle = r.color;
                a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(i);
        c.exports = o
    },
    function(b, a) { (function() {
            var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", 
                     "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", 
                     "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight",
                     "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", 
                     "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", 
                     "MozTabSize"];
            var e = window.mozInnerScreenX != null;
            function c(k, l, o) {
                var h = o && o.debug || false;
                if (h) {
                    var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                    if (i) {
                        i.parentNode.removeChild(i)
                    }
                }
                var f = document.createElement("div");
                f.id = "input-textarea-caret-position-mirror-div";
                document.body.appendChild(f);
                var g = f.style;
                var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
                g.whiteSpace = "pre-wrap";
                if (k.nodeName !== "INPUT") {
                    g.wordWrap = "break-word"
                }
                g.position = "absolute";
                if (!h) {
                    g.visibility = "hidden"
                }
                d.forEach(function(p) {
                    g[p] = j[p]
                });
                if (e) {
                    if (k.scrollHeight > parseInt(j.height)) {
                        g.overflowY = "scroll"
                    }
                } else {
                    g.overflow = "hidden"
                }
                f.textContent = k.value.substring(0, l);
                if (k.nodeName === "INPUT") {
                    f.textContent = f.textContent.replace(/\s/g, "\u00a0")
                }
                var n = document.createElement("span");
                n.textContent = k.value.substring(l) || ".";
                f.appendChild(n);
                var m = {
                    top: n.offsetTop + parseInt(j["borderTopWidth"]),
                    left: n.offsetLeft + parseInt(j["borderLeftWidth"])
                };
                if (h) {
                    n.style.backgroundColor = "#aaa"
                } else {
                    document.body.removeChild(f)
                }
                return m
            }
            if (typeof b != "undefined" && typeof b.exports != "undefined") {
                b.exports = c
            } else {
                window.getCaretCoordinates = c
            }
        } ())
    }])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);
```

### 添加复制弹窗

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

添加以下代码至 `自定义输出body尾部的HTML代码`：

```html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
```

将以下代码添加到 `自定义JavaScripts`：

```javascript
/* 复制效果 */
document.body.oncopy = function() {
    Swal.fire({
        allowOutsideClick: false,
        type: 'success',
        title: '复制成功，如转载请注明出处！',
        showConfirmButton: false,
        timer: 2000
    });
};
```

### 自定义音乐播放器音量

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

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

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

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

## 自定义 Head / Body

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义输出head 头部的HTML代码 / 自定义输出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-f37bd166a642be7424c8e06baabae9e180" 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-f37bd166a642be7424c8e06baabae9e180" class="collapse collapse-content"><p></p>

```javascript

<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="https://www.huarzone.com/">
                <i class="fa fa-home fa-fw">
                </i>
                <span>
                    首页
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="getSelect();">
                <i class="fa fa-copy fa-fw">
                </i>
                <span>
                    复制
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="baiduSearch();">
                <i class="fa fa-search fa-fw">
                </i>
                <span>
                    搜索
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:history.go(1);">
                <i class="fa fa-arrow-right fa-fw">
                </i>
                <span>
                    前进
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:history.go(-1);">
                <i class="fa fa-arrow-left fa-fw">
                </i>
                <span>
                    后退
                </span>
            </a>
        </li>
        <li style="border-bottom:1px solid gray">
            <a href="javascript:window.location.reload();">
                <i class="fa fa-refresh fa-fw">
                </i>
                <span>
                    重载网页
                </span>
            </a>
        </li>
        <li>
            <a href="/page/links">
                <i class="fa fa-meh-o fa-fw">
                </i>
                <span>
                    和我当邻居
                </span>
            </a>
        </li>
        <li>
            <a href="/page/messages">
                <i class="fa fa-pencil-square-o fa-fw">
                </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);

### 动态网站标题

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

```javascript

<script>
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange',
    function() {
        if (document.hidden) {
            $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
            document.title = 'ヽ(●-`Д´-)ノ别走啊！';
            clearTimeout(titleTime);
        } else {
            $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
            document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle;
            titleTime = setTimeout(function() {
                document.title = OriginTitle;
            },
            2000);
        }
    });
</script>
```

### 网页鼠标点击特效

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

```javascript

<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("🎉富强🎉", "🐳民主🐳", "⛅文明⛅", "🤖和谐🤖",
                              "🎉自由🎉", "🐳平等🐳", "⛅公正⛅", "🤖法治🤖", 
                              "🎉爱国🎉", "🐳敬业🐳", "⛅诚信⛅", "🤖友善🤖");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>
```

### 万能的控制台

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

```html

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

### 气泡背景

```html
//容器ID
id: '',

// 个数
num: 100,

// 如果数量小于num，有这些几率添加一个新的
start_probability: 0.1,

// 初始半径最小值
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>
```

### 禁用 F12 调试模式

```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.huarzone.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-62a38c6a8ccb04c55657be1ffd767b3478" 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-62a38c6a8ccb04c55657be1ffd767b3478" 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-b165e98b730f8f6d372ce83e0eaa8f0a98" 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-b165e98b730f8f6d372ce83e0eaa8f0a98" class="collapse collapse-content"><p></p>

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

```html

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

```

修改完上述文件后，在 `handsome主题 > 设置外观 > 开发者设置 > 自定义CSS` 处添加以下代码：

```css
/* 文章正文下的结束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-28150229994caeff0ce3b9774b2f95a55" 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-28150229994caeff0ce3b9774b2f95a55" class="collapse collapse-content"><p></p>

打开网站根目录 `/usr/themes/handsome/component/sidebar.php` 文件，找到 `` 所在行，并在该内容向上两行找到 `<?php endif; ?>`，并在该行下添加如下代码：

```html

<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none">
        <?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>
a
```

同时，在 `后台-外观设置-开发者设置-自定义输出body尾部` 添加以下代码：

```javascript

<script type="text/javascript">
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()
</script>
```

在 `后台-外观设置-开发者设置-自定义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)
}
```

### 增加站点统计信息

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bd0761cc168d27979fa9d7faa86ff43532" 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-bd0761cc168d27979fa9d7faa86ff43532" 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 = 'w';
    } else if ($chars >= 1000) {
        $chars /= 1000;
        $unit = 'k';
    }
    $out = sprintf('%.2lf %s', $chars, $unit);
    return $out;
}

/* 在线人数 */
function online_users() {
    $filename = 'online.txt'; 
    $cookiename = 'Nanlon_OnLineCount';
    $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>
    <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>
```

### 自定义字体

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

首先，需要去字体网站（选择免费商用，防止版权问题）找到一款个人喜欢的字体，我们需要将下载得到的 `.tff` 格式文件转换为 `.woff` 格式的文件，并将转换后的文件上传到 `/usr/uploads/fonts/` 路径下。

推荐一款比较不错的字体 - 抖音美好体：https://www.shejidt.com/fonts/474

推荐一个比较好用格式转化在线工具：https://convertio.co/

然后，前往 `外观设置-开发者设置-自定义css` 中添加以下代码：

```css
/* 自定义字体 */
@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(/usr/uploads/fonts/xxx.woff) format('woff2')
}

* {
    font-family: HarmonyOS_Sans_SC_Medium
}

body {
    font- family: HarmonyOS!important;
}
```

### 博客顶部添加天气

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

首先，去心知天气官网注册账号并申请API，然后，在 `/usr/themes/handsome/component/headnav.php` 文件中，找到 `<?php endif;?>` 代码行，并在其下方添加以下代码：

```html

<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">
</div>
<script>
    (function(T, h, i, n, k, P, a, g, e) {
        g = function() {
            P = h.createElement(i);
            a = h.getElementsByTagName(i)[0];
            P.src = k;
            P.charset = "utf-8";
            P.async = 1;
            a.parentNode.insertBefore(P, a)
        };
        T["ThinkPageWeatherWidgetObject"] = n;
        T[n] || (T[n] = function() { (T[n].q = T[n].q || []).push(arguments)
        });
        T[n].l = +new Date();
        if (T.attachEvent) {
            T.attachEvent("onload", g)
        } else {
            T.addEventListener("load", g, false)
        }
    } (window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))
</script>
<script>
    tpwidget("init", {
        "flavor": "slim",
        "location": "WX4FBXXFKE4F",
        "geolocation": "enabled",
        "language": "auto",
        "unit": "c",
        "theme": "chameleon",
        "container": "tp-weather-widget",
        "bubble": "enabled",
        "alarmType": "badge",
        "color": "#C6C6C6",
        "uid": "公钥",
        "hash": "密钥"
    });
    tpwidget("show");
</script>

```

### 404页面自动返回首页

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

打开网站根目录 `/usr/themes/handsome/404.php` 文件，找到代码 `h1 class="text-shadow text-white">404` 所在行，并在其下面加入以下代码：

```html
<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>` 前面。

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

打开网站根目录 `/usr/themes/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;
    }
} 
```

然后，在 `/usr/themes/handsome/post.php` 在63行左右添加如下代码（大概在文章分类后面）：

```html

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

### 文章底部添加标签

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

打开网站根目录 `/usr/themes/handsome/post.php` 文件，在其适当位置添加以下代码：

```php

标签：<?php $this->tags('，', true, 'no tag'); ?>
```

---

本站的魔改到此为止，本文较多内容参考自：https://www.5k5b.com/archives/5.html。

如果你想获取更多美化教程，可以参考该博客文章。

Last modification：March 29, 2024

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

Handsome 博客主题美化记录

kared • 2024 年 02 月 20 日

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

本文章的美化内容参考自网络，并作为本站主题美化记录，如有新增将会实时更新。
</div>

目前有些CSS美化效果好像已经失效了，但是还没有仔细测试。
</div>

本文最后更新时间：2024年2月21日00:04:00
</div>

## 本站说明

> 以下代码中的 `/* */` 、``或 `//` 字符均为注释，删除不会影响实际效果。

## 网站设置

### 主题美化

![HandSome 主题](https://www.huarzone.com/usr/uploads/images/blog-images/39/2550205088.png)

地址：https://www.ihewro.com/archives/489/

![响应式设计](https://www.huarzone.com/usr/uploads/images/blog-images/39/1080886393.png)

</div><div class="flex-block" style="flex:33%">

![置顶导航](https://www.huarzone.com/usr/uploads/images/blog-images/39/190890861.png)

</div><div class="flex-block" style="flex:33%">

![折叠导航](https://www.huarzone.com/usr/uploads/images/blog-images/39/1892709381.png)

</div></div>

</br>

`JKAdmin` 是一个新的 `Typecho` 后台样式，在于提供更舒适的后台体验。截止本文发布，该后台主题好像是唯一支持 `Typecho 1.2.1` 正式版的后台美化方案。

地址：https://www.ijkxs.com/8617.html

</div><div class="flex-block" style="flex:50%">

</div></div>

### 自定义博客路径

将博客链接由 `域名/index.php/archives/39.html` 更改为 `域名/archives/5`。

进入后台，找到 `设置 - 永久链接`，启用地址重写功能，并按照个人习惯自定义文展/页面/分类路径即可，如下图所示：

![永久链接设置](https://www.huarzone.com/usr/uploads/images/blog-images/39/2543096764.png)

### 自定义后台路径

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

### 表情Emoji支持

> 支持Emoji小表情，例如：✨🤖🎄📖🧭🎯👻🍳⛅🎉❄️🧐🔍🀄🏆

【MySQL】执行上述`sql`语句来修改表的编码，并将 `Typecho` 目录下的`config.inc.php` 配置文件中数据库定义参数中的 `charset` 为 `utf8mb4`：

## 自定义 CSS

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义 CSS`

### 首页标题文字居中

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

### 文章标题居中

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

### 博客名称&LOGO扫光效果

```css
/* 博客名称&logo扫光效果 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}

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

### 划过头像放大并旋转

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

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

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

### 时光机圆形头像

```css
/* 时光机圆形头像 */
.img-square {
    border-radius: 50%;
}

.list-group-item .thumb-sm .img-square {
    border-radius: 5px;
}
```

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

```css
/* 美化网站右侧滚动条样式 */
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}

/* 定义滚动条轨道 */ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

### 文章版式阴影化

```css
/* 首页文章版式阴影颜色 */
.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);
}
```

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

```css
/* 右侧列表导航栏图标颜色 */
.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;
}
```

### 等距标签云

```css
/* 词云等距美化 */
#tag_cloud-2 a {
    border-radius: 5px;
    width: 32%;
}
```

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

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

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

### 赞赏按钮跳动

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

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

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

### 评论边框

```css
/* 评论边框 */
.comment-parent {
    margin: 20px;
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.3);
}
```

### 粗斜体上色

```css
/* 粗斜体上色 */
strong {
    color: #f26522;
}

em {
    font-style: normal;
    color: #fcaf17;
}
```

### 开启全站黑白模式

#### 方式一

```css

html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
}

#### 方式二

#### 方式三

#### 方式四

```css

<style>html {
    -webkit-filter: grayscale(100%);
}</style>

```

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

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

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

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

### 修改H1/H2标题背景颜色

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

### 手机端屏蔽热门文章和标签云

```css
/* 手机端屏蔽热门文章和标签云 */
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}
```

## 自定义 JavaScript

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义 JavaScript`

### 网页文字禁止复制

### 复制成功提示

### 复制自带文章版权

clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain', textData);
    }
}
/* 复制自带版权代码结束 */
```

### 网站加载完成提示

```

### 左侧图标颜色和彩色标签云

如果博客开启了 `PJAX`，需要在 `PJAX回调函数` 里面添加以下代码：

### 动态网站标题

### 打字动画效果

### 添加复制弹窗

添加以下代码至 `自定义输出body尾部的HTML代码`：

```html

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
```

将以下代码添加到 `自定义JavaScripts`：

### 自定义音乐播放器音量

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

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

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

## 自定义 Head / Body

食用方法：复制下面代码到 `handsome主题 > 设置外观 > 开发者设置 > 自定义输出head 头部的HTML代码 / 自定义输出body 尾部的HTML代码`

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

### 动态网站标题

### 网页鼠标点击特效

### 万能的控制台

### 气泡背景

```html
//容器ID
id: '',

// 个数
num: 100,

// 如果数量小于num，有这些几率添加一个新的
start_probability: 0.1,

// 初始半径最小值
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代码` 中添加下面代码：

### 禁用 F12 调试模式

## 更多自定义

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

将代码中的自我介绍修改为展示的内容，将以下代码放到 `主题后台-外观-设置外观-初级设置-博主的介绍` 内即可。

### 给正文添加结束标识

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

```html

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

```

修改完上述文件后，在 `handsome主题 > 设置外观 > 开发者设置 > 自定义CSS` 处添加以下代码：

```css
/* 文章正文下的结束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;
}
```

### 右侧添加倒计时

同时，在 `后台-外观设置-开发者设置-自定义输出body尾部` 添加以下代码：

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

### 增加站点统计信息

打开网站根目录 `/usr/themes/handsome/libs/Content.php` 文件，找到 `class Content` 所在行，在其上面添加如下代码：

/* 响应时间 */
function timer_start() {
    global $timestart;
    $mtime = explode(' ', microtime());
    $timestart = $mtime[1] + $mtime[0];
    return true;
}

timer_start();

```

然后，打开网站根目录 `/usr/themes/handsome/component/sidebar.php` 文件，找到 `` 处，根据个人爱好选择合适地方添加下面代码即可：

### 自定义字体

推荐一款比较不错的字体 - 抖音美好体：https://www.shejidt.com/fonts/474

推荐一个比较好用格式转化在线工具：https://convertio.co/

然后，前往 `外观设置-开发者设置-自定义css` 中添加以下代码：

```css
/* 自定义字体 */
@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(/usr/uploads/fonts/xxx.woff) format('woff2')
}

* {
    font-family: HarmonyOS_Sans_SC_Medium
}

body {
    font- family: HarmonyOS!important;
}
```

### 博客顶部添加天气

首先，去心知天气官网注册账号并申请API，然后，在 `/usr/themes/handsome/component/headnav.php` 文件中，找到 `<?php endif;?>` 代码行，并在其下方添加以下代码：

### 404页面自动返回首页

打开网站根目录 `/usr/themes/handsome/404.php` 文件，找到代码 `h1 class="text-shadow text-white">404` 所在行，并在其下面加入以下代码：

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

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

打开网站根目录 `/usr/themes/handsome/functions.php` 文件，在其最底部添加以下代码：

然后，在 `/usr/themes/handsome/post.php` 在63行左右添加如下代码（大概在文章分类后面）：

```html

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

### 文章底部添加标签

打开网站根目录 `/usr/themes/handsome/post.php` 文件，在其适当位置添加以下代码：

```php

标签：<?php $this->tags('，', true, 'no tag'); ?>
```

---

本站的魔改到此为止，本文较多内容参考自：https://www.5k5b.com/archives/5.html。

如果你想获取更多美化教程，可以参考该博客文章。

Handsome 博客主题美化记录

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

树莓派搭建 Clash 透明代理/网关

AList 网盘存储列表美化记录

YOLO V8 实战：私有数据集训练全指南

Pytorch 模型转换成 ONNX 模型格式

Docker 配置深度学习炼丹炉（初级）

云端部署：使用 Django 打造自己的网站

AList 网盘存储列表美化记录

炼丹服务器 CentOS 7 安装 NVIDIA 显卡驱动

探秘 Web 身份验证：掌握 Cookie 与 Session 工作原理

排序算法：深度解析 & 代码实现

Handsome 博客主题美化记录

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Handsome 博客主题美化记录

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款