这是一篇介绍博客的文章

简单介绍一下整站的结构以及未来的打算

Posted by 曦秋 on June 6, 2020

大家好,这里是曦秋的小屋。这个博客是基于Huxyizibi两位大佬的Jekyll模板上做出来的,在此对这两位大佬的工作表示感谢!同时非常感谢小歪网络提供的API!移动端可能会缺少一部分内容,但不影响主体结构。

在此基础上我增加了如下功能:

文章置顶功能

标签页的小彩蛋

动态显示站点的建立时间

增加“每日一图与每日一句”,同时添加音乐播放器

之后可能会增加或者涉及的功能:

🔜博客模板改成hexo(但是目前这个用的很好,暂时没想法)

🔜增加夜间模式等花哨功能

🔜改善移动端的使用体验(目前没有头绪)

关于新功能

  • 关于文章置顶

修改index.html中显示文章内容的部分修改为以下的部分:

如果有需要置顶的文章,在文章参数中添加top: true即可

  • 关于标签的小彩蛋

效果大概是这样的:

gif

default.html中适当的地方插入如下代码:

其中hide是指在没选择标签页时的文本,show是指重新点击标签页时的文本,两者都需要在_config.yml中进行定义。

  • 动态显示站点的建立时间

将以下代码放到合适的html文件位置;我在页面最下方使用,因此放在了footer.html中:

<span style="font-size:12px;"><script language=JavaScript> 
    function secondToDate(second) {
        if (!second) {
        return 0;
        }

    var time = new Array(0, 0, 0, 0, 0);

    if (second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
    }  

    if (second >= 24 * 3600) {
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
    }

    if (second >= 3600) {
        time[2] = parseInt(second / 3600);
        second %= 3600;
    }

    if (second >= 60) {
        time[3] = parseInt(second / 60);
        second %= 60;
    }

    if (second > 0) {
        time[4] = second;
    }
    return time;
}
</script>
<span id="htmer_time" style="color: #000000;"></span>
        
<script type="text/javascript" language="javascript">
    function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2020, 05, 06, 06, 06, 06)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = '本站已安全运行' + currentTime[0] + '' + currentTime[1] + '' + currentTime[2] + '' + currentTime[3] + '' + currentTime[4] + '';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);
</script></span>