[web]Typecho主题Handsome魔改记录(持续更新)

Author： Peter斩天邪
发布时间：February 8, 2020
1911views
5 comments
6430 words
Categories：技术 Web
百度已收录

## 前言
因为`Handsome`主题一直在更新,为了防止以后更新的时候忘了某一项过程,所以写下这篇文章
## Handsome购买
<div class="tip inlineBlock success">

`handsome`真的是一款非非非非常好的`Typecho`主题,且作者仍然不断更新,所以请大家支持正版,尊重作者的劳动成果!

</div>
购买链接|详情:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://www.ihewro.com/archives/489/" target="_blank" class="post_inser_a no-external-link">

<div class="inner-content" style="margin-left: 10px;">
<p class="inser-title"></p>
<div class="inster-summary text-muted">
在复杂中，保持简洁。
</div>
</div>
</a>

</div>

</div>
## 正文
### 1.控制台输出信息(使用中)(其他主题均使用)
![图片上传失败(0)]

```js
  <script>
  console.info(
  "%c在下！明人不说暗话！%c我喜欢你的钱！",
  'color: #ffffff; background: #000000; padding:5px 10px 5px 10px;font-size:40px;border-radius:12px 0 0 12px;', 'color: #000000; background: #FE9A00; padding:5px 10px;font-size:40px;border-radius:0 12px 12px 0;')
  console.log("%c    ","background: url(https://fbi.gs/2019/05/03/5ccb151472db7.gif) no-repeat left center;font-size: 60px;","\n");
  </script>
```

1、console.log 用于输出普通信息
2. console.info 用于输出提示性信息
3. console.error用于输出错误信息
4. console.warn用于输出警示信息
</div>

### 2.Fireworks点击烟花特效(其他主题适用)(未使用)
上图:
![](https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/1805584077.png)
#### 安装方法

1. 先下载Fireworks文件
   <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b32ae5ed03506db6e4d115494874aeb046" aria-expanded="true"><div class="accordion-toggle"><span>fireworks下载</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div id="collapse-b32ae5ed03506db6e4d115494874aeb046" class="panel-body collapse">
下载地址:https://www.lanzous.com/i95hila 
</div></div>
2. 解压后上传到网站上的任意位置
   如https://www.zhantianxie.com/js/ 下
3. 将下面代码放到``之前,`handsome`主题可以放到`foot.php`中或者放到后台`开发者设置`-`自定义输出body 尾部的HTML代码`中

```html
<script type="text/javascript" src="https://www.zhantianxie.com/js/fireworks/meme.js"></script>
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://www.zhantianxie.com/js/fireworks/anime.min.js"></script>
<script type="text/javascript" src="https://www.zhantianxie.com/js/fireworks/fireworks.js"></script>
```

文中`fireworks目录`即为你放在你网站的fireworks的位置,如https://www.zhantianxie.com/js/fireworks (别引用我的fireworks啊)
`注意:该JS在手机端加载时烟花效果会卡顿,请酌情使用!`
4. 刷新浏览器,查看效果
### 3.头像呼吸光环和鼠标悬停旋转放大(使用中)
![](https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/2134296536.png)

复制下面的代码到`自定义CSS`

```css
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

### 4. 左侧文章图标和评论头像鼠标悬停旋转(使用中)
复制下面的代码到`自定义CSS`

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

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

### 5. 彩色标签云(使用中)
插件：Typecho-ColorfulTags-For-Handsome
使用方法:解压后重命名为ColorfulTags文件，到后台根据需要完成设置即可
项目地址: https://github.com/invelop/Typecho-ColorfulTags-For-Handsome
### 6. 文章内打赏动态图标(使用中)

食用方法:添加到后台`自定义CSS`中

```css
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

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

### 7. 首页文章列表悬停上浮(未使用)
添加到`自定义CSS`中

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

### 8.代码高亮(Handsome推荐)(使用中)
插件名: `ColorHighlight`
作者:`Xcnte`
食用方法详情请看:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href=" https://www.xcnte.com/archives/377/" target="_blank" class="post_inser_a no-external-link">

<div class="inner-content" style="margin-left: 10px;">
<p class="inser-title"> ColorHighlight插件实现Mac风格代码高亮</p>
<div class="inster-summary text-muted">
基于 Highlight的代码语法高亮插件 for Typecho，可显示语言类型、行号，有复制代码到剪切板等功能…
</div>
</div>
</a>

</div>

</div>

### 9.前台后台打字特效(其他主题均适用)(使用中)

插件名称:`ActivatePowerMode` `熊猫小 A修改`
GitHub地址: https://github.com/AlanDecode/Typecho-Plugin-ActivatePowerMode
`Handsome用户可以这样设置`:

### 10. Racns-优雅的美化前台&后台
`Peter`只是用了其后台主题,尚未使用前台美化插件,所以只展示后台

由于作者规定,所以本文不提供下载链接,但该项目为免费开源项目
原文地址: https://racns.com/211.html
因为该项目并不收费,所以请尊重作者的劳动成果,谢谢!

</div>
### 11. Typecho文章附件上传Github并使用jsDelivr访问(使用中)
插件名: UploadGithubForTypecho
作者: 皮皮凛 qwq.best
食用方法:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://www.zhpeter.com/88/" target="_blank" class="post_inser_a no-external-link">
<div class="inner-image bg" style="background-image: url(https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/4059362804.png);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">[Typecho插件推荐]Typecho文章附件上传Github并使用jsDelivr访问插件--UploadGithubForTypecho</p>
<div class="inster-summary text-muted">
一句话介绍本插件用于将文章附件上传至 Github，并使用 jsDelivr 进行文件访问加速。作者皮皮凛凛姬...
</div>
</div>
</a>

</div>

</div>
作者的介绍:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href=" https://qwq.best/dev/152.html" target="_blank" class="post_inser_a no-external-link">

<div class="inner-content" style="margin-left: 10px;">
<p class="inser-title"> Typecho文章附件上传Github并使用jsDelivr访问插件发布~UploadGithubForTypecho</p>
<div class="inster-summary text-muted">
 Typecho文章附件上传Github并使用jsDelivr访问插件发布~UploadGithubForTypecho
</div>
</div>
</a>

</div>

</div>
### 12. handsome神代綺凜式魔改主题插件(使用中)
#### 下载&安装
GitHub链接: https://github.com/Sanakey/KirinShiKi
食用方式:

1. 在GitHub下载完后放到服务器解压到typecho的插件`usr/plugins`目录
2. 重命名文件夹为` KirinShiKi`
   #### 特点
3. 美化首页文章头图样式。
4. 博客主头像增加悬浮旋转效果。
5. 顶栏增加左侧边栏模式切换开关。
6. 可以设置背景图片（默认提供随机二次元图片）
7. 添加网页标题卖萌文字
8. 右侧边栏添加智能自动隐藏
9. 添加了赞赏按钮跳动效果。
10. 添加了右下角版权信息标签。
11. 更多小细节等待你安装后发现。
    #### 说明
    在原主题基础上增加了彩色标签云代码，如果你之前有添加过类似代码，最好删除。
    ### 13.复制弹窗(使用中)
12. 首先将下方代码复制添加至后台设置`自定义输出body 尾部的HTML代码`

```html

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

2. 最后复制下方代码到`自定义JavaScript`即可

```js

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

### 14.闪字特效(使用中)

食用方法;
打开`后台`-`外观`-`设置外观`-`开发者设置`-把复制代码粘贴至`博主的介绍`即可
`把代码中的A boy called Peter 改成自己的介绍即可`

```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 = ["A boy called Peter" ].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> </span>
```

### 15.自定义头图(使用中)
效果图:

#### 过程

1. 现在网站目录下创建一个php文件,并把下面的代码复制进去,我的是网站目录/code/img.php

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

$imgArr[0] = [
    'list'=>[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,26,29,30,31,32,33,34,35,36,37],
    'fun'=> function($id){return "https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/UMR/{$id}.jpg";}
];

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

2. 打开`/usr/themes/handsome/libs/Content.php`文件找到`whenSwitchHeaderImgSrc`函数,
   `为了保险先备份Content.php`
   用`//注释 掉 $randomNum = unserialize(INDEX_IMAGE_ARRAY);和$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';`
   `并且添加$random = '/code/get_img.php?_='.rand(999, 3000);`
   改完后的whenSwitchHeaderImgSrc函数是这样的(可以直接复制代码替换)

```php
  public static function whenSwitchHeaderImgSrc($index = 0, $howToThumb, $attach, $content, $thumbField)
    {
        $options = mget();
       // $randomNum = unserialize(INDEX_IMAGE_ARRAY);

// 随机缩略图路径
        //$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined
      $random = '/code/img.php?_='.rand(999, 3000);
        $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
        $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i';
        $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i';

if ($howToThumb == '0') {
            return $random;
        } elseif ($howToThumb == '1' || $howToThumb == '2') {
            if (!empty($thumbField)) {
                return $thumbField;
            } elseif ($attach != null && isset($attach->isImage) && $attach->isImage == 1) {
                return $attach->url;
            } else {
                if (preg_match_all($pattern, $content, $thumbUrl)) {
                    $thumb = $thumbUrl[1][0];
                } elseif (preg_match_all($patternMD, $content, $thumbUrl)) {
                    $thumb = $thumbUrl[1][0];
                } elseif (preg_match_all($patternMDfoot, $content, $thumbUrl)) {
                    $thumb = $thumbUrl[1][0];
                } else {//文章中没有图片
                    if ($howToThumb == '1') {
                        return '';
                    } else {
                        return $random;
                    }
                }
                return $thumb;
            }
        } elseif ($howToThumb == '3') {
            if (!empty($thumbField)) {
                return $thumbField;
            } else {
                return $random;
            }
        }
    }
```

#### 配置img.php
现在开始配置img.php (就是第一步创建的那个php文件)
`{$id}`为图片的id号,在上传图片时最好同一一下图片格式
图片格式转换工具:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://www.zhpeter.com/93/" target="_blank" class="post_inser_a no-external-link">
<div class="inner-image bg" style="background-image: url(https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/2214583604.png);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">[windows]格式工厂_v4.10.5_去广告</p>
<div class="inster-summary text-muted">
前言Peter最近给博客挂埋,在网上找了一堆图片后,emmmm,各种格式都有,所以.....格式工厂来了!注意!下...
</div>
</div>
</a>

</div>

</div>
![](https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/1077591652.png)
这是使用`jsdelivr`进行白嫖,至于白嫖方法,可以看:
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://qwq.best/dev/113.html" target="_blank" class="post_inser_a no-external-link">

<div class="inner-content" style="margin-left: 10px;">
<p class="inser-title">利用jsDelivr白嫖全球超高速静态资源访问服务！</p>
<div class="inster-summary text-muted">

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

</div>

</div>

## 参考文章

> https://www.xcnte.com/archives/710/
> https://blog.imalan.cn/archives/208/
> https://racns.com/211.html
> https://qwq.best/dev/152.html
> https://gordsky.cn/106.html	https://www.cooyf.com/Typecho/1.html
> https://moozik.cn/archives/811/

Last modification：August 6th, 2020 at 09:32 am

您的每次打赏，都是我更新的不竭动力!

5 comments

fsffsafds Google Chrome 81.0.4044.129 Mac OS X 10.15.4 中国湖北黄冈
May 1st, 2020 at 02:05 pm

very good,https://www.zhpeter.com/114/

Reply
david Google Chrome 81.0.4044.129 Mac OS X 10.15.4 中国湖北黄冈
May 1st, 2020 at 02:04 pm

滴！学生卡！打卡时间：上午11:41:45 写滴！学生卡！打卡时间：下午2:03:56，请上车的乘客系好安全带~

Reply
david Google Chrome 81.0.4044.129 Mac OS X 10.15.4 中国湖北黄冈
May 1st, 2020 at 12:30 pm

放松放松放松法撒发的

Reply
david Google Chrome 81.0.4044.129 Mac OS X 10.15.4 中国湖北黄冈
May 1st, 2020 at 12:30 pm

很棒啊

Reply
CoolCrush Google Chrome 79.0.3945.130 Windows 10 中国河北石家庄
March 7th, 2020 at 11:43 am

滴！学生卡！打卡时间：上午11:41:45 写得好好哟,我要给你生猴子！::funny:04:: 骚年,我怀疑你写了一篇假的文章！::funny:03:: ，请上车的乘客系好安全带~

Reply

[web]Typecho主题Handsome魔改记录(持续更新)

Peter斩天邪 • 2020 年 02 月 08 日

## 前言
因为`Handsome`主题一直在更新,为了防止以后更新的时候忘了某一项过程,所以写下这篇文章
## Handsome购买
<div class="tip inlineBlock success">

`handsome`真的是一款非非非非常好的`Typecho`主题,且作者仍然不断更新,所以请大家支持正版,尊重作者的劳动成果!

1、console.log 用于输出普通信息
2. console.info 用于输出提示性信息
3. console.error用于输出错误信息
4. console.warn用于输出警示信息
</div>

### 2.Fireworks点击烟花特效(其他主题适用)(未使用)
上图:
![](https://cdn.jsdelivr.net/gh/zhantianxie/re-leases-of-site@latest/usr/uploads/2020/02/1805584077.png)
#### 安装方法

1. 先下载Fireworks文件
   <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2d5b2bc20e2471f44485edbd7c2bc7a856" aria-expanded="true"><div class="accordion-toggle"><span>fireworks下载</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div id="collapse-2d5b2bc20e2471f44485edbd7c2bc7a856" class="panel-body collapse">
下载地址:https://www.lanzous.com/i95hila 
</div></div>
2. 解压后上传到网站上的任意位置
   如https://www.zhantianxie.com/js/ 下
3. 将下面代码放到``之前,`handsome`主题可以放到`foot.php`中或者放到后台`开发者设置`-`自定义输出body 尾部的HTML代码`中

复制下面的代码到`自定义CSS`

```css
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

### 4. 左侧文章图标和评论头像鼠标悬停旋转(使用中)
复制下面的代码到`自定义CSS`

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

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

食用方法:添加到后台`自定义CSS`中

```css
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

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

### 7. 首页文章列表悬停上浮(未使用)
添加到`自定义CSS`中

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

### 9.前台后台打字特效(其他主题均适用)(使用中)

插件名称:`ActivatePowerMode` `熊猫小 A修改`
GitHub地址: https://github.com/AlanDecode/Typecho-Plugin-ActivatePowerMode
`Handsome用户可以这样设置`:

### 10. Racns-优雅的美化前台&后台
`Peter`只是用了其后台主题,尚未使用前台美化插件,所以只展示后台

由于作者规定,所以本文不提供下载链接,但该项目为免费开源项目
原文地址: https://racns.com/211.html
因为该项目并不收费,所以请尊重作者的劳动成果,谢谢!

```html

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

2. 最后复制下方代码到`自定义JavaScript`即可

### 14.闪字特效(使用中)

食用方法;
打开`后台`-`外观`-`设置外观`-`开发者设置`-把复制代码粘贴至`博主的介绍`即可
`把代码中的A boy called Peter 改成自己的介绍即可`

### 15.自定义头图(使用中)
效果图:

#### 过程

1. 现在网站目录下创建一个php文件,并把下面的代码复制进去,我的是网站目录/code/img.php

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

function oneImg($id=false){
    global $imgArr;
    //求图片总数

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

```php
  public static function whenSwitchHeaderImgSrc($index = 0, $howToThumb, $attach, $content, $thumbField)
    {
        $options = mget();
       // $randomNum = unserialize(INDEX_IMAGE_ARRAY);

<div class="inner-content" style="margin-left: 10px;">
<p class="inser-title">利用jsDelivr白嫖全球超高速静态资源访问服务！</p>
<div class="inster-summary text-muted">

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

</div>

</div>

## 参考文章

[web]Typecho主题Handsome魔改记录(持续更新)

5 comments

Leave a Comment Cancel reply

细谈https

[Typecho插件推荐]Typecho文章附件上传Github并使用jsDelivr访问插件--UploadGithubForTypecho

AS SSD Benchmark汉化版2.0.6694.23026

Tor(洋葱头) 8.0.6下载

闪迪文件加密软件(SanDisk SecureAccess v3.0)解除限制

[Windows]【转载】安全无毒，俄国大神重新打包制作的IDM 6.36.3 皮肤美化直装版

[Windows]班迪录屏(Bandicam)推荐

闪迪文件加密软件(SanDisk SecureAccess v3.0)解除限制

[Windows]优化工具第一弹

[Windows] QQ/微信/Tim/QQ轻聊版防撤回|多开补丁通用!

[web]Typecho主题Handsome魔改记录(持续更新)