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