Thin Buffalo
文章3
标签1
分类2
浅谈Nexdark主题的本心

浅谈Nexdark主题的本心

本来觉得合并Nexmoe最新版本挺麻烦的,但是也没想到这么快就搞好了,所以就尽快地发布了Nexdark v0.1.0

第一版:Dark Nexmoe

Nexdark主题的前身是Dark Nexmoe主题。把大佬的repo叉过来二创最开始的目的,在这俩主题的名字中已经体现的差不多了。我的本意是想做一个Nexmoe的暗色主题ver,Dark Nexmoe也的确是这么做出来的。

ver.1 这张图里文章的背景图好像是沃玛和山山!

当时的Dark Nexmoe只实现了暗色主题一个功能,考虑到原主题的红色主配色并不适合暗色主题,Dark Nexmoe将原主题的彩虹配色,即赤橙黄绿青蓝紫颠倒了过来,也就是紫蓝青绿黄橙红。这在无意之间也为之后自定义主题配色的功能埋了伏笔。

暗色主题是直接抄的浏览器插件Dark Reader渲染过后的样式,现在主题css文件夹里实现暗色主题功能的文件dark.styl里都还写着这样一行注释:

1
// 建议使用Chrome插件Dark Reader辅助适配暗色主题

这样的工作并不复杂但是量也不算小,以至于在后续的几个版本甚至包括下文中的第二版里都还发现了一些没有适配暗色主题的地方。(所以现在仍然有可能存在暗色主题适配问题,如果发现敬请提出issue,我可能会随缘修补)当时的主题颜色和暗色主题适配是直接在主样式style.styl文件中修改的,也就看得出来我根本没有想过合并主库什么的,同时也为之后得工作加重了负担。

第二版:Pull Request #151-154

后来,作为一位Nexmoe主题的用户,我感受到Nexmoe主题虽然功能体验很不错,但是距离一个功能完备的主题还有很大距离,所以一打鸡血,决定为主库提供一次功能更新。

暗色主题与自定义主题配色

我干的第一件事首先就是把Dark Nexmoe的暗色主题作为独立板块迁移到主库上,接着因为要满足暗色主题的配色需求,我实现了自定义主题颜色的功能。

终端检测与提示

在之前我提交过一个#131问题,并在问题中提出了一个并不完整的解决方案(当时我说话的语气真的好吓人,在这里给折影轻梦大大道个歉⊙﹏⊙∥)。后来作者也处理过这个问题,当时好像效果不好。后来我意识到是主题文件夹中的配置文件_config.yml干扰了编译,所以提出的解决方案是,把_config.yml移至source文件夹内,同时为防止网站没有个人配置文件运行出错,再自动在网站根目录下复制一份个人配置文件。

当时作者已经实现了在初次下载或更新版本时,会新建一个_config.new.yml以方便用户编辑或更新个人配置文件。在此基础上,我为了解决上面的问题,写了index.js。在每次运行hexo时,脚本都会自动运行,检测用户有没有个人配置文件,如果没有就复制一份。脚本运行时会在终端提示,所以平时在终端里看见的

1
[Nexmoe] Checking theme configurations

就是由这个实现的。

本地搜索

本地搜索也算是我当时觉得的Nexmoe“与功能完备的主题的差距”之一,Swiftype搜索因为要收费也不能完全满足用户对内置搜索的需求,当时也有Fork的项目实现了本地搜索但是个人觉得不是很满意。所以查了一点资料就自己整了一个比较简单的。

自定义样式

有看见过其他主题在配置文件里高度自定义主题什么的,比如说自定义字体,看了之后觉得很麻烦,又看到大多数改字体啊之类的都是直接把样式导进主题样式文件,但是这样对用npm下载主题的用户来说太不友好了。所以我就实现了导入自定义样式,在网站source文件夹下可以创建custom.css编写自定义的样式,我的网站字体适配就是这样完成的。

在下文第三版的更新中,这个功能也稍做了改进,现在支持导入多文件,只用在配置文件中注册一下就行了。

这个功能如上所说,是为了解决使用npm渠道下载的主题或防止少量固定样式被主题更新误覆盖,简化更新步骤而开发的。也是我觉得一个虽然功能及其实现很简单但是比较有创意的一个解决方案。

小插曲:

当时我是第一次提交PR,没有经验教训。每次都是提交完了发现有Bug。所以来来回回一共交了四次PR,在此再次给作者道歉。

总的来讲,这一次合并请求的更新对Dark Nexmoe项目的意义很大,也可以说是 “真正给予了它生命”

局限之处

当时的更新更的功能比较多,算是功能大更新,但是对于原库来说,这么多的更改也可以说是功能的“换血”,对原库的破坏也很大。再加上某些内容因为作者并不了解细节所以不方便维护,所以后来都被砍掉了。比如暗色主题适配与自定义主题颜色。而且我的代码写的太乱,这是原先颜色配置功能的部分配置片段:

1
2
3
4
5
6
7
8
9
10
color: # 配色方案,从first到seventh为优先级为1-7的颜色,默认为彩虹配色
first: # 同时作为主题色
r: 144
g: 144
b: 255
second:
r: 26
g: 152
b: 255
···

可以说是相当不美观不方便。

某些新增功能也有很多Bug,比如本地搜索。本地搜索作为我找文档搭起来的一个小功能,有很多地方没考虑到,比如说之前的版本当关键词出现在标题上而没有在正文上时,正文内容不会被裁剪,抑或是某些字符在搜索时无法被正确转义……

至于这些缺点的修补或维护,就要到下一版再说了。

第三版:Nexdark

在完成了合并请求之后,我就没有再管过自己存储库的事,直到Vercel被墙,重新构建博客的过程中,我发现一些功能被主库删除了^1。所以我还是觉得自己有必要重新维护这个项目了。

过程还是比较顺利的,没有想到原来的暗色主题对新版本的适配度这样高。本地搜索也修复了正文内容不裁剪的问题。至于多个匹配词搜索时搜索结果可能混乱,或是在文章页面搜索时搜索界面可能不显示这些小问题,考虑到本地搜索主要走轻量路线,也就暂时没有计划进行修复。

本文作者:Thin Buffalo
本文链接:https://thinbuffalo.github.io/categories/%E7%BC%96%E7%A8%8B/221202/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可
×