本站使用handsome主题魔改的折腾过程

handsome主题

一款基于的功能齐全、前后台美丽的、付费的博客主题，想搭建自己博客的小伙伴可以来试试哦！

主题改造

洛小依的主题改造插件GorgeousSky

头图和标题翻转动画

随机图片

在编辑文章时，如果大头图地址和小头图地址不填，而且文章时显示头图的，那么将文章的第一张图片作为头图。这是因为 handsome的默认博客头图的设置方式，默认是在不填大小头图地址下，显示的是文章内的第一张图片。

食用方法

• 步骤1：后台 -> 外观 -> 设置外观 -> 主题增强功能 ->博客图片来源设置 ， 选择第一个选项(只显示随机图片)
• 步骤2：设置外观 -> 外观设置，确保 文章页面不显示头图、首页不显示头图者俩项是没有被勾选
  如图：

• 步骤3：把主题内置的默认图片更换，更换成自己想要的图片。主题内置的随机图片文件夹的路径 -> 根目录/user/themes/handsome/user/img/sj
  
  图片的大小最好别太大，推荐做法是先把图片压缩，再上传

图片压缩网站：http://www.bejson.com/ui/compress_img/

文章内的打赏图标跳动

效果如图：

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

文章标题居中

效果如图：

/*文章标题居中*/
.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

文章内的图片悬停放大并超出范围

效果如图：

/*文章内的图片悬停放大并将超出范围隐藏*/
.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);}}

顶部进度条

<!--页面顶部进度条-->
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>

文章图片阴影

效果如图：

.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>
<!-- 心知结束-->

网页失去焦点标题变化

效果如图：

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！