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

Handsome个性化定制

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 13th, 2018 at 10:44 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

3 comments

  1. 绅士福利

    挺不错的哈。。

    1. @绅士福利

      贵站这波……

  2. Sagit

    Thank you