HOME
BLOG
ABOUT
Theme
Dec 02 2020

White是一个非常年轻的主题,有一说一它的功能非常单一,设计更是简洁,但「刚刚够用」这一点实在太香了。所以在搭建博客的时候第一眼就选定了它,并想方设法把它打磨成我希望的样子。

发布者上次更新的时候添加了图片归档界面和lazyload功能,感觉和White本身的轻巧背道而驰,但后续更新还是值得期待的……直到他突然心态崩掉跑路(害

现在我使用的这个主题已经多少和White有所不同了,以后或许会有更大区别,想着不如记录在这里吧。

New

调整了post界面的翻页顺序,要正确显示可能得清一下缓存。

Paginator

White原本的翻页方式就只有archive页面的「prev」和「next」按钮。

我增加了archive页面的页码和post页面的前后翻页功能,然后根据页面宽度改了改显示效果。

实现方式有点笨,就是在ejs文件里把宽屏和窄屏的翻页部件都写出来,然后在styl文件里根据屏幕宽度选择性显示。

.paginator 
  display none
  @media $desktop-m
    display block

.paginator_diy
  display block
  @media $desktop-m
    display none

stylus对格式的要求比较低,各种花括号、冒号、分号都可以省略。

其实还想要输入页码跳转的功能来着。

Sort_by

我的主题没有置顶功能,与我相关的描述就都放在「About」界面了。

这里通过修改文件updated时间手动置顶每天的更新。

令人高兴的是,hexo不知道什么时候也认_posts下面的子文件夹了,我稍微改了下之前的脚本,并让它自动按照文件路径修改文章分类(懒人的快乐x

# coding:utf-8

import os
import re
import time

postpath = '../_posts' # _posts文件夹位置

def oper(tag,fileName): #  处理md文档

    with open(fileName,'r',encoding="utf-8")as fi:
        postContent = fi.read() # markdown文件内容

    post = postContent # 准备覆写
    flag = 0

    postCategoris = re.findall(r'categories: Tips
    if (postCategoris!=tag): # 按照文件路径更改分类
        flag = 1
        post = re.sub(r'categories: Tips

    localDate = time.strftime("%Y-%m-%d", time.localtime()) # 当前时间
    postDate = re.findall(r'date: 2020-12-02 00:01:05
    postUpdate = re.findall(r'updated: ([\s\S]*?)\n',postContent)[0] # 文章update
    if (postDate != postUpdate):
        if (localDate not in postUpdate): # 非new
            flag = 1
            post = re.sub(r'updated: [\s\S]*?\n','updated: '+ postDate +'\n', post) # 按date时间复位
        else: # new post
            if (tag != 'Diary'):
                flag = 1
                post = re.sub(r'date: 2020-12-02 00:01:05

    if (flag):
        with open(fileName,'w',encoding="utf-8")as fo:
            fo.write(post) # 覆写

    return

def finddir(tag,path): # 递归遍历文件夹
    for file in os.listdir(path):

        filepath = os.path.join(path,file)

        if (re.search(r'^[\._]',file)==None):
            if os.path.isdir(filepath):
                finddir(file,filepath)
            else:
                if (re.search(r'\.md$',file)!=None):
                    oper(tag,filepath)
    return

finddir('post',postpath)

最后的效果是把部署当天更新或修改的文章在archive页置顶标注,之前的文章则踢回原本时间线。

顺便把layout.ejs的修改也放上来。

<% var now = moment(); %>

<% if (date(post.updated,'YY-MM-DD')==date(now,'YY-MM-DD')){ %>
    <span class="archive-post-today"><%= "New" %></span>
<% } %>

值得注意的是,要使它按照updated关键字倒序排序需要修改博客的_config.yml文件,添加:

index_generator:
  path: ''
  per_page: 10
  order_by: -updated
  pagination_dir: page

archive_generator:
  enabled: true
  per_page: 10
  yearly: true
  monthly: true
  daily: false
  order_by: -updated

category_generator:
  per_page: 10
  order_by: -updated

tag_generator:
  per_page: 10
  order_by: -updated

感谢Joseph,posts按-updated排序需要把node_modules\hexo\lib\plugins\generator\post.js-date改为-updated,这真难找(捂脸

List of posts

White本身提供了把同分类的文章展示在post页面底部的功能,之前是手动把categories设置成YYYY.MM来梳理日记,但可以预见的是,如果这博客持续更新下去,这分类数量就太多了,干脆改了改让Diary分类下的文章底部只显示同月的日记。

但跳月份还是很麻烦,果然还是想要日历云

然而这超出我的能力范围了(气

ps,如果明年我还在维护这个博客,就加上「那年今日」功能。

Title

照搬自paper主题。

var title = document.title;
window.onblur = function() {
    document.title = "See ya."; //离开本页面
}
window.onfocus = function() {
    document.title = title; //切换回本页面
}

这段放在主题的js文件(比如我的是source\js\white.js)里面就可以了,是个在用户离开和返回博客页面时更改标题显示的小东西。

Dark mode

呜,好难,正在研究Chic主题是怎么实现夜间模式切换的,还没有成果。

这个主题也很好看,推荐。

Tips
>
<
>
<