记录一下handsome的美化魔改
源码大多来自网络,部分会放上链接
自定义css里面
/*首页文章标题居中及字体设置*/
.letterspacing{
font-family: 楷体;
}
.font-thin{
font-family: 华文行楷;
}
.bg-light.lter{
text-align: center;
}
/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
color:rgba(107, 209, 255, 1);
transition:color 0.2s linear
}
/*文章阴影*/
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(78, 110, 242, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 10px;
height: 16px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px #fff;
border-radius: 10px;
background-color: #fff;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #4662d9;
}
/*下一页样式*/
.iconbuleng {
width: 1.5em;
height: 1.25em;
vertical-align: -0.25em;
fill: currentColor;
overflow: hidden;
}
.page-navigator>.current>a, .page-navigator>.current>a:focus, .page-navigator>.current>a:hover, .page-navigator>.current>span, .page-navigator>.current>span:focus, .page-navigator>.current>span:hover{
background-color:#4662d9!important;
border-color#4662d9!important;
}
/*彩色标签云*/
#tag_cloud-2 a{
background-color:#4662d9!important;
}
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
}
}
/*文章内打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: rotate(10deg);
box-shadow: 0 0px 180px rgba(255, 155, 193, 0.47);
}
/*首页文章列表头图悬停放大并将超出范围隐藏*/
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
自定义Javascript里面
<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
自定义输出head 头部的HTML代码
<script>
//天气
(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
window.SeniverseWeatherWidget('show', {
flavor: "slim",
location: "WW0TU7X25TBT",
geolocation: true,
language: "zh-Hans",
unit: "c",
theme: "auto",
token: "64322430-4c81-4bd2-8d2f-84c73dbf3ee6",
hover: "enabled",
container: "tp-weather-widget"
})
</script>
<script src="https://buleng.xyz/code/iconfont.js"></script>
自定义输出body 尾部的HTML代码
<!--复制弹框-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<!--烟花-->
<script src="//cdn.jsdelivr.net/gh/kaygb/JS-effects/fireworks.js"></script>
<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "2000"
})
</script>
新年倒计时
新年倒计时放到首页列表最前方广告位
<!--倒计时开始--> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font> </h1> <center> <div id="CountMsg" class="HotDate"> <span id="t_d">0 天</span> <span id="t_h">0 时</span> <span id="t_m">0 分</span> <span id="t_s">0 秒</span> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2021/02/12 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> <!--倒计时结束-->
css放到全局css
/*新年倒计时*/
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: transparent;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}
五颜六色字体
原创链接请点这里
<script>
/*
* 2021年1月2日23:34:26
* 故梦
* admin@gmit.vip
*/
function sjcolor(){
var colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999", "#3bca6e", "#f23232", "#834e75", "#23b7e5", "#f60"];
/*设置颜色*/
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > b").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*左侧导航字体颜色*/
document.querySelectorAll("#post-panel > div > div > div > div.panel-body > div.nav-tabs-alt > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div > div > div > div").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div.blog-post > div > div.post-meta.wrapper-lg > h2 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*首页面板*/
document.querySelectorAll("#small_widgets > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#small_widgets > ul").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*文章标题*/
document.querySelectorAll("#search_input").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*搜索框*/
document.querySelectorAll("#content > main > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > div a >span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*友情链接*/
document.querySelectorAll("#header > div > ul > li > div > div > div > div > div > div > a > span > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*工具导航*/
document.querySelectorAll("#tag_toc > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*文章目录*/
document.querySelectorAll("#content > main > div > div > header > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#typedWord").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*签名标题*/
document.querySelectorAll("#tag_cloud-2 h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#tag_cloud-2 a").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*标签颜色*/
document.querySelectorAll("#blog_info > ul > li > span.badge.pull-right").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*博客信息*/
document.querySelectorAll("#blog_info > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*热门文章颜色*/
document.querySelectorAll("#widget-tabs-4-comments > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > div > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > small > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*最新评论颜色*/
document.querySelectorAll("#widget-tabs-4-random > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*随机文章颜色*/
document.querySelectorAll("#sidebar > section.widget.widget_categories.wrapper-md.clear.visible-lg.visible-md > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*手机阅读标题*/
}sjcolor();
</script>
把这代码放在handsome模板的footer.php即可
然后把sjcolor();加到pjax回调函数里 不然页面加载之后颜色就没了
然后把sjcolor();加到pjax回调函数里 不然页面加载之后颜色就没了
版权属于:不冷
本文链接:https://www.buleng.xyz/archives/123/
转载时须注明出处及本声明
好看,赞了~~!ヾ(≧∇≦*)ゝ
有的我没放上面
太懒了哈哈