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

Author： Peter斩天邪
发布时间：February 8, 2020
3101views
5 comments
6430 words
Categories：技术 Web

前言

因为Handsome主题一直在更新,为了防止以后更新的时候忘了某一项过程,所以写下这篇文章

Handsome购买

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

购买链接|详情:

在复杂中，保持简洁。
如你所见，这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡....

正文

1.控制台输出信息(使用中)(其他主题均使用)

![图片上传失败(0)]

  <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 用于输出普通信息

console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息

2.Fireworks点击烟花特效(其他主题适用)(未使用)

上图:

安装方法

先下载Fireworks文件
fireworks下载

下载地址:https://www.lanzous.com/i95hila
解压后上传到网站上的任意位置
如https://www.zhantianxie.com/js/ 下
将下面代码放到`之前,handsome主题可以放到foot.php中或者放到后台开发者设置-自定义输出body 尾部的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在手机端加载时烟花效果会卡顿,请酌情使用!

刷新浏览器,查看效果

3.头像呼吸光环和鼠标悬停旋转放大(使用中)

复制下面的代码到自定义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

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

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

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

    to {
        transform: scale(1.1);
    }
}

7. 首页文章列表悬停上浮(未使用)

添加到自定义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
食用方法详情请看:

ColorHighlight插件实现Mac风格代码高亮

基于 Highlight的代码语法高亮插件 for Typecho，可显示语言类型、行号，有复制代码到剪切板等功能…

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

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

10. Racns-优雅的美化前台&后台

Peter只是用了其后台主题,尚未使用前台美化插件,所以只展示后台

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

11. Typecho文章附件上传Github并使用jsDelivr访问(使用中)

插件名: UploadGithubForTypecho
作者: 皮皮凛 qwq.best
食用方法:

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

一句话介绍本插件用于将文章附件上传至 Github，并使用 jsDelivr 进行文件访问加速。作者皮皮凛凛姬...

作者的介绍:

Typecho文章附件上传Github并使用jsDelivr访问插件发布~UploadGithubForTypecho

12. handsome神代綺凜式魔改主题插件(使用中)

下载&安装

GitHub链接: https://github.com/Sanakey/KirinShiKi
食用方式:

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

<!--复制弹框-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

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

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

14.闪字特效(使用中)

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

<!--博主介绍的闪字特效--> <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.自定义头图(使用中)

效果图:

过程

现在网站目录下创建一个php文件,并把下面的代码复制进去,我的是网站目录/code/img.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;

打开/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函数是这样的(可以直接复制代码替换)

  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号,在上传图片时最好同一一下图片格式
图片格式转换工具:

[windows]格式工厂_v4.10.5_去广告

前言Peter最近给博客挂埋,在网上找了一堆图片后,emmmm,各种格式都有,所以.....格式工厂来了!注意!下...

这是使用jsdelivr进行白嫖,至于白嫖方法,可以看:

利用jsDelivr白嫖全球超高速静态资源访问服务！

参考文章

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
May 1st, 2020 at 02:05 pm

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

Reply
david
May 1st, 2020 at 02:04 pm

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

Reply
david
May 1st, 2020 at 12:30 pm

放松放松放松法撒发的

Reply
david
May 1st, 2020 at 12:30 pm

很棒啊

Reply
CoolCrush
March 7th, 2020 at 11:43 am

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

Reply

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

Peter斩天邪 • 2020 年 02 月 08 日

前言

因为Handsome主题一直在更新,为了防止以后更新的时候忘了某一项过程,所以写下这篇文章

Handsome购买

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

购买链接|详情:

在复杂中，保持简洁。
如你所见，这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡....

正文

1.控制台输出信息(使用中)(其他主题均使用)

![图片上传失败(0)]

  <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 用于输出普通信息

console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息

2.Fireworks点击烟花特效(其他主题适用)(未使用)

上图:

安装方法

先下载Fireworks文件
fireworks下载

下载地址:https://www.lanzous.com/i95hila
解压后上传到网站上的任意位置
如https://www.zhantianxie.com/js/ 下
将下面代码放到`之前,handsome主题可以放到foot.php中或者放到后台开发者设置-自定义输出body 尾部的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>

刷新浏览器,查看效果

3.头像呼吸光环和鼠标悬停旋转放大(使用中)

复制下面的代码到自定义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

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

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

5. 彩色标签云(使用中)

6. 文章内打赏动态图标(使用中)

食用方法:添加到后台自定义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中

.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
食用方法详情请看:

ColorHighlight插件实现Mac风格代码高亮

基于 Highlight的代码语法高亮插件 for Typecho，可显示语言类型、行号，有复制代码到剪切板等功能…

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

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

10. Racns-优雅的美化前台&后台

Peter只是用了其后台主题,尚未使用前台美化插件,所以只展示后台

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

11. Typecho文章附件上传Github并使用jsDelivr访问(使用中)

插件名: UploadGithubForTypecho
作者: 皮皮凛 qwq.best
食用方法:

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

一句话介绍本插件用于将文章附件上传至 Github，并使用 jsDelivr 进行文件访问加速。作者皮皮凛凛姬...

作者的介绍:

Typecho文章附件上传Github并使用jsDelivr访问插件发布~UploadGithubForTypecho

12. handsome神代綺凜式魔改主题插件(使用中)

下载&安装

GitHub链接: https://github.com/Sanakey/KirinShiKi
食用方式:

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

<!--复制弹框-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

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

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

14.闪字特效(使用中)

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

<!--博主介绍的闪字特效--> <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.自定义头图(使用中)

效果图:

过程

现在网站目录下创建一个php文件,并把下面的代码复制进去,我的是网站目录/code/img.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;

打开/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函数是这样的(可以直接复制代码替换)

  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号,在上传图片时最好同一一下图片格式
图片格式转换工具:

[windows]格式工厂_v4.10.5_去广告

前言Peter最近给博客挂埋,在网上找了一堆图片后,emmmm,各种格式都有,所以.....格式工厂来了!注意!下...

这是使用jsdelivr进行白嫖,至于白嫖方法,可以看:

利用jsDelivr白嫖全球超高速静态资源访问服务！

参考文章

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/

前言

Handsome购买

正文

1.控制台输出信息(使用中)(其他主题均使用)

2.Fireworks点击烟花特效(其他主题适用)(未使用)

安装方法

3.头像呼吸光环和鼠标悬停旋转放大(使用中)

4. 左侧文章图标和评论头像鼠标悬停旋转(使用中)

5. 彩色标签云(使用中)

6. 文章内打赏动态图标(使用中)

7. 首页文章列表悬停上浮(未使用)

8.代码高亮(Handsome推荐)(使用中)

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

10. Racns-优雅的美化前台&后台

11. Typecho文章附件上传Github并使用jsDelivr访问(使用中)

12. handsome神代綺凜式魔改主题插件(使用中)

下载&安装

特点

14.闪字特效(使用中)

15.自定义头图(使用中)

过程

配置img.php

参考文章

5 comments