本博客基于Handsome主题的一些小修改教程

2018 年 05 月 18 日

160172 次浏览

5821 字数

说明：博客用Handsome主题一年多了，体验还不错，特别适合做个人博客，而博主基于原主题做了下小小的修改，使其更加好看点，鉴于经常有人问博主修改方法，这里就在博客里说一下，顺便也说一下博客没有使用的修改方案，给同样使用Handsome主题的做下参考。

方法

1、首页文章版式圆角化
本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置自定义CSS。

#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

2、首页文章图片获取焦点放大
本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置自定义CSS。

#放大的时间和大小自行修改以下数值(别复制该行)
/*首页文章图片获取焦点放大*/
.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);
}

3、首页头像转动并放大
本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置自定义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
}

4、首页头像放大并自动旋转
本项修改的是首页头像，效果就是将首页头像放大，并使其自动旋转。将以下代码添加至后台主题设置自定义CSS。

#旋转速度请修改3s数值(别复制该行)
/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

5、文章标题居中
本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置自定义CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

6、首页文章版式阴影化
本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置自定义CSS。

#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

#如果也想使盒子四周也有阴影，加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

7、自定义滚动条滑块
本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置自定义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;
}

8、评论表情修改
本项修改评论表情，将原始表情替换成泡泡和阿鲁，只需要替换主题文件里的OwO.min.js和OwO.json文件就可以了。文件下载：HS_OwO.zip。OwO.min.js在handsome/assets/js/features文件夹，OwO.json在handsome/usr文件夹。

9、鼠标点击特效
将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

10、评论框特效
下载特效JS文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件handsome/component/footer.php，在</body>后面添加以下代码。

<script type="text/javascript" src="(JS文件路径)"></script>

暂时只说这么多，修改方案很多由Zero博主提供，还有通过本博客联系作者购买Handsome主题的，可打9折优惠。

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

永世的缘
September 11th, 2019 at 12:50 pm

不错，谢谢分享，已借用！

回复
11
August 7th, 2019 at 09:02 pm

回复
听雨轩
July 18th, 2019 at 07:57 pm

前来学习博主的技巧

回复
lzy
June 17th, 2019 at 03:08 pm

博主，我在后台设置自定义css里加入了“首页文章版式阴影化”代码，为什么前台看不到效果呢？

回复
1. Rat's博主
  June 17th, 2019 at 03:50 pm
  
  @lzy
  有cdn吗
  
  回复
  1. lzy
    June 17th, 2019 at 03:55 pm
    
    @Rat's
    没有
    
    回复
    
    Rat's博主
    June 18th, 2019 at 01:15 pm
    
    @lzy
    那就不太清楚了，我这边操作正确的话，是么问题的
    
    回复
    
    lzy
    June 18th, 2019 at 01:32 pm
    
    @Rat's
    好的
    
    回复
。
June 11th, 2019 at 04:15 pm

为啥我的评论界面显示表情，等到发表评论的时候，表情就没了，不显示了

回复
1. Rat's博主
  June 11th, 2019 at 05:36 pm
  
  @。
  你的地址是啥，我看看
  
  回复
  1. 星期五
    June 12th, 2019 at 11:31 am
    
    @Rat's
    我也遇到了这个问题博主怎么解决呀
    
    回复
    
    Rat's博主
    June 13th, 2019 at 09:21 am
    
    @星期五
    这个按照楼上的反映，应该识别不了HTML代码，解决方法：https://handsome.ihewro.com/#/common-problem
    
    回复
  2. 孟超
    June 11th, 2019 at 08:06 pm
    
    @Rat's
    网址是这个http://www.mengchao.xyz
    
    回复
    
    Rat's博主
    June 13th, 2019 at 09:22 am
    
    @孟超
    看你解决了，什么原因？
    
    回复
    
    孟超
    June 13th, 2019 at 09:39 am
    
    @Rat's
    一个比较傻的问题，没好意思回复你，就是主题常见问题里边加上解析HTML那个东东
    
    回复
    
    Rat's博主
    June 13th, 2019 at 12:15 pm
    
    @孟超
    就是让你博客能识别HTML代码
    
    回复
。
June 11th, 2019 at 04:14 pm

回复
lzy
June 4th, 2019 at 10:29 pm

博主，问下右上角的歌单怎么去掉的啊？或者说怎么换歌单。

回复
1. Rat's博主
  June 5th, 2019 at 01:32 pm
  
  @lzy
  主题设置有开关，也有更换歌单的地址。
  
  回复
  1. lzy
    June 5th, 2019 at 01:42 pm
    
    @Rat's
    好的，知道啦。谢博主
    
    回复
rain
May 27th, 2019 at 01:46 pm

wp的主题可以用吗

回复
1. Rat's博主
  May 27th, 2019 at 07:48 pm
  
  @rain
  是这个吗，https://www.moerats.com/archives/303/
  
  回复
  1. rain
    May 27th, 2019 at 09:56 pm
    
    @Rat's
    没错了，不过我没成功之前的评论也没了，哈哈 http://www.leimulamu.cn/index.php/2019/05/27/sdfg/
    
    回复
    
    Rat's博主
    May 28th, 2019 at 02:26 pm
    
    @rain
    这域名很熟悉
    
    回复
Xiaoxi679
May 25th, 2019 at 12:47 pm

我来偷表情了

回复
1. Rat's博主
  May 26th, 2019 at 02:49 am
  
  @Xiaoxi679
  随便偷！
  
  回复
Peter
April 26th, 2019 at 07:46 pm

大佬,问一下在Handsome 打开了炫酷透明模式后,文章背景和字都是白色的,看久了眼睛会不舒服,请问如何优化呢？例如把字改成黑色。。。

回复
1. Rat's博主
  April 27th, 2019 at 12:21 am
  
  @Peter
  这个其实直接问作者就好了，分分钟给你解决
  
  回复