0%
3245 字 --- 耗时5 分钟.

我的建站路3:为博客增加一些实用功能

现在的情况就是,博客已经基本能用了,黑色简约的风格,给人直观的感受就是:低调,大方。这是我觉得这个博客模板很棒的原因之一。

但是abc theme 是一个免费的 Ghost 模板,而它作为一个免费的模板,被挂在一家卖 Ghost 主题的网站上面,也就是说,如果它的光芒很大,盖过那些收费的模板,那不就亏了吗。

总的来看,abc theme 有几个不足之处,作为一个强迫症,必须要改善的地方吧:

  • 没有返回顶部的按钮,这个功能大多数时候都会被使用者忽略,但是当你想用它却发现它不存在的时候,内心肯定是崩溃的
  • 主页部分,标题日期标签全都是居中,有点别扭,不提供内容预览的功能(ghost是提供这个功能的)
  • 不带搜索功能,可以通过lunr.js为博客增加搜索功能

返回顶部按钮

返回顶部其实很简单,只有记住有下面几个功能就好:

  • 窗口在顶端或靠近顶端的时候,返回顶部按钮要隐藏
  • 窗口不在顶端,点击返回顶部按钮,当前窗口会返回到顶端

deflaut.hbs中添加按钮的html标签:

<div class="back-to-top js-back-to-top-btn hidden">
    <i class="fa fa-angle-up"></i>
    //这里的图标定义成用的fa样式,也可以改成自定义的图片
</div>

hidden表示默认情况下是隐藏的,隐藏属性可以通过css来设置,定义button的css样式:

.back-to-top {
    background:#d9d9d9;
    color:#000;
    position:fixed;
    bottom:0;
    right:1.5625rem;
    width:3.125rem;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
    cursor:pointer;
    -webkit-transition:all .4s;
    transition:all .4s;
    border-radius:0.1875rem 0.1875rem 0 0;
    z-index:99999;
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.back-to-top.hidden {
    bottom:-2.5rem
}
.back-to-top:hover {
    background:#bfbfbf
}

点击按钮,返回顶部,需要通过js来实现,之前需导入jquery库:

goToTop = function() {
    var backToTopButton = $('.js-back-to-top-btn');
    if($(backToTopButton).length) {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $(backToTopButton).removeClass('hidden');
            } else {
                $(backToTopButton).addClass('hidden');
            }
        });
        $(backToTopButton).on('click', function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
        });
    }
},

主页的美化

每个人的审美观都不一样,所有,自己喜欢的才是最好的。

之前也说了,居中的文字看起来确实是很别扭的,通过text-align让文字左对齐,接着依次添加内容。

时间放在最上面,套一个<time>标签<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY-MM-DD"}}</time>

标题<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>

标签<section class="post-meta">{{tags prefix=" 标签 : "}}</section>

内容预览<section class="post-desc">{{excerpt characters="120"}} ...</section>

有一些细小的地方需要注意,比如四周黑色的边框,感觉宽度有点太宽了,把宽度调小。这是一个自适应的网站,当宽度缩小时,边框又感觉是累赘,算了,屏幕宽度小到一定程度的时候把他们隐藏吧。

我把自己使用的这个主题放到Github上,地址在这,喜欢的小伙伴,可以下载。