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

本次主题魔改需要替换文件，并且会修改原主题代码，请要魔改的小伙伴备份好自己的样式文件，如果没有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 ::funny:06::
  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群进行反馈：戳我加群

版权属于：Citrons

本文链接：https://www.citrons.cn/typecho/211.html

转载时须注明出处及本声明

微信扫一扫体验微信小程序
Last modification：September 21, 2022
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate