Citrons

handsome主题美化/修改教程
本来想把所有修改的代码都贴上来,后来发现这工程量实在是太大了,于是乎我就想直接贴上文件给你们替换吧,放心,只要群主...
扫描右侧二维码阅读全文
08
2018/10

handsome主题美化/修改教程

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

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

这是基于handsome5.1.1修改,如果低于5.1.1版本请更新至5.1.1,不然可能会出现其他问题

替换完后可能会有一些错误,大佬们发现错误请及时联系我 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行附近
代码如下:

  <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值。


修改准备

  • 必须勾选盒子模型
  • 主题色调必须选择第二个
  • 页面元素显示设置-->右侧边栏元素控制-->勾选[右侧边栏整体]不显示

修改建议

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

修改内容

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

已知BUG

  • 时光机页面样式错乱QAQ

打卡自定义JavaScript

在设置外观-->开发者设置-->自定义JavaScript中添加:


function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").value += a + new Date
    }
}

替换文件

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请尽快与我联系!如果有不懂或需要帮助修改的请在评论区留言,至于时光机页面我下个月有时间会修,稍安勿躁...
最后,请备份好替换的原文件!!!请备份好替换的原文件!!!请备份好替换的原文件!!!


演示

PC端:
点击查看原图点击查看原图点击查看原图


移动端:







广而告之:

Last modification:July 16th, 2019 at 01:35 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

11 comments

  1. 微信抢房

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

    1. Citrons
      @微信抢房

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

  2. lzy

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

    1. Citrons
      @lzy

      建议留下您的站点

  3. 小石

    漂亮

    1. Citrons
      @小石

      还是小石更帅

  4. 松鼠大大

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

    1. 松鼠大大
      @松鼠大大

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

  5. Star

    很强

  6. ltr

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

    1. Citrons
      @ltr

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