handsome主题美化/修改教程

暂时没有什么新的思路,,等下个版本吧,白色挺好看的

本来想把所有修改的代码都贴上来,后来发现这工程量实在是太大了,于是乎我就想直接贴上文件给你们替换吧,放心,只要群主更新主题了,我也会更新修改文件

本次主题魔改需要替换文件,并且会修改原主题代码,请要魔改的小伙伴备份好自己的样式文件,如果没有CSS样式基础,拿我的样式直接用就可以,如果想要做二次样式从写的,也请带上原博主的地址,谢谢!!!

目前仅有5.1.1和5.2版本修改版,请注意一下版本号

替换完后可能会有一些错误,大佬们发现错误请及时联系我 QQ:citronsblog@gmail.com(搜索邮箱才能搜到我) 邮箱:citronsblog@gmail.com

最后,再提醒一遍:请备份好替换的原文件!!!请备份好替换的原文件!!!请备份好替换的原文件!!!

这些是以前的修改样式,依旧拥有参考价值,替换文件和新修改方案我放在最下方

以前的修改样式

开启gzip压缩功能

入手第一步当然是开启gzip压缩功能啦
在博客的根目录下的index.php中插入以下代码(放在载入配置上方):(这里不是说的主题目录哦,是程序(Typecho)的根目录)

/** 开启gzip压缩, add by yovisun */  
ob_start('ob_gzhandler');

首页文章版式圆角化

将以下代码添加至后台主题设置自定义css

#圆角大小可修改17x数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 17px;
}

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

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

首页文章版式阴影化

将以下代码添加至后台主题设置自定义CSS


#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
       -moz-box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
}
       .panel:hover{
           box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
               -moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}
               .panel-small{
                   box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
                       -moz-box-shadow: 1px 1px p3x 3px rgba(255,255,255, 0.35);
}
                       .panel-small:hover{
                           box-shadow: 1px 1px p3x 3px rgba(135 206 250, 0.35);
                               -moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}

.app.container {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
span.baidu-record::before {
    font: normal normal normal 12px/1 FontAwesome;
    content: "\f024";
    margin-right: 3px;
}

文章声明

放置于usr/themes/handsome/post.php
</div> <?php if ($this->options->adContentPost != ""): ?> <!--文章页脚的广告位--> 之前
代码如下(有能力也可以自己改哦):

<div class="entry-content l-h-2x">
   <div class="tip inlineBlock info">
   <?php _e('文章名:'); ?> 《<?php $this->title() ?>》
   <br>
   <br>文章链接:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
   <br>
   <br>联系方式:你的联系方式
   <br>
   <br>除特别注明外,文章均为<a href="你博客的链接" target="_blank">博客名字</a>原创,转载时请注明本文出处及文章链接
</div>
</div>

左侧导航栏添加折叠菜单样式

将代码添加到usr/themes/handsome/component/aside.php文件的

 <?php echo @$asideItemsOutput ?>
 <?php if (@!in_array('component',$this->options->asideSetting)): ?>

下方,在137行附近(5.2版本在113行附近)
代码如下:

  <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                  <i class="glyphicon glyphicon-tags"></i><!--这里是图标,自己换-->
                  <span><?php _me("这里名字自己取") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("和上面那个名字一样") ?></span>
                    </a>
                  </li>
                  <!--循环输出分类-->
                 <li>
                  <a href="https://xxx.xxx.xx/download.html" target="_blank" class="auto"><!--链接地址-->
                  <i class="glyphicon  glyphicon-download-alt"></i><!--图标-->
                  <span><?php _me("客户端") ?></span><!--名字-->
                </a>
<!--只是一个示例,自行仿照,理论可无限加,一个a标签对应一个栏目-->
          </li>
                </ul>
                   
              </li>

如果想拥有多个折叠菜单的话,那就多复制几个,哈哈哈哈,大佬勿喷。


去除顶部样式

就是那两行介绍,我去掉了名字,然后那里调用一言还是挺不错的,也不违和。
找到usr/themes/handsome/index.php文件
找到如下代码删除即可(留下第二行的话就删掉<h1>xxx</h1>即可,反之亦然)

        <header class="bg-light lter b-b wrapper-md">
                        <h1>xxxxxxxxxxx</h1><!--这里有一段描述的,就是第一行的名字,我给删了...-->
          <small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>
          </header>

修改气泡颜色

打开usr/themes/handsome/assets/css/features/coolopacity.min.css文件
查找(Ctrl+F):.badge并将:background-color的属性修改为background-color: #27c24c;(颜色可以自己换)


修复透明模式下顶栏闲言碎语、音乐、登陆看不清字的bug

打开usr/themes/handsome/assets/css/features/coolopacity.min.css文件
查找(Ctrl+F):.dropdown-menu并将:background-color的rgba值改为适当的值,例如黑色:(0, 0, 0, 0.7)
同样,登陆/音乐列表同理(由于我把登陆那个隐藏了,就不找元素了)音乐是查找:#skPlayer .skPlayer-list并更换rgba值。


5.1.1版本修改

修改准备

  • 必须勾选盒子模型
  • 主题色调必须选择第二个(为什么?因为我懒得改其他模型的样式....)
  • 页面元素显示设置-->右侧边栏元素控制-->勾选[右侧边栏整体]不显示

修改建议

  1. 建议不使用头图,转而采用徽章形式(文章页面也是最好不要显示头图哟)
  2. 建议不显示左侧边栏底部菜单
  3. 建议暂时不适应时光机页面()
  4. 建议寻找一张好看的背景图
  5. 建议采用首页文章版式阴影化
  6. 建议开启gzip压缩功能

5.1.1修改内容

  1. 将右侧边栏移至文章底部,并做样式优化/排版
  2. 去除文章目录树采用随机标签(标签过少可能会抓取不到标签)
  3. 将评论框移至评论列表上方
  4. 更改主题色调
  5. 修改头像/博客公告/介绍模块样式
  6. ...还有...这么多

已知BUG

  • 时光机版式错乱

打卡自定义JavaScript

1、在设置外观-->开发者设置-->自定义JavaScript中添加如下代码
2、然后在设置外观-->PJAX-->PJAX回调函数也加入以下的代码(否则pjax与js冲突)


 function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~ ::funny:06:: ")
    },
    zan: function() {
        a(c, " 写得不错,鼓励一下~~::funny:04:: ")
    },
    cai: function() {
        a(c, "什么?啥子玩意?你怕不是个睿智QAQ::funny:03:: ")
    }
};

3、打开主题目录的component/comments.php的130行后加入以下代码:

<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">&nbsp;&nbsp;打卡</span></div></div>

5.1.1替换文件

handsome.min.css 替换至../usr/themes/handsome/assets/css:2019/07/16(修复移动端表情样式错误)


index.php替换至../usr/themes/handsome


post.php替换至../usr/themes/handsome


comments.php替换至../usr/themes/handsome/component:


aside.php替换至../usr/themes/handsome/component:


以上就是替换的几个文件,如果替换完后出现BUG请尽快与我联系!如果有不懂或需要帮助修改的请在评论区留言,至于时光机页面我下个月有时间会修,稍安勿躁...
最后,请备份好替换的原文件!!!请备份好替换的原文件!!!请备份好替换的原文件!!!


5.1.1版本演示(建议点开图片浏览)

演示

PC端:
点击查看原图


点击查看原图


点击查看原图


移动端:
移动端演示图


移动端演示图


移动端演示图


移动端演示图



5.2版本修改

修改准备

  • 必须勾选盒子模型
  • 主题色调必须选择第二个(为什么?因为我懒得改其他模型的样式....)
  • 页面元素显示设置-->右侧边栏元素控制-->勾选[右侧边栏整体]不显示

修改建议

  1. 建议不使用头图,转而采用徽章形式(文章页面也是最好不要显示头图哟)
  2. 建议不显示左侧边栏底部菜单
  3. 建议寻找一张好看的背景图
  4. 建议采用首页文章版式阴影化
  5. 建议开启gzip压缩功能

5.2新增修改内容

  1. 修复了5.1.1版本中时光机布局错乱的BUG
  2. 优化了手机端文章标题字体过大导致溢出的问题
  3. 优化了渐变颜色
  4. 去除了时光机中联系方式以及那年今日
  5. 这次我还送上了可爱的滑稽表情QAQ
  6. 08/07恢复了被砍掉的目录树
  7. 暂时就这些吧......

已知BUG

  • 暂无

打卡自定义JavaScript

1、在设置外观-->开发者设置-->自定义JavaScript中添加如下代码
2、然后在设置外观-->PJAX-->PJAX回调函数也加入以下的代码(否则pjax与js冲突)


 function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~ ::funny:06:: ")
    },
    zan: function() {
        a(c, " 写得不错,鼓励一下~~::funny:04:: ")
    },
    cai: function() {
        a(c, "什么?啥子玩意?你怕不是个睿智QAQ::funny:03:: ")
    }
};

3、打开主题目录的component/comments.php的130行后加入以下代码:

<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">&nbsp;&nbsp;打卡</span></div></div>

5.2替换文件

aside.php替换至../usr/themes/handsome/component:


comments.php替换至../usr/themes/handsome/component:


cross.php替换至../usr/themes/handsome:


说一下footer.php文件:这个文件可替换也可不替换,他只是一个像我这样的底部标签样式而已,需要用的替换就行了*
footer.php替换至../usr/themes/handsome/component:

这里需要添加自定义CSS(可以添加到handsome.min.css样式文件里面,也可以添加到主题后台自定义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 !important;
}
.github-badge .bg-orange {/*魔改--底部标签式样式*/
    background-color: #FFA500 !important;
}
.github-badge .bg-red {/*魔改--底部标签式样式*/
    background-color: #ff0000 !important;
}
.github-badge .bg-green {/*魔改--底部标签式样式*/
    background-color: #3bca6e !important;
}
.github-badge .bg-purple {/*魔改--底部标签式样式--紫色*/
    background-color: #ab34e9 !important;
}

handsome.min.css 替换至../usr/themes/handsome/assets/css:


handsome.min.css 替换至../usr/themes/handsome/assets/css:


index.php替换至../usr/themes/handsome


post.php替换至../usr/themes/handsome


post.php替换至../usr/themes/handsome


滑稽表情包(压缩包内有食用教程):


5.2版本演示图(建议点开图片查看)

演示

PC端:
PC端演示


PC端演示


PC端演示


PC端演示


PC端演示


PC端演示


PC端底部演示


移动端演示
移动端演示


移动端演示


移动端演示


移动端演示


移动端演示


移动端底部演示


以上就是handsome5.1.1版本和5.2版本的修改教程,如果在使用过程中遇见BUG请在下方评论区留言,我看到会解决的
也可以加入QQ群进行反馈:戳我加群

Last modification:November 18th, 2019 at 11:42 pm
If you think my article is useful to you, please feel free to appreciate

43 comments

  1. 会开车的鱼

    博主可以吧主题文件发给我吗

  2. Aroins

    博主你好,请问主题是授权的吗还是替换文件就好了,请问是否可以发一下主题呢

  3. Syndicate

    博主,我想用你的底部标签样式就只替换了footer.php,但效果出来显示不对啊,参见我的博客,有什么还需要修改的吗?

    1. Syndicate
      1. Citrons
        @Syndicate

        来了,在handsome.min.css样文件中或者主题后台自定义CSS中添加附件中提供的代码即可
        附件:https://www.lanzous.com/i61687i

        1. Syndicate
          @Citrons

          ok,效果完美,感谢博主哈哈

          1. Citrons
            @Syndicate

            喜欢就好

  4. madoka

    楼主你代码高亮怎么弄得?我用CodePrettify设置完后无效果(发现楼主美化的css都不用修改了,笑),是否还要设置什么?

    1. Citrons
      @madoka

      就是按照正常的教程弄得呀

      1. madoka
        @Citrons

        我在本地重新搭建了一次,瞎几把乱搞了一波整好了
        他用法里面说,语言类型选填
        所以我就没有填语言类型
        结果就是没效果

        1. Citrons
          @madoka

          我都是填了的,没试过没填语言类型( ,,´・ω・)ノ"(´っω・`。)

          1. madoka
            @Citrons

            原来选填是选择一个语言填下去,而不是填不填
            我又试了一下,随便填都可以,就是不能不填
            话说你回复神速啊

            1. Citrons
              @madoka

              因为我在看电视,明天想睡一个懒觉

              1. madoka
                @Citrons

                我还在补作业,因为明天开学(来自学生党的怨念)
                羡慕我朋友因为台风推迟开学

                我同学说:别的学校会因为台风让学生回家避风,而我们学校会因为台风让学生提早来学校避风

                1. Citrons
                  @madoka

                  开学这么早??
                  我这没台风,每次都刮不进来

                  1. madoka
                    @Citrons

                    很晚了,我朋友10号就开学了
                    只不过这几天被赶回来躲台风

                    1. Citrons
                      @madoka

                      高中??
                      除了高三的没见过开学这么早的

                      1. madoka
                        @Citrons


                        给你介绍下我们这的开学时间
                        朋友一(初中):8月10号
                        朋友二(准高一):8月27号(本来是25号,因为台风推迟了)
                        朋友三(高二,和我同校):8月15号
                        朋友四(高三,和我同校):高三狗不配放假
                        我(准高一):8月26号(听学长说,我们是学校有史以来开学最晚的一届了)

                        1. Citrons
                          @madoka

                          现在都这样搞了嘛,想不想过我们那时候雷打不动开学时间--9.1

                          1. madoka
                            @Citrons

                            我们这里都是这样的

                            1. Citrons
                              @madoka

                              一点钟了,洗洗睡吧,不早了,晚安(人老了,熬夜都熬不动了)

                              1. madoka
                                @Citrons

                                晚安了

                              2. madoka
                                @Citrons

                                接着肝,话说台风是真猛,我网络刚刚直接炸了

  5. 绅士福利

    感谢分享!

  6. 此为恶意评论

    内容已河蟹

  7. 访客

    不错啊

  8. tomaito

    滴!学生卡!打卡时间:下午9:44:58,请上车的乘客系好安全带~

  9. 面壁的雨|牧雨博客

    滴!学生卡!打卡时间:下午12:26:31,请上车的乘客系好安全带~

  10. 绅士福利

    有点意思的哈!

  11. Citrons

    滴!学生卡!打卡时间:下午5:33:38,请上车的乘客系好安全带~

  12. 孙文's blog

    滴!学生卡!打卡时间:上午3:22:23,请上车的乘客系好安全带~

  13. Citrons

    滴!学生卡!打卡时间:下午4:33:47,请上车的乘客系好安全带~

  14. 微信抢房

    这博客魔改得有点意思,支持!

    1. Citrons
      @微信抢房

      谢谢夸奖 还有很多不足的地方待改进

  15. lzy

    博主,我在后台主题设置自定义CSS中添加了“首页文章版式阴影化”,前台怎么看不到效果啊?

    1. Citrons
      @lzy

      建议留下您的站点

  16. 小石

    漂亮

    1. Citrons
      @小石

      还是小石更帅

  17. 松鼠大大

    喵喵喵,?
    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Mon Jun 10 2019 12:01:01 GMT+0800 (CST)

    1. 松鼠大大
      @松鼠大大

      ??????☺?☺???喵喵喵

  18. Star

    很强

  19. ltr

    老哥,你评论框下面的打卡怎么弄得

    1. Citrons
      @ltr

      把我提供的comments.php文件替换一下,然后后台自定义JavaScript加入我提供的那段就行了

Leave a Comment