handsome主题修改记录

Pingu

2021 年 10 月 20 日

214次浏览

暂无评论

2350字数

建站相关

### 插件篇

#### 1.AliceStyle-萌卜兔's 美化插件

功能很强大
![1.png](https://devbiu.com/usr/uploads/2021/10/1924924885.png)
![2.png](https://devbiu.com/usr/uploads/2021/10/2424923866.png)
![3.png](https://devbiu.com/usr/uploads/2021/10/1122318319.png)

效果图

![效果图.png](https://devbiu.com/usr/uploads/2021/10/3356214847.png)

#### 2.GoTop-页面顶部出现悬挂喵~点击触发至顶功能

效果图
![cat.png](https://devbiu.com/usr/uploads/2021/10/4131054611.png)

#### 3.UserAgent-显示评论人使用的操作系统和浏览器信息（Handsome主题专用）

![UserAgent.png](https://devbiu.com/usr/uploads/2021/10/1826504774.png)

#### 4.XcnteOWO表情包-评论区加入贴吧表情包

> 复制owo.json到handsome/usr/
> 复制paopao文件夹到handsome/usr/img/emotion/
> 清除一下游览器缓存，然后刷新即可

#### [插件打包](https://pan.moecloud.xyz/s/4Wsk)

### 代码篇

#### 1.动态标题-自定义输出head 头部的HTML代码

```

<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)我藏好了哦 - Pingu‘s Blog';}else{document.title=normal_title;}});</script>
```

效果图
![action.png](https://devbiu.com/usr/uploads/2021/10/1642914861.png)

#### 2.首页文章列表悬停上浮自定义 CSS

```
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
```

#### 3.首页文章列表头图悬停放大并将超出范围隐藏-自定义 CSS

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

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

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

#### 4.其他-自定义 CSS

```
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}
```

最后修改：2021 年 11 月 18 日 12 : 18 AM

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

handsome主题修改记录