Rat's

本博客基于Handsome主题的一些小修改教程
说明:博客用Handsome主题一年多了,体验还不错,特别适合做个人博客,而博主基于原主题做了下小小的修改,使其更...
扫描右侧二维码阅读全文
18
2018/05

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

说明:博客用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.jsOwO.json文件就可以了。文件下载:HS_OwO.zipOwO.min.jshandsome/assets/js/features文件夹,OwO.jsonhandsome/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折优惠。

Vultr注册就送$50,可开日本/新加坡等机房,【点击注册】。
最后修改:2019 年 04 月 19 日 10 : 44 PM

发表评论

99 条评论

  1. 永世的缘

    不错,谢谢分享,已借用!

  2. 11

  3. 听雨轩

    前来学习博主的技巧

  4. lzy

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

    1. Rat's
      @lzy

      有cdn吗

      1. lzy
        @Rat's

        没有

        1. Rat's
          @lzy

          那就不太清楚了,我这边操作正确的话,是么问题的

          1. lzy
            @Rat's

            好的

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

    1. Rat's
      @。

      你的地址是啥,我看看

      1. 星期五
        @Rat's

        我也遇到了这个问题 博主 怎么解决呀

        1. Rat's
          @星期五

          这个按照楼上的反映,应该识别不了HTML代码,解决方法:https://handsome.ihewro.com/#/common-problem

      2. 孟超
        @Rat's

        网址是这个http://www.mengchao.xyz

        1. Rat's
          @孟超

          看你解决了,什么原因?

          1. 孟超
            @Rat's

            一个比较傻的问题,没好意思回复你,就是主题常见问题里边加上解析HTML那个东东

            1. Rat's
              @孟超

              就是让你博客能识别HTML代码

  6. lzy

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

    1. Rat's
      @lzy

      主题设置有开关,也有更换歌单的地址。

      1. lzy
        @Rat's

        好的,知道啦。谢博主

  7. rain

    wp的主题可以用吗

    1. Rat's
      @rain

      是这个吗,https://www.moerats.com/archives/303/

      1. rain
        @Rat's

        没错了,不过我没成功之前的评论也没了,哈哈 http://www.leimulamu.cn/index.php/2019/05/27/sdfg/

        1. Rat's
          @rain

          这域名很熟悉

  8. Xiaoxi679

    我来偷表情了

    1. Rat's
      @Xiaoxi679

      随便偷!

  9. Peter

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

    1. Rat's
      @Peter

      这个其实直接问作者就好了,分分钟给你解决

  10. 萧晨冰雪

    功能7有些问题,无法实现,另:代码最后是不少了个花括号。。不是学前端的,建议仅供参考

    1. Rat's
      @萧晨冰雪

      好像漏了,已改正

  11. 1

    么么哒,谢谢大佬,太照顾小白了,直接下载或者复制就可以用了
    话说我还想知道大佬您博客右边的热门文章前的图片怎么设置自定义呀?求大佬指导,谢谢

    1. Rat's
      @1

      你是说的叮当猫头像?

  12. Airs_Lau

    测试了自己博客的表情包不行啊 测试是什么都没有

    1. Rat's
      @Airs_Lau

      清空下缓存看看?

      1. Airs_Lau
        @Rat's

        还是一样的 输入框是有东西的 但是一提交就什么都不显示了 文字是正常的

        1. Rat's
          @Airs_Lau

          还真是,这个问题有待研究

  13. 过客

    我想把这个评论特效设置成点击特效,请问能实现吗?

    1. Rat's
      @过客

      一切皆有可能

  14. 友人C

    建议把注释上面的#圆角大小可修改15px数值 这个#号改成正确注释哈,因为好多把这一行也复制过去了,导致代码有问题

    1. Rat's
      @友人C

      还以为你消失了

  15. sunshinesuo

    哦,我懂了

  16. sunshinesuo

    不知道你说的这几个 修改css是那个文件?是hansome.min.css吗还是?求详细说明

    1. Rat's
      @sunshinesuo

      后台直接添加

  17. 崽崽

    前来看看

  18. 沙与沫

    额,我的评论框特效怎么不显示啊,难道文件位置不对么

    1. Rat's
      @沙与沫

      检查下位置,然后清除缓存

      1. 沙与沫
        @Rat's
        该评论仅登录用户及评论双方可见
        1. Rat's
          @沙与沫

          不要/www/wwwroot,直接http://xx.com/commentTyping.js,前提commentTyping.js在网站根目录

  19. 小蝶

    点击commentTyping.js为啥不是下载,反而是在网页上打开

    1. Rat's
      @小蝶

      这个右键保存就行了

  20. 大佬用的什么编辑器啊,ty自带的吗

    1. Rat's
      @湫

      对,一般只用原生,第三方有时候兼容性会出问题

  21. Scrooge

    图片圆角改了,是挺好看的,但是图面下层的文章圆角再哪里改呢,一个圆滑一个方正。看着有点别扭。哈哈哈 求博主给指条路

    1. Rat's
      @Scrooge

      哪个地方?

  22. 林叶展弟弟

    关于“文章标题居中”,发现bug,内容标题一同居中。

    1. Rat's
      @林叶展弟弟

      这个我倒没注意,哪天看看

  23. 小弟

    博主 我也买了主题 但是我的主题宽度很窄 怎么变得和你一样宽?

    1. CY
      @小弟

      同样遇到了这个问题,请问你解决了么?

    2. Rat's
      @小弟

      这个问题倒是没咋研究,貌似是根据你的分辨率来的。或者是主题版本不一样。

  24. 左岸

    你好请问标题后面修改字体大小后面的按钮是怎么去掉的呢

    1. Rat's
      @左岸

      你试着修改主题根目录的post.php文件,按钮貌似在这里。

  25. temperature

    表情按钮的旁边字体图片替换没了 ,class名:fontello fontello-emo-tongue face

    1. Rat's
      @temperature

      好像是不见了。

  26. randolz

    为啥Zero博主的文章说添加评论表情还需要一个包含表情图片的
    文件夹到CND或者本地服务器呢?

    1. Rat's
      @randolz

      对,不过好像表情都缓存到了我的服务器。

      1. randolfz
        @Rat's

        所以我们的表情包,其实是在访问博主网站的缓存嘛

        1. Rat's
          @randolfz

          表情包用的我网站的地址。

  27. 桔子

    不错不错

  28. Jerryshen

    天哪感觉这个评论很高端啊,忍不住要敲字暗暗暗暗暗暗暗暗!!!!!!!

    1. Rat's
      @Jerryshen

      那你就使劲的敲。

  29. star

    瞬间感觉我的Java不够酷炫

    1. Rat's
      @star

      还可以更炫酷。

  30. 幻想的羽毛

    作为一名后端开发者,学到了,博主的小技巧,比较酷炫2333333

    1. Rat's
      @幻想的羽毛

      其实还有很多特效。

  31. 学习笔记Blog

    我倒是用上了评论输入特效!

  32. 大良

    博主,请教怎么修改hand主题的默认英文字体大小,太小了,看的好累

    1. Rat's
      @大良

      你去问问作者,他知道。

  33. 安城博客

    请问博主,您博客的配色怎么选择的呢?

    1. Rat's
      @安城博客

      修改的方法都在文中写了,你可以查看网页源代码。

  34. 安城博客

    请问博主,您博客的配色怎么悬着的呢?

  35. 过客

    为什么我的文章阴影是鼠标放上去才有- -!

    1. 过客
      @过客

      原来是加了悬停

      1. Rat's
        @过客

        你可以查看我的网页源代码。

  36. MonsterStars.

    首页文章版式阴影化不想你博客主页那样。

    1. Rat's
      @MonsterStars.

      我自己的阴影颜色修改过了。

      1. MonsterStars.
        @Rat's

        那个,我文章里没有边框阴影,是要怎么设置嘛?

        1. Rat's
          @MonsterStars.

          阴影化都说明了,我就是用的那些代码。

  37. Black

    请问下评论表情替换之后找不到图片地址 是什么原因?我替换之后无法预览,选择表情之后都是 ::undefined:

    1. Rat's
      @Black

      js替换了没?

      1. Black
        @Rat's

        发现Ctrl+shift+r强制跳过缓存刷新就好了是我 Z Z 了

        1. Rat's
          @Black

          你言之有理。

      2. Black
        @Rat's

        两个都替换了的

        1. Rat's
          @Black

          是不是加了CDN,需要清空缓存。

  38. 光芒

    打字时候出去这个特效是怎么弄的啊。

  39. Acci

    很棒

  40. 小椰子

    请问下 4.3.1版本添加了CSS没效果 是什么原因?还有您的留言板是怎么修改的

    1. Rat's
      @小椰子

      作者公告好像说过需要替换一个文件才行,不知道有没有修复好,我还没更新4.3.1。

  41. hohenheim

    好看是挺好看的,但是和原来比稍微有点卡顿了

    1. Rat's
      @hohenheim

      感觉还好,估计网络问题。