前言
因为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>
- console.info 用于输出提示性信息
- console.error用于输出错误信息
- console.warn用于输出警示信息
2.Fireworks点击烟花特效(其他主题适用)(未使用)
上图:
安装方法
- 先下载Fireworks文件fireworks下载
- 解压后上传到网站上的任意位置
如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
食用方法详情请看:
9.前台后台打字特效(其他主题均适用)(使用中)
插件名称:ActivatePowerMode
熊猫小 A修改
GitHub地址: https://github.com/AlanDecode/Typecho-Plugin-ActivatePowerModeHandsome用户可以这样设置
:
10. Racns-优雅的美化前台&后台
Peter
只是用了其后台主题,尚未使用前台美化插件,所以只展示后台
11. Typecho文章附件上传Github并使用jsDelivr访问(使用中)
插件名: UploadGithubForTypecho
作者: 皮皮凛 qwq.best
食用方法:
作者的介绍:
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号,在上传图片时最好同一一下图片格式
图片格式转换工具:

这是使用
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/
5 comments
very good,https://www.zhpeter.com/114/
滴!学生卡!打卡时间:上午11:41:45 写滴!学生卡!打卡时间:下午2:03:56,请上车的乘客系好安全带~
放松放松放松法撒发的
很棒啊
滴!学生卡!打卡时间:上午11:41:45 写得好好哟,我要给你生猴子!::funny:04:: 骚年,我怀疑你写了一篇假的文章!::funny:03:: ,请上车的乘客系好安全带~