奕

Handsome个性化定制
Handsome主题有不少地方并不全尽人意，有极大的提升/再开发空间。于是乎，并不是处女座的叶奕对主题进行了一些改进。
扫描右侧二维码阅读全文
18
2018/08

Handsome个性化定制

  1.  Home
  2. Text  
    3. Share to：

Handsome主题有不少地方并不全尽人意，有极大的提升/再开发空间。于是乎，并不是处女座的叶奕对主题进行了一些改进。

其实叶奕我也是个萌新啦……不过由于种种原因，本站使用的Handsome主题总觉得很多地方并不尽人意。
百度，拜访朋友的主页，或是自己动手丰衣足食……终于把主题稍微修改得更加令自己赏心悦目啦。
在这里就稍微扒一扒叶奕我做出的改动。

1、网站栏获得/失去焦点时更改标题内容（普适）

var TOut;
var title = document.title; //保存真实标题

// window 失去焦点 
window.onblur = function() {
    clearTimeout(TOut);  //如有正在进行中的“获得焦点”则终止之
    document.title = "(¦3[▓▓] zzZ...";
};

// window 获得焦点 
window.onfocus = function() {
    document.title = "(:3[▓▓]";
    TOut = setTimeout("document.title=title",2500);  //回到真实标题所需等待时间
}

修改前代码复制自Asdrt的页面。
自己在细节方面稍加改动，解决了快速在页面间切换时可能导致的标题显示出错。

目前为适配某些新的改动而被本站撤下。

2、首页文章标题&摘要的美化（Handsome）

下载Content.php，替换/usr/themes/handsome/libs/Content.php，然后在自定义CSS中加入下列代码：

代码较长，为您收藏 
@charset "utf-8";
/*
    CSS from 神代綺凜 - https://lolico.moe
    Modified by Yi - https://www.yeyi.site
*/

#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content {
    background-color: transparent!important;
}

.blog-post>.panel,.blog-post>.panel-small {
    border: 0;
    border-radius: 5px;
}

.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a {
    transition: all .2s;
}

.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small {
    transform: scale(1.05);
}

.visible-xs-inline {
    display: inline-block!important;
}

@media screen and (min-width: 1200px) {
    .panel .item-thumb {
        height:300px;
    }

    #post-panel .blog-post {
        position: relative;
    }

    #post-panel .panel {
        overflow: hidden;
    }

    #post-panel .panel .post-meta {
        position: relative;
        margin-top: -300px;
        height: 300px;
        padding-top: 133px!important;
        padding-bottom: 0!important;
        background-color: rgba(0,0,0,.3);
        color: #fff!important;
        transition: all .3s;
    }

    #post-panel .panel .post-meta,#post-panel .panel-small .post-meta {
        border-radius: 5px;
    }

    #post-panel .panel .post-meta *,#post-panel .panel-small .post-meta * {
        color: #fff!important;
    }

    #post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2 {
        text-align: center;
        text-shadow: 0 0 3px #fff;
    }

    #post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div {
        transition: all .3s;
        transform: translateY(-10px);
        opacity: 0;
    }

    #post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted {
        position: absolute;
        bottom: 20px;
    }

    #post-panel .panel .post-meta>.line {
        position: absolute;
        bottom: 40px;
    }

    #post-panel .panel-small .post-meta>.line {
        position: absolute;
        bottom: 40px;
    }

    #post-panel .panel .post-meta>.summary {
        margin: 32px auto;
        width: 510px;
    }

    #post-panel .panel-small .post-meta>.summary {
        margin: 32px auto;
        width: 240px;
    }

    #post-panel .panel-small {
        display: inline-block;
        height: 300px;
        width: calc(50% - 10px);
        margin-right: 20px;
    }

    #post-panel .panel-small+.panel-small {
        margin-right: 0;
    }

    #post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small {
        height: 100%;
        width: 100%;
    }

    #post-panel .panel-small .post-meta {
        position: absolute;
        height: 300px;
        width: calc(50% - 10px);
        padding: 133px 20px 0 20px!important;
        background-color: rgba(0,0,0,.3);
        color: #fff!important;
        transition: all .3s;
    }

    #post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta {
        background-color: rgba(0,0,0,.6);
    }

    #post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div {
        opacity: 1;
        transform: translateY(0);
    }

    #post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta {
        padding-top: 80px!important;
    }

    #post-panel .ahover {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small {
        filter: blur(3px);
    }
}

header.bg-light.wrapper-md {
    margin-top: 30px;
    background-color: transparent!important;
    border: 0;
    text-align: center;
    text-shadow: 0 0 3px #000;
}

header.wrapper-md * {
    color: #fff;
}

header.wrapper-md h1 {
    font-size: 32px;
}

header.wrapper-md h1 {
    font-weight: bold!important;
}

.sticky {
    position: absolute;
    top: 10px;
    left: 15px;
}

来自神代綺凜。
初步解决了原css导致的摘要超出框范围的问题。
别看我，我也不知道Content.php怎么改

嫌麻烦的也可以直接在<head>内插入以下代码：

<link rel="stylesheet" href="//file.yeyi.site/Yeyi.site/css/IndexBlock.css" type="text/css">

3、侧边栏“导航”栏的二级菜单

下载aside.php，替换/usr/themes/handsome/component/aside.php。
折叠块名称和图标默认为磁铁和“隐藏功能”。

不推荐使用本文件进行替换！本文件基于Handsome v4.4.1 component/aside.php修改，不保证可用性。替换前一定做好备份，如遇问题请保存完整错误信息输出并联系我。
下方行号同样存疑。

使用方法（以本站左侧导航栏为例）：

{"name":"MikuTap","class":"glyphicon glyphicon-music","link":"https://a.yeyi.site/miku/","target":"_self"},
{"name":"临时邮箱","class":"glyphicon glyphicon-envelope","link":"https://m.yeyi.site/"},
{"name":"Patatap","link":"https://a.yeyi.site/pata/","status":"sec"},
{"name":"舰娘Q&amp;A","link":"https://a.yeyi.site/kcfaq/","status":"sec"}

如你所见，"status":"sec"即表示将该条目放置于二级菜单中。

这个功能是叶奕我自己改的，如果有发现任何问题请及时将我开刀问斩【。

好吧，讲一讲主要改动。

第111行数字真棒添加了"status"字段的判断：

if (strtoupper($itemStatus) === 'SEC')
    $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><i class="'.$itemClass.' icon text-md"></i><span>'._mt($itemName).'</span></a></li>';
else

第130-139行添加了二级菜单输出：

<?php if (@$asideSecondItemsOutput): ?>
    <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-magnet"></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>
        <?php echo @$asideSecondItemsOutput ?>
    </ul></li>
<?php endif; ?>

其他一些改进，我猜你可以在更多伙伴的blog上找到，就不赘述啦。

Handsome个性化定制作者为叶奕，采用知识共享 署名-非商业性使用 4.0 国际许可协议（CC BY-NC 4.0）进行许可。
您可以自由地转载或分享本文或本文的部分内容，但不得用于商业用途，并保留原作者署名或引用来源。

Last modification：November 7th, 2019 at 05:43 am
© 允许规范转载
If you think my article is useful to you, please feel free to appreciate

Leave a Comment Cancel reply

13 comments

  1. XiaoMouz

    一开始手动添加结果不知道哪里出了问题网页出不来，然后换用了你的aside.php后footer莫名其妙上移，然后顶部导航栏没了，把我整傻了haha

    Reply
    1. 奕
      @XiaoMouz

      ahahaha抱歉啦因为我这个已经很久很久没有更新了x之前自己的博客用那个block发现css偶尔会卡所以就撤下来了，后来就没有再追踪这个文件了x页面出不来的话，要不要试着调试一下？
      Reply
      1. XiaoMouz
        @奕

        嗯嗯，我自己去看看~ 话说大佬背景文字全白是怎么回事鸭，看你评论好像你也有，分享点经验可以吗？

        Reply
    2. XiaoMouz
      @XiaoMouz

      你的Mikutap挺好玩的，上头了ヾ(≧∇≦*)ゝ
      Reply
  2. 寒夜方舟

    鬼才作者 背景和文字全是白的 我的眼睛啊 啊啊啊
    Reply
    1. 奕
      @寒夜方舟

      啊啊啊……这好像是这个主题的一个bug，大概似乎用什么方法解决了。会尝试修复一下，谢谢反馈~
      Reply
  3. yeefire

    嘿嘿，好久不见！我将handsome升级到5.2.0后将Content.php替换后文章的内容页面底部出现了“Call to undefined method Content::returnReadModeContent()”的报错。你升级到最新的handsome主题了嘛，是否也遇到了和我一样的问题？
    Reply
    1. 奕
      @yeefire

      啊啊啊！对不起对不起才看到qwq其实我这个是基于老版本的修改，新版本已经增加和改动了不少内核函数，所以这个版本的文件已经不再适用啦（趴
      Reply
  4. marTixx

    为啥我的摘要不见了qwq
    Reply
  5. 星空

    文件下载不了了喵QAQ
    Reply
  6. 绅士福利

    挺不错的哈。。
    Reply
    1. 奕
      @绅士福利

      贵站这波……

      Reply
  7. Sagit

    Thank you
    Reply