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
。
折叠块名称和图标默认为磁铁和“隐藏功能”。
下方行号同样存疑。
使用方法(以本站左侧导航栏为例):
{"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&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)进行许可。
您可以自由地转载或分享本文或本文的部分内容,但不得用于商业用途,并保留原作者署名或引用来源。
一开始手动添加结果不知道哪里出了问题网页出不来,然后换用了你的aside.php后footer莫名其妙上移,然后顶部导航栏没了,把我整傻了haha
ahahaha抱歉啦因为我这个已经很久很久没有更新了x之前自己的博客用那个block发现css偶尔会卡所以就撤下来了,后来就没有再追踪这个文件了x页面出不来的话,要不要试着调试一下?
嗯嗯,我自己去看看~ 话说大佬背景文字全白是怎么回事鸭,看你评论好像你也有,分享点经验可以吗?
你的Mikutap挺好玩的,上头了ヾ(≧∇≦*)ゝ
鬼才作者 背景和文字全是白的 我的眼睛啊 啊啊啊
啊啊啊……这好像是这个主题的一个bug,大概似乎用什么方法解决了。会尝试修复一下,谢谢反馈~
嘿嘿,好久不见!我将handsome升级到5.2.0后将Content.php替换后文章的内容页面底部出现了“Call to undefined method Content::returnReadModeContent()”的报错。你升级到最新的handsome主题了嘛,是否也遇到了和我一样的问题?
啊啊啊!对不起对不起才看到qwq其实我这个是基于老版本的修改,新版本已经增加和改动了不少内核函数,所以这个版本的文件已经不再适用啦(趴
为啥我的摘要不见了qwq
文件下载不了了喵QAQ
挺不错的哈。。
贵站这波……

Thank you