本站使用handsome主题魔改的折腾过程
handsome主题
一款基于的功能齐全、前后台美丽的、付费的博客主题,想搭建自己博客的小伙伴可以来试试哦!
主题改造
洛小依的主题改造插件GorgeousSky
头图和标题翻转动画
随机图片
在编辑文章时,如果大头图地址和小头图地址不填,而且文章时显示头图的,那么将文章的第一张图片作为头图。这是因为 handsome的默认
博客头图的设置
方式,默认是在不填大小头图地址下,显示的是文章内的第一张图片。
食用方法
- 步骤1:后台 -> 外观 -> 设置外观 -> 主题增强功能 ->博客图片来源设置 , 选择第一个选项(只显示随机图片)
- 步骤2:设置外观 -> 外观设置,确保
文章页面不显示头图、首页不显示头图者俩项是没有被勾选
如图:
- 步骤3:把主题内置的默认图片更换,更换成自己想要的图片。主题内置的随机图片文件夹的路径 ->
根目录/user/themes/handsome/user/img/sj
图片的大小最好别太大,推荐做法是先把图片压缩,再上传
文章内的打赏图标跳动
效果如图:
自定义CSS
即可/*文章内打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
文章标题居中
效果如图:
自定义CSS
即可/*文章标题居中*/
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
复制弹框
效果如图:
食用方法:
步骤1:先将下面代码复制到自定义输出body 尾部的HTML代码
即可
<!--复制弹框-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
步骤2:再将下面代码复制到自定义 Javascript
即可
<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
将QQ头像设置为左边导航栏图片
效果如图:
初级设置 -> 图片头像地址
即可https://q1.qlogo.cn/g?b=qq&nk=QQ&s=640
文章内的图片悬停放大并超出范围
效果如图:
自定义CSS
即可/*文章内的图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {overflow: hidden;}#post-content img {border-radius: 10px;transition: 0.5s;}#post-content img:hover {transform: scale(1.05);}@keyframes star {from {transform: scale(1);}to {transform: scale(1.1);}}
顶部进度条
自定义 JavaScript
即可<!--页面顶部进度条-->
let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.querySelector('.progress-top').style.width = (scrollTop / scrollAvail) * 100 + '%';
}
博客介绍彩色跳动显示
效果如图:
初级设置 -> 博主的介绍
即可<!--博主介绍的闪字特效--> <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 = ["我是白的不能再白的小白" ].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>
文章图片阴影
效果如图:
自定义CSS
即可.wrapper-lg img{
box-shadow: darkgrey 0px 0px 5px 5px;
}
博客上方添加心知天气
效果如图:
食用方法:
步骤1:在心知天气的官网上注册个账号,并开通免费版服务。
步骤2:在themes/handsome/component/headnav.php
中搜索<!-- / search form -->,在搜索到的地方的前一行添加如下代码,并把其中的公钥
和私钥
修改为你自己的即可。
<!-- 知心天气-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
"flavor": "slim",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "badge",
"color": "#C6C6C6",
"uid": "你的公钥",
"hash": "你的私钥"
});
tpwidget("show");</script>
<!-- 心知结束-->
网页失去焦点标题变化
效果如图:
自定义JavaScript
即可var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
document.title = "网页已崩溃!";
clearTimeout(titleTime)
} else {
document.title = "(/≧▽≦/)你又回来了! " ;
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
版权属于:冷眸_ln
本文链接:https://cyz4531.top/index.php/archives/18/
可以转载本站文章,但转载时请以超链接形式标明文章原始出处,Thank you!
请问自己家里nas搭建博客需要备案吗?个人网站怎么备案ヾ(≧∇≦*)ゝ
你可以看下这篇微信推文,讲得很详细 链接:https://mp.weixin.qq.com/s/AUDB4fqC3vRr0AsBTYvWMw
感谢大佬分享!