关于Typecho的主题魔改记录

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

• 本文记录博主在使用该款主题时进行的一系列魔改，也就是你现在看到的一系列效果
• 本站[http://www.cyz4531.top]使用的是handsome主题，Typecho的一款88元付费主题，感觉本站好看的可以去购买来使用，先声明，作者没给我广告费，我真心觉得这款主题功能强大而已，哈哈！
• 本文讲述的大多是基于handsome主题的哦！
• 进行主题魔改之前，小伙伴们最好先去备份主题哦！

---

handsome主题

一款基于的功能齐全、前后台美丽的、付费的博客主题，想搭建自己博客的小伙伴可以来试试哦！
请看handsome主题作者的文章介绍：https://www.ihewro.com/archives/489/

---

洛小依的前台改造插件GorgeousSky

请看插件作者的文章介绍：https://www.lovexint.com/archives/145/

效果如图：

---

头图和标题翻转动画

请看插件作者的文章介绍：https://keymoe.com/archives/55/

效果如图：

图片太大，必须得压缩，不过还是可以看的，效果就是实现在文章第一次出现时，实现动态的出场，是不是感觉也很炫！

---

随机图片

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

食用方法

• 步骤1：后台 -> 外观 -> 设置外观 -> 主题增强功能 ->博客图片来源设置 ， 选择第一个选项(只显示随机图片)
• 步骤2：设置外观 -> 外观设置，确保 文章页面不显示头图、首页不显示头图者俩项是没有被勾选
  如图：
  
• 步骤3：把主题内置的默认图片更换，更换成自己想要的图片。主题内置的随机图片文件夹的路径 -> 根目录/user/themes/handsome/user/img/sj

图片的大小最好别太大，推荐做法是先把图片压缩，再上传
推荐个图片压缩网站：http://www.bejson.com/ui/compress_img/

---

文章内的打赏图标跳动

效果如图：

食用方法：将以下代码复制粘贴到自定义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

将nk=QQ中的QQ换为自己的QQ账号

---

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

效果如图：

食用方法：将以下代码复制到自定义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：在心知天气的官网[https://www.seniverse.com/]上注册个账号，并开通免费版服务。
步骤2：在themes/handsome/component/headnav.php中搜索 ，在搜索到的地方的前一行添加如下代码，并把其中的公钥和私钥修改为你自己的即可。

    <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>

公钥和私钥在心知天气的 控制台 的 基本信息 可以看到，然后把15和16行的公钥和私钥修改为你的即可

---

网页失去焦点标题变化

效果如图：

食用方法：把以下代码复制到自定义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)
    }
});

---

以上就是我对handsome主题进行的魔改记录，希望能够帮助到你们！嘻嘻,下面俩篇文章也推荐阅读哦！
[Typecho CommentToMail邮件插件模板美化]
[如何查看自己发表的文章是否被百度收录呢？]