关于Hansome主题本站魔改

Author：小旭
发布时间：August 30, 2021
12883 views
21 comments
39393 words
Categories：教程科普

## 前言

- 本站美化教程来自各地网络/博客
- 这篇文章作为本站美化的记录，有新增时会实时更新。

## 文件说明

文件源码下载 CSS文件 `xiaoxu.css`和JS文件 `xiaoxu.js`
</div>

本站所有美化样式均放在以下文件中
</div>

部分样式代码是纯粹的CSS或者JS，如果单独放到 `配置外观—自定义CSS`或者 `自定义JS`中，代码多的话是比较乱的，所以才将这些整理成文件。

<button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.sicx.top/Local/handsome/xiaoxu.css','_blank')"><i class="glyphicon glyphicon-download-alt"></i>xiaoxu.css</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.sicx.top/Local/handsome/xiaoxu.js','_blank')"><i class="glyphicon glyphicon-download-alt"></i>xiaoxu.js</button>

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

放入后台-外观设置-开发者设置-自定义CSS

```css
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    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-dfee72a0f443c5a65a331ab25bcc84b192" 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-dfee72a0f443c5a65a331ab25bcc84b192" class="collapse collapse-content"><p></p>

开发者设置-自定义css

```css
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
```

开发者设置-自定义js

```js
//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
```

开发者设置-自定义head

```html
<div id="percentageCounter"></div>
```

## 版权美化

以下CSS-放入后台-外观设置-开发者设置-自定义CSS

```css
/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

background-color: #ABBAC3;

margin-bottom: 3px;
}

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

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

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}
```

**左侧代码,复制到<font color=#FF0000>博客底部左侧信息</font>**

```HTML
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站版权信息">
<a href="./" title="小旭の破站">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">小旭の破站</span>
</a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站ICP备案号">
    <a href="https://beian.miit.gov.cn/" target="_blank" title="渝ICP备19016543号-2" style="pointer;">
   <span class="badge-subject"> 渝ICP备</span><span class="badge-value bg-green">19016543号-2</span>
</a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站公安备案号">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50022502000584" title="渝公网安备 50022502000584号" style="pointer;"><span class="badge-subject">渝公网安备</span>
<span class="badge-value bg-green">50022502000584号</span>
</a>
</div>
```

**右侧代码,复制到<font color=#FF0000>博客底部右侧信息</font>**

```HTML
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站主题模板">
<a href="https://www.ihewro.com/">
<span class="badge-subject">Themes</span><span class="badge-value bg-blue">Handsome</span></a>
</div>
 
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站驱动程序">
<a href="https://typecho.org">
<span class="badge-subject">Powered</span><span class="badge-value bg-orange">Typecho</span></a>
</div>
```

**修改**`usr/themes/handsome/component/footer.php`**从117行footer替换到footer**

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

## 正文末尾End标识

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-078bf649e60130822b1c722fe19c22a658" aria-expanded="true"><div class="accordion-toggle"><span style="">正文末尾End标识</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-078bf649e60130822b1c722fe19c22a658" class="collapse collapse-content"><p></p>

**在模板文件`post.php`的适当91位置添加下述代码

```php

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

```

**添加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-c2b8a837838fa973da2b7afea71aa4d363" 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-c2b8a837838fa973da2b7afea71aa4d363" class="collapse collapse-content"><p></p>

**在模板文件`post.php`的适当91位置添加下述代码**

```php

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

```

**添加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;}
```

[转载丛林小二][2]
<p></p></div></div></div>

## Google API字体

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

插入到自定义输出head 头部的HTML代码

```HTML
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
```

**后台css**

```css
body {font-family: 'Yanone Kaffeesatz';}
```

## 图标五颜六色

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

自定义Javascript和Pjax回调函数添加

```js
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);  
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
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
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});
```

## 背景js动画

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d81e0ee778c117a79cfe4dbfd997d47219" aria-expanded="true"><div class="accordion-toggle"><span style="">背景js动画</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d81e0ee778c117a79cfe4dbfd997d47219" class="collapse collapse-content"><p></p>
**自定义输出body 尾部的HTML代码**

```html
<script type="text/JavaScript" color="120,128,128" src="https://oss.sicx.top/canvas-nest.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-93928c075bc18b073bb1924514ad84aa23" 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-93928c075bc18b073bb1924514ad84aa23" class="collapse collapse-content"><p></p>

设置外观→开发者设置→自定义CSS，填入以下css样式

```css
.topButton{top: unset;bottom: 135px;}
.settings{top: unset;bottom: 46px;}
 #goToTop {color: #fff!important;background-color: #F99!important;}
```

更改“返回到顶部”按钮的图标：文件：`footer.php`文件，位于：目录主题` / handsome / component /`，将代码：

```html
<span class="settings-icon2"><i width="13px" height="13px" data-feather="corner-right-up"></i></span>
```

**替换为：**

```HTML
<span class="settings-icon2"><i width="20px" height="20px" data-feather="navigation-2"></i></span>
```

## 栏目列表美化

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

`修改后的使用前提：文章编辑页面中，文章头图样式选择选择小版式。`

**代码如下**：
文件：Content.php文件，位于:主题/handsome/libs/，将第943行开始的下述代码(V8.4.1)：

```html
<div class="panel-small single-post box-shadow-wrap-normal">
    <div class="index-post-img-small post-feature index-img-small">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
        </a>
    </div>
```

**替换**

```html
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img">
            <img $img class="post-pic lazy">
            </div>
        </a>
    </div>
    <div class="tt-blur-img">
    <img $img class="lazy post-pic border-radius-6">
    </div>
```

**CSS修改如下**
设置外观→开发者设置→自定义CSS，填入以下css样式：

```css
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
```

## LOGO扫光

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

代码添加到开发者设置->自定义CSS中

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

全站页面使用白色时，需要在`后台设置-外观设置-主题色调自定义搭配`修改为`white-white-white`

设置外观→开发者设置→自定义CSS，填入以下css样式：

`````css
/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}
`````

## 局部阴影

`代码添加到开发者设置->自定义CSS中`

```css
/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*文章圆角-阴影*/
.panel {
    box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
    border-radius: 6px!important;
}
```

## 右侧栏加入每日pixiv热榜图片

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

开源作者Github：[https://github.com/mokeyjay/Pixiv-daily-top50-widget]([https://](https://github.com/mokeyjay/Pixiv-daily-top50-widget))

主题设置 - 开发者设置 - 全局右侧广告位添加以下代码

```html
< iframe  src = “ https://cloud.mokeyjay.com/pixiv ”  frameborder = “ 0 ”   style = “ 宽度：240 像素；高度：380 像素；” > </ iframe >
```

然后修改`handsome/component/sidebar.php`

搜索广告,把广告改成pixiv每日热门

## 修改字体

代码添加到开发者设置->自定义CSS中，填入下列代码~

```css
/* zcool-kuaile-regular */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  font-style: normal;
  font-weight: regular;
  src: url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot'); /* IE9 Compat Modes */
  src: local('ZCOOL KuaiLe'), local('ZCOOLKuaiLe-Normal'),
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff') format('woff'), /* Modern Browsers */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.svg#ZCOOLKuaiLe') format('svg'); /* Legacy iOS */
}
/* 全局字体 */
* {
    font-family: 'ZCOOL KuaiLe';
}
```

## 博主文字介绍动态化

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

## QQ

以下提到的`JSON`内容添加到`/usr/themes/handsome/usr/OwO.json`文件里面，压缩包内的文件夹放到`/usr/themes/handsome/assets/img/emotion`目录内

```json
"QQ":{
    "type": "image",
    "name": "QQ",
    "container":[
      {
        "icon": "Y.qq1",
        "text": "QQ"
      },
      {
        "icon": "Y.qq2",
        "text": "QQ"
      },
      {
        "icon": "Y.qq3",
        "text": "QQ"
      },
      {
        "icon": "Y.qq4",
        "text": "QQ"
      },
      {
        "icon": "Y.qq5",
        "text": "QQ"
      },
      {
        "icon": "Y.qq6",
        "text": "QQ"
      },
      {
        "icon": "Y.qq7",
        "text": "QQ"
      },
      {
        "icon": "Y.qq8",
        "text": "QQ"
      },
      {
        "icon": "Y.qq9",
        "text": "QQ"
      },
      {
        "icon": "Y.qq10",
        "text": "QQ"
      },
      {
        "icon": "Y.qq11",
        "text": "QQ"
      },
      {
        "icon": "Y.qq12",
        "text": "QQ"
      },
      {
        "icon": "Y.qq13",
        "text": "QQ"
      },
      {
        "icon": "Y.qq14",
        "text": "QQ"
      },
      {
        "icon": "Y.qq15",
        "text": "QQ"
      },
      {
        "icon": "Y.qq17",
        "text": "QQ"
      },
      {
        "icon": "Y.qq18",
        "text": "QQ"
      },
      {
        "icon": "Y.qq19",
        "text": "QQ"
      },
      {
        "icon": "Y.qq20",
        "text": "QQ"
      },
      {
        "icon": "Y.qq23",
        "text": "QQ"
      },
      {
        "icon": "Y.qq24",
        "text": "QQ"
      },
      {
        "icon": "Y.qq25",
        "text": "QQ"
      },
      {
        "icon": "Y.qq26",
        "text": "QQ"
      },
      {
        "icon": "Y.qq27",
        "text": "QQ"
      },
      {
        "icon": "Y.qq28",
        "text": "QQ"
      },
      {
        "icon": "Y.qq29",
        "text": "QQ"
      },
      {
        "icon": "Y.qq30",
        "text": "QQ"
      },
      {
        "icon": "Y.qq31",
        "text": "QQ"
      },
      {
        "icon": "Y.qq32",
        "text": "QQ"
      },
      {
        "icon": "Y.qq33",
        "text": "QQ"
      },
      {
        "icon": "Y.qq34",
        "text": "QQ"
      },
      {
        "icon": "Y.qq35",
        "text": "QQ"
      },
      {
        "icon": "Y.qq36",
        "text": "QQ"
      },
      {
        "icon": "Y.qq37",
        "text": "QQ"
      },
      {
        "icon": "Y.qq38",
        "text": "QQ"
      },
      {
        "icon": "Y.qq39",
        "text": "QQ"
      },
      {
        "icon": "Y.qq40",
        "text": "QQ"
      },
      {
        "icon": "Y.qq41",
        "text": "QQ"
      },
      {
        "icon": "Y.qq42",
        "text": "QQ"
      },
      {
        "icon": "Y.qq43",
        "text": "QQ"
      },
      {
        "icon": "Y.qq44",
        "text": "QQ"
      },
      {
        "icon": "Y.qq45",
        "text": "QQ"
      },
      {
        "icon": "Y.qq46",
        "text": "QQ"
      },
      {
        "icon": "Y.qq47",
        "text": "QQ"
      },
      {
        "icon": "Y.qq48",
        "text": "QQ"
      },
      {
        "icon": "Y.qq49",
        "text": "QQ"
      },
      {
        "icon": "Y.qq50",
        "text": "QQ"
      },
      {
        "icon": "Y.qq51",
        "text": "QQ"
      },
      {
        "icon": "Y.qq52",
        "text": "QQ"
      },
      {
        "icon": "Y.qq53",
        "text": "QQ"
      },
      {
        "icon": "Y.qq54",
        "text": "QQ"
      },
      {
        "icon": "Y.qq55",
        "text": "QQ"
      },
      {
        "icon": "Y.qq56",
        "text": "QQ"
      },
      {
        "icon": "Y.qq57",
        "text": "QQ"
      },
      {
        "icon": "Y.qq58",
        "text": "QQ"
      },
      {
        "icon": "Y.qq59",
        "text": "QQ"
      },
      {
        "icon": "Y.qq60",
        "text": "QQ"
      },
      {
        "icon": "Y.qq61",
        "text": "QQ"
      },
      {
        "icon": "Y.qq62",
        "text": "QQ"
      },
      {
        "icon": "Y.qq63",
        "text": "QQ"
      },
      {
        "icon": "Y.qq64",
        "text": "QQ"
      },
      {
        "icon": "Y.qq65",
        "text": "QQ"
      },
      {
        "icon": "Y.qq66",
        "text": "QQ"
      },
      {
        "icon": "Y.qq67",
        "text": "QQ"
      },
      {
        "icon": "Y.qq68",
        "text": "QQ"
      },
      {
        "icon": "Y.qq69",
        "text": "QQ"
      },
      {
        "icon": "Y.qq70",
        "text": "QQ"
      },
      {
        "icon": "Y.qq71",
        "text": "QQ"
      },
      {
        "icon": "Y.qq72",
        "text": "QQ"
      },
      {
        "icon": "Y.qq73",
        "text": "QQ"
      },
      {
        "icon": "Y.qq74",
        "text": "QQ"
      },
      {
        "icon": "Y.qq75",
        "text": "QQ"
      },
      {
        "icon": "Y.qq76",
        "text": "QQ"
      },
      {
        "icon": "Y.qq77",
        "text": "QQ"
      },
      {
        "icon": "Y.qq78",
        "text": "QQ"
      },
      {
        "icon": "Y.qq79",
        "text": "QQ"
      },
      {
        "icon": "Y.qq80",
        "text": "QQ"  
      }
    ]
  },
```

## bilibili

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

```json
"哔哩哔哩":{
    "type": "image",
    "name": "bilibili",
    "container":[
      {
        "icon": "baiyan",
        "text": "白眼"
      },
      {
        "icon": "bishi",
        "text": "鄙视"
      },
      {
        "icon": "bizui",
        "text": "闭嘴"
      },
      {
        "icon": "chan",
        "text": "馋"
      },
      {
        "icon": "daku",
        "text": "大哭"
      },
      {
        "icon": "dalao",
        "text": "大佬"
      },
      {
        "icon": "dalian",
        "text": "打脸"
      },{
        "icon": "dianzan",
        "text": "点赞"
      },{
        "icon": "doge",
        "text": "doge"
      },
      {
        "icon": "facai",
        "text": "发财"
      },{
        "icon": "fadai",
        "text": "发呆"
      },{
        "icon": "fanu",
        "text": "发怒"
      },{
        "icon": "ganga",
        "text": "尴尬"
      },{
        "icon": "guzhang",
        "text": "鼓掌"
      },{
        "icon": "haixiu",
        "text": "害羞"
      },{
        "icon": "heirenwenhao",
        "text": "黑人问号"
      },{
        "icon": "huaixiao",
        "text": "坏笑"
      },{
        "icon": "jingxia",
        "text": "惊吓"
      },{
        "icon": "keai",
        "text": "可爱"
      },{
        "icon": "koubi",
        "text": "抠鼻"
      },{
        "icon": "kun",
        "text": "困"
      },{
        "icon": "liubixie",
        "text": "流鼻血"
      },{
        "icon": "liuhan",
        "text": "流汗"
      },
      {
        "icon": "miantian",
        "text": "腼腆"
      },{
        "icon": "nanguo",
        "text": "难过"
      },{
        "icon": "outu",
        "text": "呕吐"
      },{
        "icon": "qinqin",
        "text": "亲亲"
      },{
        "icon": "se",
        "text": "色"
      },{
        "icon": "shengbing",
        "text": "生病"
      },{
        "icon": "shengqi",
        "text": "生气"
      },{
        "icon": "shuizhao",
        "text": "睡着"
      },{
        "icon": "sikao",
        "text": "思考"
      },{
        "icon": "tiaopi",
        "text": "调皮"
      },{
        "icon": "touxiao",
        "text": "偷笑"
      },{
        "icon": "tuxie",
        "text": "吐血"
      },{
        "icon": "weiqu",
        "text": "委屈"
      },{
        "icon": "weixiao",
        "text": "微笑"
      },{
        "icon": "wunai",
        "text": "无奈"
      },{
        "icon": "xiaoku",
        "text": "笑哭"
      },{
        "icon": "xieyanxiao",
        "text": "斜眼笑"
      },{
        "icon": "yiwen",
        "text": "疑问"
      },{
        "icon": "yun",
        "text": "晕"
      },{
        "icon": "zaijian",
        "text": "再见"
      },{
        "icon": "zhuakuang",
        "text": "抓狂"
      }
    ]
  },
```

## 标签/博客信息背景颜色

```css
.badge {
    background-color: rgb(0, 0, 0)!important;
}
.post-tags a {
    background-color: #000000;  
}
```

## 左侧边栏内容自动定位选中

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

**默认true，当你进入你的博客某个内容页面（比如文章/页面/分类），会自动在左侧边栏中跟随选中（置顶导航和折叠导航下暂不支持） 设置false，则关闭该特性。**

```json
{
  "left_location":false
}
```

---

## 首页打字一言

* 先调用一下`FontAwesome`图标文件
* 不调用可能不会显示加载的图标跟爱心图标

```html
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://api.sicx.top/js/typed.min.js" type="text/javascript" charset="utf-8"></script>
```

插入自定义 JavaScript,该接口调用故梦博客
</div>

[给博客添加打字一言特效 - 故梦吖 (gmit.vip)](https://www.gmit.vip/69.html)

```js

function typedword() {
    $.ajax({
        type: "get",
        url: "https://api.gumengya.com/get/love/",
        async: true,
        success: function(word) {
            var list = [];
            for (var i = 0; i < word.data.length; i++) {
                list.push(word.data[i]['text']);
            }
            $("#typedWord").typed({
                strings: list,
                typeSpeed: 55,
                loop: true,
                backDelay: 300,
            });
        }
    });
}
$(function() {
    typedword();
});
```

外观插入

```html
<p><i style="color:red;" class="fa fa-heart" aria-hidden="true"></i><span id="typedWord"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></span><i style="color:red;" class="fa fa-heart" aria-hidden="true"></i><script>$(function(){typedword();})</script></p>
```

## 文章插入网页

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

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

## 博客信息美化

* `将以下代码加到/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文件，找到代码`

```php
  
     <?php if (@!in_array('info', Utils::checkArray($this->options->sidebarSetting))): ?>
  <section id="blog_info" class="widget widget_categories wrapper-md clear">
   <h5 class="widget-title m-t-none text-md"><?php _me("博客信息") ?></h5>
   <ul class="list-group box-shadow-wrap-normal">
       <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
       <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="award"></i></span> <span
                   class="badge
       pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章数目") ?></li>
       <?php if (COMMENT_SYSTEM == 0): ?>
       <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="message-circle"></i></span>
           <span class="badge
       pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
       <?php endif; ?>
       <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="calendar"></i></span>
           <span class="badge
       pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
       <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span
                   class="badge
       pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
   </ul>
  </section>
  <?php endif; ?>
     <?php if ($this->options->adContentSidebar != ""): ?>

```

* **替换以下代码**

<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>  
       </ul>
      </section>
      <?php endif; ?>
         <?php if ($this->options->adContentSidebar != ""): ?>
```

## 加载动画

以下代码添加至`/usr/themes/handsome/header.php`内 最后

```php
 
    <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 skt-loading">
    <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>
```

`主题设置，自定义 JavaScript，添加以下代码`

```js
    $(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

> `第二种,加载动画`-参考故梦博客

```php
 
    <style>
#load{
    background-color:#fff;
    height:100%;width:100%;
    position:fixed;
    z-index:1;
    margin-top:0px;
    top:0px;
}
#load-center{
    width:100%;
    height:100%;
    position:relative;
}
#load-center-absolute{
    position:absolute;
    left:50%;
    top:50%;
    height:50px;
    width:50px;
    margin-top:-25px;
    margin-left:-25px;
}
.sk-chase {
    width: 50px;
    height: 50px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #000;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
    50% {
    transform: scale(0.4); 
    } 100%, 0% {
    transform: scale(1.0); 
    } 
}
    </style>
  
<body id="body" class="fix-padding skt-loading">
    <body id="body" class="fix-padding" style="overflow:hidden">
        <div id="load" style="z-index:9999999">
  <div id="load-center">
    <div id="load-center-absolute">
        <div class="sk-chase">
          <div class="sk-chase-dot"></div>
          <div class="sk-chase-dot"></div>
          <div class="sk-chase-dot"></div>
          <div class="sk-chase-dot"></div>
          <div class="sk-chase-dot"></div>
          <div class="sk-chase-dot"></div>
        </div>
    </div>
  </div>
</div>
</body>
</body>
```

js调用修改

```js
$(function(){
    $("#load").fadeOut(200,function(){
        $("body").css('overflow','');
        $("#load").remove();
    });
})
```

## 右侧添加人生倒计时（岁月不待人）

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3cdf88aea4c335311711dbed2a71d57c47" 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-3cdf88aea4c335311711dbed2a71d57c47" 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()
```

**js文件弄好后，在 `设置外观-开发者设置-自定义输出body尾部的HTML代码`处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名**

```html

<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></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)
}
```

## 创建云雾背景

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

```css

{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("https://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}

```

编辑/usr/themes/handsome/component/footer.php文件
在<?php $this->footer(); ?>上面添加以下代码

```php

    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>

```

## 随机API头图

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

1. 首先把文章最后的代码存到一个php文件里，位置任意，我这里的位置为`/code/get_img.php`
2. 打开`/usr/themes/handsome/libs/content/CommonContent.php`文件找到`whenSwitchHeaderImgSrc`函数附近
3. 注释掉`$randomNum = unserialize(INDEX_IMAGE_ARRAY);`和`$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';`
4. 添加一行`$random = '/code/get_img.php?_='.rand(999, 3000);`

修改完的 `Content.php`文件 `whenSwitchHeaderImgSrc`函数附近应该是长这样的。

```php
<?php
/*
直接请求将随机跳转到一个图片
*/
$imgArr = [];

//https://www.pexels.com/zh-cn/
$imgArr[0] = [
'list'=>[267371,230477,1115680,838413,235922,1560424,1056251,416160,96938,2194261,
666839,1133957,1269025,1089932,338711,573910,670061,3113124,247431,434090,
1209843,1684187,358312,1536619,96380,164821,373945,1547248,301920,256468,
1653823,59106,556665,461198,376464,321588,3193917,1040157,189349,396547,
3145552,220067,285173,409701,917076,255464,735911,2120016,1162540,],
//'fun'=> function($id){return "https://images.pexels.com/photos/{$id}/pexels-photo-{$id}.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";}
'fun'=> function($id){return "https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images";}
];
//https://i.keaitupian.net/
// $imgArr[1] = [
//     'list'=>[
//         'up/40/c0/7c/ec2caa4f7b67d2b44a95bece4e7cc040.jpg',
//         'up/38/05/17/57ae05cdfe607c1f877a7881ea170538.jpg'
//     ],
//     'fun'=> function($id){return "https://i.keaitupian.net/".$id;}
// ];
function oneImg($id=false){
global $imgArr;
//求图片总数

// echo $count;
//随机选择一个
if($id == false){
    $count = 0;
    foreach($imgArr as $item){
        $count += count($item['list']);
    }
    $id = rand(0, $count - 1);
}
//累积下标
$key = 0;
foreach($imgArr as $item){
    if(isset($item['list'][$id - $key])){
        return $item['fun']($item['list'][$id - $key]);
    }else{
        $key += count($item['list']);
        continue;
    }
}
}

header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit;
```

根据代码里的样式添加图片的配置就可以了，最好找用id区分图片的网站，配置项会短小很多。
`list`里面是图片id
`fun`里面是当前数组的url生成函数，想通过参数修改图片大小在这里面修改就搞定了。

**目前就更新这么多**

End

本文标题：关于Hansome主题本站魔改

本文链接：https://www.sicx.top/01.html

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

Last modification：April 15, 2024

❤如果觉得文章不错的话，可以点个赞~或者请小旭喝杯咖啡嘛~ヾ(◍°∇°◍)ﾉﾞ❤

21 comments

彼岸花露
April 15th, 2024 at 02:26 pm

ios下冒出灰色与滑动闪烁，触发原因也不太明朗偶尔网站就会蒙上一层类似这种（Safari浏览器白色背景下会蒙上一层灰色）https://www.alipan.com/s/CqwWj9Q2wvi 然后网站滑动过程中就会闪烁（补个博主博客视频）
https://www.alipan.com/s/8tRiFdZDrmB

Reply
1. 小旭 UP主
  April 15th, 2024 at 02:59 pm
  
  @彼岸花露
  
  可以试试深色模式看看会不会触发这个闪屏问题~
  
  Reply
彼岸花露
April 15th, 2024 at 02:17 pm

hello博主，最近发现一个问题经过美化后的网站在ios下会产生闪屏的问题（链接为博主站在iphone14下的闪屏问题演示，绿色为浏览器背景在Safari浏览器同样会出现且更明显，ipad与安卓暂时并为发现此问题）视频演示：https://www.alipan.com/s/qvG9zEjxe8z 奈何本人能力有限能请博主看看问题出现原因吗

Reply
1. 彼岸花露
  April 15th, 2024 at 02:30 pm
  
  @彼岸花露
  
  作为iPhone用户手机访问就有点催残不知道啥时候看着看着就狂闪眼睛受不了
  
  Reply
  1. 小旭 UP主
    April 15th, 2024 at 02:56 pm
    
    @彼岸花露
    
    本人iPhone11未发现该问题,电脑也没出现该问题~OωO
    你试试我的图床网站https://www.imgxu.cn/ 刷新会不会出现该问题呢？
    
    Reply
    
    彼岸花露
    April 15th, 2024 at 03:35 pm
    
    @小旭
    
    图床正常其他网页也正常博客不正常博主博客也不正常过来评论也出现了几次，不知道是不是较新款iPhone有什么东西改了吧
    
    Reply
    
    彼岸花露
    April 15th, 2024 at 03:32 pm
    
    @小旭
    
    电脑和安卓是不会出现。ipad也不会出现此问题只在iPhone上出现且较频繁但是也不知道怎么触发的
    
    Reply
    
    小旭 UP主
    April 15th, 2024 at 04:11 pm
    
    @彼岸花露
    
    我测试没啥问题,不太清楚了QAQ
    
    Reply
安心
March 10th, 2024 at 03:05 pm

大佬，首页打字一言调用FontAwesome图标和typed扩展代码是放在哪？
我放在自定义输出head 头部的HTML代码里他有爱心，不打字一直转圈
求指教

Reply
1. 小旭 UP主
  March 10th, 2024 at 03:15 pm
  
  @安心
  
  用的什么主题？OωO
  
  Reply
  1. 安心
    March 10th, 2024 at 03:33 pm
    
    @小旭
    
    跟你用的同款Handsome
    
    Reply
    
    小旭 UP主
    March 10th, 2024 at 03:56 pm
    
    @安心
    
    那就是大概api接口问题，回去我看看我现在在外面不太方便处理OωO
    
    Reply
    
    安心
    March 10th, 2024 at 03:58 pm
    
    @小旭
    
    好的感谢大佬OωO
    
    Reply
    
    小旭 UP主
    March 10th, 2024 at 05:25 pm
    
    @安心
    
    方便发一下你的网站嘛？
    
    Reply
    
    安心
    March 10th, 2024 at 05:46 pm
    
    @小旭
    
    http://blog.c0p.cn/
    
    Reply
爱情塔罗
February 28th, 2024 at 09:16 pm

博客三栏，不知道手机访问，页面会不会乱！

Reply
1. 小旭 UP主
  February 28th, 2024 at 09:32 pm
  
  @爱情塔罗
  
  默认不会,除非瞎改代码
  
  Reply
X.的笔记
November 18th, 2023 at 07:43 pm

该评论仅登录用户及评论双方可见

Reply
湫
October 4th, 2023 at 06:58 pm

Reply
许七安 UP主
July 18th, 2023 at 12:05 am

你好

Reply
1. 听风
  October 1st, 2023 at 12:02 pm
  
  @许七安
  
  你好
  
  Reply

关于Hansome主题本站魔改

小旭 • 2021 年 08 月 30 日

## 前言

- 本站美化教程来自各地网络/博客
- 这篇文章作为本站美化的记录，有新增时会实时更新。

## 文件说明

文件源码下载 CSS文件 `xiaoxu.css`和JS文件 `xiaoxu.js`
</div>

本站所有美化样式均放在以下文件中
</div>

部分样式代码是纯粹的CSS或者JS，如果单独放到 `配置外观—自定义CSS`或者 `自定义JS`中，代码多的话是比较乱的，所以才将这些整理成文件。

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

## 文章标题居中

放入后台-外观设置-开发者设置-自定义CSS

## 页面顶部进度条

开发者设置-自定义css

```css
/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
```

开发者设置-自定义js

开发者设置-自定义head

```html
<div id="percentageCounter"></div>
```

## 版权美化

以下CSS-放入后台-外观设置-开发者设置-自定义CSS

```css
/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

background-color: #ABBAC3;

margin-bottom: 3px;
}

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

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

**左侧代码,复制到<font color=#FF0000>博客底部左侧信息</font>**

**右侧代码,复制到<font color=#FF0000>博客底部右侧信息</font>**

**修改**`usr/themes/handsome/component/footer.php`**从117行footer替换到footer**

</footer>
```

## 正文末尾End标识

**在模板文件`post.php`的适当91位置添加下述代码

```php

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

```

**添加css**

## 转载申明

**在模板文件`post.php`的适当91位置添加下述代码**

**添加css**

[转载丛林小二][2]
<p></p></div></div></div>

## Google API字体

插入到自定义输出head 头部的HTML代码

```HTML
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
```

**后台css**

```css
body {font-family: 'Yanone Kaffeesatz';}
```

## 图标五颜六色

自定义Javascript和Pjax回调函数添加

## 背景js动画

```html
<script type="text/JavaScript" color="120,128,128" src="https://oss.sicx.top/canvas-nest.js"></script>
```

## 右侧返回到顶部位置重设

设置外观→开发者设置→自定义CSS，填入以下css样式

```css
.topButton{top: unset;bottom: 135px;}
.settings{top: unset;bottom: 46px;}
 #goToTop {color: #fff!important;background-color: #F99!important;}
```

更改“返回到顶部”按钮的图标：文件：`footer.php`文件，位于：目录主题` / handsome / component /`，将代码：

```html
<span class="settings-icon2"><i width="13px" height="13px" data-feather="corner-right-up"></i></span>
```

**替换为：**

```HTML
<span class="settings-icon2"><i width="20px" height="20px" data-feather="navigation-2"></i></span>
```

## 栏目列表美化

`修改后的使用前提：文章编辑页面中，文章头图样式选择选择小版式。`

**代码如下**：
文件：Content.php文件，位于:主题/handsome/libs/，将第943行开始的下述代码(V8.4.1)：

**替换**

**CSS修改如下**
设置外观→开发者设置→自定义CSS，填入以下css样式：

## LOGO扫光

代码添加到开发者设置->自定义CSS中

## 全站页面纯白

全站页面使用白色时，需要在`后台设置-外观设置-主题色调自定义搭配`修改为`white-white-white`

设置外观→开发者设置→自定义CSS，填入以下css样式：

## 局部阴影

`代码添加到开发者设置->自定义CSS中`

## 右侧栏加入每日pixiv热榜图片

开源作者Github：[https://github.com/mokeyjay/Pixiv-daily-top50-widget]([https://](https://github.com/mokeyjay/Pixiv-daily-top50-widget))

主题设置 - 开发者设置 - 全局右侧广告位添加以下代码

```html
< iframe  src = “ https://cloud.mokeyjay.com/pixiv ”  frameborder = “ 0 ”   style = “ 宽度：240 像素；高度：380 像素；” > </ iframe >
```

然后修改`handsome/component/sidebar.php`

搜索广告,把广告改成pixiv每日热门

## 修改字体

代码添加到开发者设置->自定义CSS中，填入下列代码~

## 博主文字介绍动态化

## QQ

以下提到的`JSON`内容添加到`/usr/themes/handsome/usr/OwO.json`文件里面，压缩包内的文件夹放到`/usr/themes/handsome/assets/img/emotion`目录内

## bilibili

## 标签/博客信息背景颜色

```css
.badge {
    background-color: rgb(0, 0, 0)!important;
}
.post-tags a {
    background-color: #000000;  
}
```

## 左侧边栏内容自动定位选中

```json
{
  "left_location":false
}
```

---

## 首页打字一言

* 先调用一下`FontAwesome`图标文件
* 不调用可能不会显示加载的图标跟爱心图标

插入自定义 JavaScript,该接口调用故梦博客
</div>

[给博客添加打字一言特效 - 故梦吖 (gmit.vip)](https://www.gmit.vip/69.html)

外观插入

## 文章插入网页

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

## 博客信息美化

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

* `找到/usr/themes/handsome/component/sidebar.php文件，找到代码`

```

* **替换以下代码**

## 加载动画

以下代码添加至`/usr/themes/handsome/header.php`内 最后

`主题设置，自定义 JavaScript，添加以下代码`

```js
    $(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

> `第二种,加载动画`-参考故梦博客

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}

js调用修改

```js
$(function(){
    $("#load").fadeOut(200,function(){
        $("body").css('overflow','');
        $("#load").remove();
    });
})
```

## 右侧添加人生倒计时（岁月不待人）

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

**js文件弄好后，在 `设置外观-开发者设置-自定义输出body尾部的HTML代码`处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名**

```html

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

**最后一步，去自定义CSS里面添加以下代码**

100% {
    background-position: 30px 0
 }

.sidebar-count .content .item .progress .progress-percentage {
  color: var(--info)
}
```

## 创建云雾背景

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

编辑/usr/themes/handsome/component/footer.php文件
在<?php $this->footer(); ?>上面添加以下代码

## 随机API头图

修改完的 `Content.php`文件 `whenSwitchHeaderImgSrc`函数附近应该是长这样的。

```php
<?php
/*
直接请求将随机跳转到一个图片
*/
$imgArr = [];

header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit;
```

**目前就更新这么多**

关于Hansome主题本站魔改

21 comments

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

关于Hansome主题本站魔改

NSFW-API开源的图片鉴黄API

欢迎使用 Typecho

Pve+爱快(iKuai)+OpenWrt(旁路由) 双软路由配置教程

自建USDT收款方式

Handsome主题静态资源CDN加速服务

自建NsfwJs图片审核接口

Ypay-Mini

关于Hansome主题本站魔改

Pve+爱快(iKuai)+OpenWrt(旁路由) 双软路由配置教程

关于Hansome主题本站魔改

21 comments

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

关于Hansome主题本站魔改

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