基于Handsome主题美化

此文章发布于47个月前,部分信息可能已经过时,请自行斟酌确认

1、首页文章图片获取焦点放大

将以下代码添加至后台主题设置自定义CSS,放大的时间和大小自行修改数值

/*首页文章图片获取焦点放大1*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

2、鼠标经过头像转动并放大

将以下代码添加至后台主题设置自定义CSS,转动快慢和头像大小自行修改数值

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

3、Mac风格代码高亮

4、底部页脚标签样式

将以下代码添加至后台主题设置自定义CSS

/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

将以下代码添加至后台主题设置博客底部左侧信息,信息修改成自己的

<div class="github-badge">
<a href="./" title="©2019 晴栀">
<span class="badge-subject">©Copyright</span><span class="badge-value bg-blue">2019 晴栀</span>
</a>
</div>
<a href="http://beian.miit.gov.cn">&nbsp&nbsp&nbsp&nbsp&nbsp<img src="https://www.xinyouqu.com/usr/uploads/2019/11/2824256208.png">冀ICP备*******号<a/>

将以下代码添加至后台主题设置博客底部右侧信息

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

添加完成后,记得去handsome\component\footer.php删除原有声明代码哦!

5、魔性动态标题

复制下方代码添加至后台主题设置自定义输出head 头部的HTML代码即可

<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つ·ェ·⊂)404 not find';}else{document.title=normal_title;}});</script>

6、文章底部赞赏图标跳动

将以下代码添加至后台主题设置自定义CSS

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

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

    to {
        transform: scale(1.1);
    }
}

7、彩色标签云Tag

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中。

8、右侧列表导航栏图标颜色

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
最后修改:2019 年 11 月 12 日 05 : 14 PM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 晴栀

    滴!访客卡!请上车的乘客系好安全带,现在是:Tue Nov 12 2019 16:53:50 GMT+0800 (中国标准时间)

发表评论