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主题是怎么实现夜间模式切换的,还没有成果。
这个主题也很好看,推荐。