Handsome主题的美化修改

博主：晚风
发布时间：2023 年 02 月 01 日
106 次浏览
暂无评论
6729字数
分类：网站/教程

## 1.头像呼吸光环和鼠标悬停旋转放大

![Recording 2023-02-01 at 05.32.39.gif](http://img.wfy.pub/i/2023/02/01/63d989073b43f.gif)

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

## 2.文章内打赏图标跳动

![Recording 2023-02-01 at 05.34.29.gif](http://img.wfy.pub/i/2023/02/01/63d989738e02b.gif)

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
        transform: scale(1.1);
    }
}
```

## 3.彩色标签云

![1675200975255.png](http://img.wfy.pub/i/2023/02/01/63d989cf7859f.png)

设置方法：后台--外观-设置外观-开发者设置-自定义JavaScript
如果主题中启用了pjax，还需要将上面代码添加到`pjax`回调函数中
设置方法：后台--外观-设置外观-PJAX-PJAX回调函数
</div>

```
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;
});
```

更多样式：

```

 let tags = document.querySelectorAll("#tag_cloud-2 a");
 let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
 tags.forEach(tag => {
     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
     tag.style.backgroundColor = tagsColor;
 });
 
 
 let tags = document.querySelectorAll("#tag_cloud-2 a");
 let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
 tags.forEach(tag => {
     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
     tag.style.backgroundColor = tagsColor;
 });
 
 
 let tags = document.querySelectorAll("#tag_cloud-2 a");
 let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
 tags.forEach(tag => {
     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
     tag.style.backgroundColor = tagsColor;
 });
 
 
 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;
 });
 
 
 let tags = document.querySelectorAll("#tag_cloud-2 a");
 let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
 tags.forEach(tag => {
     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
     tag.style.backgroundColor = tagsColor;
 });
```

## 4.首页文章列表头图悬停放大并将超出范围隐藏

![Recording 2023-02-01 at 05.38.59.gif](http://img.wfy.pub/i/2023/02/01/63d98a8563ac6.gif)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

## 5.页面顶部进度条

![图片来源：大西瓜博客bwmelon.com](https://imgs.bwmelon.com/20190822215715.gif)

设置方法：先在`handsome/component/header.php`文件中最下面添加代码：
</div>

```
<div class="progress-top" style="position: fixed; top: 0px; height: 5px; background: rgba(31, 159, 199, 0.79); border-radius: 500px; z-index: 5200;"></div>
```

然后下面的代码放到`开发者设置`-`自定义JavaScript`中添加js代码：
</div>

```
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 + '%';
}
```

如果主题中启用了pjax，还需要将上面代码添加到pjax回调函数中
设置方法：后台--外观-设置外观-PJAX-PJAX回调函数
</div>

## 6.文章标题居中

![1675203713748.png](http://img.wfy.pub/i/2023/02/01/63d99481ec774.png)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.panel h2{
     text-align: center; 
 }
 .post-item-foot-icon{
     text-align: center;
 }
```

## 7. 美化底部版权

![Handsome底部版权.png](https://img.xyzbz.cn/i/2022/10/13/63479aa8707e0.png)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-博客底部左侧信息
</div>

```

<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.csl88.top/" target="_blank">
        <span class="badge-value bg-blue">©2023</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">皖ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">19023414号-2</span></a>
</div>
```

设置方法：后台--外观-设置外观-开发者设置-博客底部右侧信息
</div>

```

<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://www.aliyun.com/minisite/goods?userCode=bdv09vl7" target="_blank">
        <span class="badge-value bg-blue">阿里云提供服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/archives/489/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
```

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
/*底部页脚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-green {
  background-color: #3bca6e
}
```

把下面代码放在主题目录`usr/themes/handsome/component/footer.php`内大概在117行，覆盖原来的即可：
![图片来源：网友小宋xyzbz.cn](https://img.xyzbz.cn/i/2022/10/13/6347a0996d401.png)

```
<footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
        <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        </span>
        <span class="text-ellipsis">
            <?php
            $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>
```

暂时先改这么些，以后有新变动会在添加

> 美化样式参考源于：[Xcnte' s Blog](https://www.xcnte.com/archives/710/)，[大西瓜博客](https://bwmelon.com/archives/31/)，[Gujiu](https://cloud.tencent.com/developer/article/2184529)，[网友小宋](https://xyzbz.cn/archives/830/?replyTo=921)

> [在线网页gif录制：https://gifcap.dev/](https://gifcap.dev/)
> [官方开源地址：https://github.com/joaomoreno/gifcap](https://github.com/joaomoreno/gifcap)

## 以上教程均来自其他博主，本站转载教程仅供个人记录，有兴趣的博友可以访问以上博主站点

最后修改：2023 年 02 月 02 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

1
看看
LIlan
https://www.coinpayments.net/in...
吹吹晚风
hello
admin
十一月二十五的今天,坐在惠友嘉业上大夜班,是在无聊看了以前的b...
1
1

Handsome主题的美化修改

晚风 • 2023 年 02 月 01 日

## 1.头像呼吸光环和鼠标悬停旋转放大

![Recording 2023-02-01 at 05.32.39.gif](http://img.wfy.pub/i/2023/02/01/63d989073b43f.gif)

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

## 2.文章内打赏图标跳动

![Recording 2023-02-01 at 05.34.29.gif](http://img.wfy.pub/i/2023/02/01/63d989738e02b.gif)

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
        transform: scale(1.1);
    }
}
```

## 3.彩色标签云

![1675200975255.png](http://img.wfy.pub/i/2023/02/01/63d989cf7859f.png)

更多样式：

## 4.首页文章列表头图悬停放大并将超出范围隐藏

![Recording 2023-02-01 at 05.38.59.gif](http://img.wfy.pub/i/2023/02/01/63d98a8563ac6.gif)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

## 5.页面顶部进度条

![图片来源：大西瓜博客bwmelon.com](https://imgs.bwmelon.com/20190822215715.gif)

设置方法：先在`handsome/component/header.php`文件中最下面添加代码：
</div>

```
<div class="progress-top" style="position: fixed; top: 0px; height: 5px; background: rgba(31, 159, 199, 0.79); border-radius: 500px; z-index: 5200;"></div>
```

然后下面的代码放到`开发者设置`-`自定义JavaScript`中添加js代码：
</div>

如果主题中启用了pjax，还需要将上面代码添加到pjax回调函数中
设置方法：后台--外观-设置外观-PJAX-PJAX回调函数
</div>

## 6.文章标题居中

![1675203713748.png](http://img.wfy.pub/i/2023/02/01/63d99481ec774.png)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

```
.panel h2{
     text-align: center; 
 }
 .post-item-foot-icon{
     text-align: center;
 }
```

## 7. 美化底部版权

![Handsome底部版权.png](https://img.xyzbz.cn/i/2022/10/13/63479aa8707e0.png)
<div class="tip inlineBlock share simple small">

设置方法：后台--外观-设置外观-开发者设置-博客底部左侧信息
</div>

设置方法：后台--外观-设置外观-开发者设置-博客底部右侧信息
</div>

设置方法：后台--外观-设置外观-开发者设置-自定义 CSS
</div>

.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-green {
  background-color: #3bca6e
}
```

</footer>
```

暂时先改这么些，以后有新变动会在添加

> [在线网页gif录制：https://gifcap.dev/](https://gifcap.dev/)
> [官方开源地址：https://github.com/joaomoreno/gifcap](https://github.com/joaomoreno/gifcap)

## 以上教程均来自其他博主，本站转载教程仅供个人记录，有兴趣的博友可以访问以上博主站点

Handsome主题的美化修改

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

一键安装Aria2 + AriaNg + Filebrowser实现离线下载

风铃发卡搭建教程

莫等闲，白了少年头，空悲切！

搭建青龙面板

网站主题

Handsome主题的美化修改

宝塔安装Cloudreve网盘

Markdown 语法

四周年生日快乐！

风霜压我两三年心中早已无怨言

Handsome主题的美化修改

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Handsome主题的美化修改

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款