hexo[Matery] 添加黑夜模式
谁的博客还没有个黑夜模式呢?
在幽暗的环境里,如果主题太过明亮就会显得格外刺眼,会让眼睛非常难受。
要是万一伤害了我可爱的读者朋友的闪亮亮大眼睛怎么办?
我可是会心疼的哦~
下面讲一下具体的配置方法。
一、设置黑夜基础样式
- 首先在
.\themes\hexo-theme-matery\source\css\
文件夹下新建一个day-night.css
; - 然后粘贴以下代码并保存文件:
1 |
|
- 然后打开主题目录下的
_config.yml
配置文件,在大约 480 行的位置找到libs
中的css
,并添加一行代码如下:
1 |
|
- 接着在主题目录的
.\layout\_partial\
文件夹里找到head.ejs
文件,在head
标签下的合适位置添加如下代码:
1 |
|
二、添加切换按钮
- 在主题目录的
\layout\_partial\
文件夹里添加一个day-night.ejs
文件,粘贴如下代码并保存:
1 |
|
- 在主题目录的
\layout\
文件夹里找到layout.ejs
文件,然后在body
标签下添加如下代码:
1 |
|
- 最后打开前面的
day-night.css
文件,追加如下代码(给按钮添加样式):
1 |
|
到这里你的黑夜模式就已经设置完毕了,剩下的就是你自己的个性化优化了。
感谢大佬 Ruins 为我提供的教程,本篇教程是在其代码基础上优化的来。
并且修复了其部分BUG。
同时不建议大家设置那个黑夜的动态背景,本人实测那个东西会有个手机端的BUG,具体原因不太清楚。
具体表现为在友链等页面会出现页面一闪一闪的情况(只有手机端,电脑端调试也不会出问题)。
如果有清楚的大佬,还望赐教。
因为那个背景确实好看,很适合黑夜模式。
三、代码优化【2022.9.5】
之前代码中依靠 localStorage
来存储信息,从而帮助用户长时间维持黑夜模式。但是,这个 localStorage
的特点就是永久存储。意思就是如果用户不主动删除,这个变量将会一直存在。
那么,问题就来了,让我们假设一个场景:
①假设你的某个真爱用户在晚上访问了你的博客,你的网站判断了现在时晚上 20:30,于是自动开启了黑夜模式,你的用户很满意地浏览一阵后就离开了。
②第二天早上,该用户再次打开网站,结果网站居然还是黑夜模式…要知道现在都早上 9:00 了啊,还要用户手动切换!用户表示很麻烦!
对于一直秉承用户至上原则的我来说,这可不行,怎么能这么麻烦我的朋友呢?改,这个必须改!
所以,我最后修改了原代码,通过 cookie 来实现时间过长自动删除 isDark
变量,从而进入时间判断模式(通过当前时间来选择是否开启黑夜模式)。如果 cookie 中 isDark
变量还在,那就依照其记录值来选择黑夜模式,保持用户的选择。
代码中我设置的时间为 6 小时,你可以自己选择修改。
最后,源码附上:
1 |
|