前言

前几天购入了一个Typecho的主题叫Handsome,但是总感觉少了点啥...于是就开启了美化之路~~
以下部分代码来自网络~~

美化

文章内容复制弹窗提醒

展示的样式就是右上角这样的啦,把这段代码丢到Handesome主题的自定义 JavaScript里就好了

var prefix = window.location.protocol;
var url = window.location.host;
var route = window.location.pathname;
var urlmain = prefix+url+route;
document.body.oncopy = function() {$.message({message:"尊重原创,转载请注明出处!<br/>本文作者:木小果<br/>本文链接:"+urlmain,title:"复制成功",type:"info",autoHide:!1,time:"5000"});};

复制弹出.png

首页文章列表悬停上浮

把以下代码丢到主题设置的自定义 CSS里即可

/* 首页文章列表悬停上浮Start */
.blog-post .panel-small:not(article),.blog-post .panel:not(article){transition:all 0.3s}
.blog-post .panel-small:not(article):hover,.blog-post .panel:not(article):hover{transform:translateY(-10px);box-shadow:0 8px 10px rgba(73,90,47,0.47)}
/* 首页文章列表悬停上浮END */

首页文章列表悬停上浮.gif

文章内打赏图标跳动

把以下代码丢到主题设置的自定义 CSS里即可

/* 赞赏按钮浮动Start */
.btn-pay{animation:star 0.5s ease-in-out infinite alternate}
@keyframes star{from{transform:scale(1)}
to{transform:scale(1.1)}
}
/* 赞赏按钮浮动END */

文章内打赏图标跳动.gif

彩色标签云

把以下代码丢到主题设置的自定义 CSS

/* 彩色标签云Start */
let tags = document.querySelectorAll("#tag_cloud-2 a");let colorArr = ["#428BCA","#AEDCAE","#ECA9A7","#DA99FF","#FFB380","#D9B999"];tags.forEach(tag =>{tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];tag.style.backgroundColor = tagsColor}
);
/* 彩色标签云END */

然后把这个代码丢到PJAX回调函数里就阔以啦

/* 彩色标签云Start */
let tags = document.querySelectorAll("#tag_cloud-2 a");let colorArr = ["#428BCA","#AEDCAE","#ECA9A7","#DA99FF","#FFB380","#D9B999"];tags.forEach(tag =>{tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];tag.style.backgroundColor = tagsColor}
);
/* 彩色标签云END */

彩色标签云.png

最后修改:2022 年 01 月 28 日
如果觉得我的文章对你有用,请随意赞赏~