handsome 主题美化记录

博主：小逗比
发布时间：2024 年 06 月 11 日
404 次浏览
11645字数
分类：教程

对`https://www.atxrom.com`` Handsome`美化记录
</div>

本文内容部分来源于网络，如有侵权请留言删除！
</div>

更新时间`2024`年`06`月`28`日
</div>

## 自定义CSS

### 文章顶部内容居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4d8b0917db318fabb70af3a3af5fce6241" aria-expanded="true"><div class="accordion-toggle"><span style="">文章顶部内容居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4d8b0917db318fabb70af3a3af5fce6241" class="collapse collapse-content"><p></p>

```css
header.bg-light.lter.wrapper-md {
  text-align: center;
}
```

### 首页文章标题居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0dbef867b2fb676373069c75a22a37ec58" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章标题居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0dbef867b2fb676373069c75a22a37ec58" class="collapse collapse-content"><p></p>

```css
.post_title_wrapper
{
    justify-content: center;
}
```

### 首页文章日期居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-32a4b0938934c4f98a4eb5cf5c563bfc64" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章日期居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-32a4b0938934c4f98a4eb5cf5c563bfc64" class="collapse collapse-content"><p></p>

```css
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}
```

### 标签字体颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f451f83944d3319f5355de2853b4325243" aria-expanded="true"><div class="accordion-toggle"><span style="">标签字体颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f451f83944d3319f5355de2853b4325243" class="collapse collapse-content"><p></p>

```css
.badge,.padder-v-ssm{
    color:#fff;
}
```
<p></p></div></div></div>

### 赞赏按钮跳动

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e2beecf638d8c841b7f6c0f689c38c4213" aria-expanded="true"><div class="accordion-toggle"><span style="">赞赏按钮跳动</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e2beecf638d8c841b7f6c0f689c38c4213" class="collapse collapse-content"><p></p>

```css
/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}
```

### 标题悬停颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4e569b16f88822b4eb7191af703205e644" aria-expanded="true"><div class="accordion-toggle"><span style="">标题悬停颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4e569b16f88822b4eb7191af703205e644" class="collapse collapse-content"><p></p>

```css
.index-post-title a:hover {
  color: #2ebaae;
}
```

### 全站页面纯白

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-12424a01e5ace4c6788587eec2aab0cd69" aria-expanded="true"><div class="accordion-toggle"><span style="">全站页面纯白</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-12424a01e5ace4c6788587eec2aab0cd69" class="collapse collapse-content"><p></p>

```css
/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}
```

### 局部阴影

```css
/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
```
<p></p></div></div></div>

### 获取焦点放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2bf432ff4cb87ce2298b5a47ca62ab0579" aria-expanded="true"><div class="accordion-toggle"><span style="">获取焦点放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2bf432ff4cb87ce2298b5a47ca62ab0579" class="collapse collapse-content"><p></p>

```css
/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}
```
<p></p></div></div></div>

### 文章悬浮效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-004d529761264a6efa872a22d8d6ff4089" aria-expanded="true"><div class="accordion-toggle"><span style="">文章悬浮效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-004d529761264a6efa872a22d8d6ff4089" class="collapse collapse-content"><p></p>

```css
/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}
```
<p></p></div></div></div>

### 滚动条效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-eea1d5e0f53c895fd9fef8972fc0ed8552" aria-expanded="true"><div class="accordion-toggle"><span style="">滚动条效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-eea1d5e0f53c895fd9fef8972fc0ed8552" class="collapse collapse-content"><p></p>

```css
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}
```

## 自定义JavaScript

### 左侧彩色图标&右侧彩色标签云

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f55deeb37f677d626f86af0bc5b9f26b75" aria-expanded="true"><div class="accordion-toggle"><span style="">左侧彩色图标&右侧彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f55deeb37f677d626f86af0bc5b9f26b75" class="collapse collapse-content"><p></p>

需要将以下代码添加到`Handsome主题后台-PJAX->PJAX回调函数中`

```javascript
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
      tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
     tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
     var length = document.getElementById("comment").value.length;
     if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
     }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
     }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});
```

### 进度条加载显示

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6771db49ddb5015b957ba3b563defc261" aria-expanded="true"><div class="accordion-toggle"><span style="">进度条加载显示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6771db49ddb5015b957ba3b563defc261" class="collapse collapse-content"><p></p>

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

```javascript
//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
```

以下代码放在 `后台-外观设置-开发者设置-自定义输出head 头部的HTML代码`

```html
<div id="percentageCounter"></div>
```

在`后台-外观设置-开发者设置-自定义CSS`填写以下代码

```css

/*进度条加载显示*/
#percentageCounter{
  position:fixed; left:0; top:0; height:3px;
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
  }
```

### 提示框

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

进入网站右上角提示
```javascript
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！";
}else{
return "";
}}
$.message({
    message: "欢迎来的我的小破站<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
```

复制提升框`复制提示框会监听键盘Ctrl+C`

```javascript
aygb_copy();function kaygb_copy()
{
    $(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer()
    {
$.message(
    {
    message: "尊重原创，转载请注明出处",
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}
}
```

## 其他修改

### 岁月不待人

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1d277fc9272a937bf74131bf01c12c8f83" aria-expanded="true"><div class="accordion-toggle"><span style="">岁月不待人</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1d277fc9272a937bf74131bf01c12c8f83" class="collapse collapse-content"><p></p>

首先找到网站根目录 `/usr/themes/handsome/component/sidebar.php`文件，找到`<--广告位置-->`这一行内容。 在该内容向上两行找到` <?php endif; ?> `，在该行紧接着下面添加如下代码：

```html
<section id="blog_info" class="widget widget_categories wrapper-md clear">
     <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
<div class="sidebar sidebar-count">
    <div class="content">
        <div class="item" id="dayProgress">
            <div class="title">今日已经过去<span></span>小时</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-1"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="weekProgress">
            <div class="title">这周已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-2"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="monthProgress">
            <div class="title">本月已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-3"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="yearProgress">
            <div class="title">今年已经过去<span></span>个月</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-4"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
    </div>
</div>
     </section>

```

### 文章尾部end

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5ee958bafb2be1f6f6edb75ccf711dda56" aria-expanded="true"><div class="accordion-toggle"><span style="">文章尾部end</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5ee958bafb2be1f6f6edb75ccf711dda56" class="collapse collapse-content"><p></p>

在主题文件post.php中，大概在90行左右

```php
             
        <?php $this->options->adContentPost(); ?>
             <?php endif; ?>
```

在文章↑↑↑↑↑内容下面添加代码

```html
    
<div class="tt-fenge-end"> <span>End</span> </div>
    
```

在`后台-外观设置-开发者设置-自定义CSS` 填写以下代码

```css
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{
  border-top: 2px dotted #eee;
  height: 0px;
  margin: 35px 0px;
  text-align: center;
  width: 100%;
  line-height: 1.6em;
  }
.tt-fenge-end span{
  background-color: #23b7e5;
  color: #fff;
  padding: 2px 8px;
  position: relative;
  top: -14px;
  border-radius: 12px;
  font-size: 12px;
  }
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{
  border-top: 2px dotted #4f4f4f;
  }
```

### 文章尾部版权

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-677b0521e9c57dcf0516c236013bd5fd1" aria-expanded="true"><div class="accordion-toggle"><span style="">文章尾部版权</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-677b0521e9c57dcf0516c236013bd5fd1" class="collapse collapse-content"><p></p>

在主题文件post.php中，大概在90行左右

```php
 
 <?php $this->options->adContentPost(); ?>
 <?php endif; ?>
```

文章内容下面添加代码

```php
    
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品遵循<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC 4.0 BY-SA 版权协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
    
```

在`后台-外观设置-开发者设置-自定义CSS` 填写以下代码

```css
/*文章正文下的知识共享许可协议*/
.tt-license {
  font-size: 12px;
  font-weight: 600;
  padding: 1rem;
  background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);
  background-color: #f3f5f7;
  border-left: 3px solid #dde6e9;
  margin-bottom: 20px;
  }
.tt-license-icon {
  align-items: center;
  position: relative;
  float: left;
  margin: -10px -10px -10px 0;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 40px;
  color: #ff5722;
  }
.tt-license a {
  color: #337ab7;
  text-decoration: underline;
  margin: 0 5px;
  }
 /*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {
  background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);
  border-left: 3px solid #494949;
  }
.tt-license p {
  line-height: 1.5em;
  margin: 5px 0!important;
  }

.emotion-bilibili {
  width: 25px;
  }
.comment-content-true img.emotion-bilibili {
  max-width: 100%!important;
  }
```

## 插件

### 评论邮件提醒插件

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0dca06175306ec5b075171551b6dc8aa9" aria-expanded="true"><div class="accordion-toggle"><span style="">评论邮件提醒插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0dca06175306ec5b075171551b6dc8aa9" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-a4c6475e35180838378be040b9701818240' role="tab" data-target='#tabs-a4c6475e35180838378be040b9701818240'>评论邮件提醒插件</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-13a5058f4f6a2a5c141ccf064a34e0f8541' role="tab" data-target='#tabs-13a5058f4f6a2a5c141ccf064a34e0f8541'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-a4c6475e35180838378be040b9701818240' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/CommentToMail.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/CommentToMail.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-13a5058f4f6a2a5c141ccf064a34e0f8541' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`CommentToMail`
- 进入后台设置激活插件
</div>
</div>
</div>

### 炫彩鼠标

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-d0cd3887804267159b9252e41881fb6a270' role="tab" data-target='#tabs-d0cd3887804267159b9252e41881fb6a270'>炫彩鼠标</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-43268b0c6cd7b5ada1276fae74de6eac151' role="tab" data-target='#tabs-43268b0c6cd7b5ada1276fae74de6eac151'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-d0cd3887804267159b9252e41881fb6a270' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/HoerMouse.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/HoerMouse.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-43268b0c6cd7b5ada1276fae74de6eac151' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`HoerMouse`
- 进入后台设置激活插件
</div>
</div>
</div>

### 显示评论人使用的操作系统和浏览器信息

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bcda6608b89d1b5cce6a29af353943be47" aria-expanded="true"><div class="accordion-toggle"><span style="">显示评论人使用的操作系统和浏览器信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-bcda6608b89d1b5cce6a29af353943be47" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-556e958eb6df45e933ac41c7af45db8b750' role="tab" data-target='#tabs-556e958eb6df45e933ac41c7af45db8b750'>显示评论人使用的操作系统和浏览器信息</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-aac0fee01a37948304c1ce8221765705211' role="tab" data-target='#tabs-aac0fee01a37948304c1ce8221765705211'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-556e958eb6df45e933ac41c7af45db8b750' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/UserAgent.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/UserAgent.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-aac0fee01a37948304c1ce8221765705211' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`UserAgent`
- 进入后台设置激活插件
</div>
</div>
</div>

### 高德天气插件

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-806a8ebf16f10216d6915b77890e5f8469" aria-expanded="true"><div class="accordion-toggle"><span style="">高德天气插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-806a8ebf16f10216d6915b77890e5f8469" class="collapse collapse-content"><p></p>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-cd01dee5761cc4da9252c8ac65c32565500' role="tab" data-target='#tabs-cd01dee5761cc4da9252c8ac65c32565500'>高德天气插件</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-5a3bc7e0218198d34c92a0840e77b0be101' role="tab" data-target='#tabs-5a3bc7e0218198d34c92a0840e77b0be101'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-cd01dee5761cc4da9252c8ac65c32565500' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/Wiather.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/Wiather.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-5a3bc7e0218198d34c92a0840e77b0be101' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`Wiather`
- 进入后台设置激活插件
</div>
</div>
</div>

End

本文标题：handsome 主题美化记录

本文链接：https://atxrom.cn/index.php/archives/160/

除非另有说明，本作品遵循CC 4.0 BY-SA 版权协议。

声明：转载请注明文章来源。

最后修改：2024 年 06 月 28 日

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

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

handsome 主题美化记录

小逗比 • 2024 年 06 月 11 日

对`https://www.atxrom.com`` Handsome`美化记录
</div>

本文内容部分来源于网络，如有侵权请留言删除！
</div>

更新时间`2024`年`06`月`28`日
</div>

## 自定义CSS

### 文章顶部内容居中

```css
header.bg-light.lter.wrapper-md {
  text-align: center;
}
```

### 首页文章标题居中

```css
.post_title_wrapper
{
    justify-content: center;
}
```

### 首页文章日期居中

```css
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}
```

### 标签字体颜色

```css
.badge,.padder-v-ssm{
    color:#fff;
}
```
<p></p></div></div></div>

### 赞赏按钮跳动

```css
/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}
```

### 标题悬停颜色

```css
.index-post-title a:hover {
  color: #2ebaae;
}
```

### 全站页面纯白

### 局部阴影

### 获取焦点放大

```css
/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}
```
<p></p></div></div></div>

### 文章悬浮效果

```css
/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}
```
<p></p></div></div></div>

### 滚动条效果

## 自定义JavaScript

### 左侧彩色图标&右侧彩色标签云

需要将以下代码添加到`Handsome主题后台-PJAX->PJAX回调函数中`

### 进度条加载显示

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

以下代码放在 `后台-外观设置-开发者设置-自定义输出head 头部的HTML代码`

```html
<div id="percentageCounter"></div>
```

在`后台-外观设置-开发者设置-自定义CSS`填写以下代码

```css

### 提示框

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

复制提升框`复制提示框会监听键盘Ctrl+C`

## 其他修改

### 岁月不待人

### 文章尾部end

在主题文件post.php中，大概在90行左右

```php
             
        <?php $this->options->adContentPost(); ?>
             <?php endif; ?>
```

在文章↑↑↑↑↑内容下面添加代码

```html
    
<div class="tt-fenge-end"> <span>End</span> </div>
    
```

在`后台-外观设置-开发者设置-自定义CSS` 填写以下代码

### 文章尾部版权

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-677b0521e9c57dcf0516c236013bd5fd1" aria-expanded="true"><div class="accordion-toggle"><span style="">文章尾部版权</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-677b0521e9c57dcf0516c236013bd5fd1" class="collapse collapse-content"><p></p>

在主题文件post.php中，大概在90行左右

```php
 
 <?php $this->options->adContentPost(); ?>
 <?php endif; ?>
```

文章内容下面添加代码

在`后台-外观设置-开发者设置-自定义CSS` 填写以下代码

.emotion-bilibili {
  width: 25px;
  }
.comment-content-true img.emotion-bilibili {
  max-width: 100%!important;
  }
```

## 插件

### 评论邮件提醒插件

### 炫彩鼠标

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-d0cd3887804267159b9252e41881fb6a270' role="tab" data-target='#tabs-d0cd3887804267159b9252e41881fb6a270'>炫彩鼠标</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-43268b0c6cd7b5ada1276fae74de6eac151' role="tab" data-target='#tabs-43268b0c6cd7b5ada1276fae74de6eac151'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-d0cd3887804267159b9252e41881fb6a270' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/HoerMouse.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/HoerMouse.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-43268b0c6cd7b5ada1276fae74de6eac151' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`HoerMouse`
- 进入后台设置激活插件
</div>
</div>
</div>

### 显示评论人使用的操作系统和浏览器信息

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-556e958eb6df45e933ac41c7af45db8b750' role="tab" data-target='#tabs-556e958eb6df45e933ac41c7af45db8b750'>显示评论人使用的操作系统和浏览器信息</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-aac0fee01a37948304c1ce8221765705211' role="tab" data-target='#tabs-aac0fee01a37948304c1ce8221765705211'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-556e958eb6df45e933ac41c7af45db8b750' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/UserAgent.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/UserAgent.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-aac0fee01a37948304c1ce8221765705211' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`UserAgent`
- 进入后台设置激活插件
</div>
</div>
</div>

### 高德天气插件

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-cd01dee5761cc4da9252c8ac65c32565500' role="tab" data-target='#tabs-cd01dee5761cc4da9252c8ac65c32565500'>高德天气插件</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-5a3bc7e0218198d34c92a0840e77b0be101' role="tab" data-target='#tabs-5a3bc7e0218198d34c92a0840e77b0be101'>食用方法</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-cd01dee5761cc4da9252c8ac65c32565500' class="tab-pane fade active in">
             二选一下载就可以
<button class=" btn m-b-xs btn-success btn-addon" onclick="window.open('https://alist.atxrom.cn/云盘/蓝奏云盘/Wiather.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>云盘下载</button> <button class=" btn m-b-xs btn-info btn-addon" onclick="window.open('https://alist.atxrom.cn/腾讯/插件/Wiather.tar.gz','_blank')"><i class="glyphicon glyphicon-download-alt"></i>本地下载</button>  
</div><div role="tabpanel" id='tabs-5a3bc7e0218198d34c92a0840e77b0be101' class="tab-pane fade  ">
            食用方法：
- 下载插件，解压到`usr/plugins/`目录中
- 修改文件夹名为`Wiather`
- 进入后台设置激活插件
</div>
</div>
</div>