Handsome 最近更新了个大版本,而我也在使用的过程中按奈不住折腾的心,开始修改了主题的部分样式。为了防止丢失或者忘记改了什么。虽然我一直觉得可以通过 Meld 分析文字或者直接用 Git 追踪,查看差异项目的。

一、时光鸡

时光鸡部分,在关于我这个和我修改的圆角有冲突,此处修改内容如下:cross.php 文件,对 h4 标签添加了一个样式。

/cross.php
<div class="panel b-a">
    <h4 class="font-thin padder" style="padding-top: 10px;"><?php _me("关于我") ?></h4>
      //.....
</div>

二、右侧导航栏

sidebar.php 此处直接去除了 热门文字最新评论随机文字 这三个模块(他们在一个 Tab 里),因为本站定位是个人向的,不需要那么多展示能力,此处直接替换掉一整块就行。

/component/sidebar.php
<section id="tabs-4" class="widget widget_tabs wrapper-md clear">
    <h3 class="widget-title m-t-none text-md"><?php _me("闲言碎语") ?></h3>
    <div style="font-size: 13px">这里是我的个人小站:猫之三千岁,用以记录生活中的点点滴滴,我一直认为有一个安静的、温馨的小窝是一件很快乐的事情。最后欢迎您不经意间的光临~ 🐾</div>
</section>

三、加锁分类访问页面

Lock.php 稍稍的加大一点儿宽度,原先的宽度只是 200 ,折行了不好看。

/lib/Lock.php
<div class="modal-over bg-black">
    <div class="modal-center animated fadeInUp text-center" style="width:300px;margin:-200px 0 0 -150px;">
    //......

顺便再添加一个对回车的监听事件,点击回车时提交密码:

回车的监听事件
$("body").keydown(function() {
    if (event.keyCode == "13") {
        $('.open_new_world').click();
    }
});

四、修改阅读模式

Content.php 我是真心觉得阅读模式好看呢,此处修改了标题居中,最后一行留白,以及,首行缩进。

/lib/Content.php
<div id="morphing-content" class="hidden read_mode_article">
    <div class="page" style="margin-bottom: 35px;">
        <h1 class="title" style="text-align: center;">$obj->title</h1>
        <div class="metadata singleline" style="margin-top: -0.25em;text-align: center;">
            <a href="#" rel="author" class="byline">{$author}</a>&nbsp;•&nbsp;<span class="delimiter"></span><time class="date">{$time}</time>
        </div>
        <div id="fixp"> {$content} </div>
    </div>
</div>

当然只改这些是不行的,首行缩进需要修改 css 样式,直接写进主题配置的自定义 css 里就行了。

自定义 CSS
/*首行缩进*/
#fixp > p {
    text-indent:2em;
}
/*醒目的横线*/
#fixp > hr {
    border-top: 2px dotted;
}
/*图片不要缩进*/
#fixp > p > img {
    margin-left: -2em;
}

完整的自定义 CSS 内容,圆角部分来自:Rat's Blog

完整自定义 CSS
/*文章圆角*/
.panel{
    border: none;
    border-radius: 15px;
}
.panel .b-a{
    border-radius: 3px;
}
.panel-small{
    border: none;
    border-radius: 15px;
}
.item-thumb{
    border-radius: 15px;  
}

/*面板、文章边框*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(110, 255, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(110, 255, 220, 0.35);
}
.panel:hover{
    box-shadow: 3px 3px 8px 8px rgba(200, 185, 175, 0.35);
    -moz-box-shadow: 3px 3px 8px 8px rgba(200, 255, 220, 0.35);
}
.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(110, 255, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(110, 255, 220, 0.35);
}
.panel-small:hover{
    box-shadow: 3px 3px 8px 8px rgba(200, 185, 175, 0.35);
    -moz-box-shadow: 3px 3px 8px 8px rgba(200, 255, 220, 0.35);
}

/*修改引用样式*/
#post-content blockquote {
    margin: 1.5em 0;
    padding: 13px 20px !important;
}

/*图片居中*/
#post-content img {
    margin: 0px auto;
    display: block;
}

/*首行缩进*/
#fixp > p {
    text-indent:2em;
}
/*单词换行*/
#fixp p {
    word-break:break-word;
}
/*更换hr样式*/
#fixp > hr {
    border-top: 2px dotted;
}
/*图片不缩进*/
#fixp > p > img {
    margin-left: -2em;
}

/* 真实文章内容 */
#post-content > div > p {
    text-indent:2em;
    word-break:break-word;
}

五、修改留言板

大刀阔斧的删删删,留言板界面总共删除了 本周评论排行榜总评论排行榜 ,同时将剩余内容移至文章内容下面,主要修改 guestbook.php & functions.php 两个文件夹。

/guestbook.php
<!--文章内容-->
<div class="wrapper-lg">
    <div class="entry-content l-h-2x">
        <?php echo Content::postContent($this,$this->user->hasLogin()); ?>
    </div>
    <?php getFriendWall(); ?>
    <?php Content::pageFooter($this->options) ?>
</div>

六、伸缩框样式修改

主要为修改多余的空白间隔 Content.php 文件。这个修改还有很多不完善的地方,目前我所知的,如果伸缩框中只有一个图片时,请不要换行,否则样式会错乱。

调试方法:echo("<script>console.log(".json_encode($content).");</script>");

/lib/Content.php
......
$check = substr(trim($matches[5],' '),0,4);
if($check == '<br>') {
    $content = trim(trim($matches[5],' '),'<br>');
} else if($check == '</p>') {
    $content = ltrim(trim($matches[5],' '),'</p>');
    $content = rtrim($content,'<p>');
    $content = '<p'.$content.'>';
} else {
    $content = $matches[5];
}
......
<div id="{$id}" class="panel-body {$class}" style="margin-top: -10px;">
......

七、输入特效

在后台中的外观设置,开发者设置,自定义输出body 尾部的HTML代码中填写以下代码:

自定义输出body 尾部的HTML代码
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/inkss/common@1.0/js/commentTyping.js"></script>

八、参考内容

最后修改:2019 年 12 月 11 日 02 : 42 PM