前言
因为使用的博客主题制作相对较早,当时还没有夜间模式这个观念,或许当时也有,但我使用的博客主题并没有自带,这些年逛其他博客的过程中,看到对方的博客在晚上的时候会自动调整成夜间模式,觉得还挺新奇的,但当时眼睛还算好,对这个功能的需求倒也没强烈,随着年龄的增长,越发感觉到保护眼睛的重要性,于是也想给自己博客整一个夜间模式,以供自己晚上访问时,不用被那明晃晃的白色闪瞎了眼睛。
方法
添加夜间模式的方法有很多,有直接改代码的,还有安装插件的,方法多种多样,这里我选择的是WP Dark Mode插件。
这里简单说一下,为什么选择了插件,而没有选择直接改代码。
其实现有的解决方案中,直接改代码的轮子应该也有很多,基本直接拿来就可以用。
但考虑到兼容性的问题,最终还是选择了现成的成熟方案,毕竟公开的代码都是相对局限的,对于一些定制化的内容,例如代码块、图片等并非所有博客都有的内容,会显得拙荆见肘。
步骤
1、在WordPress后台点开安装插件。
2、搜索WP Dark Mode,安装并启用。
3、在插件设置选项的General Settings中,打开Enable Frontend Darkmode(忘了是不是默认开启的,如果不是,就按照此步骤打开即可)。
以上就是在前台打开夜间模式按钮的相关设置,至于后台打开夜间模式(没错,后台也支持开启)、夜间模式按钮显示位置都可以在设置中找到,这里就不做过多介绍(右键翻译成中文了解一下)。
演示
本博客所有页面左下角均有显示(不包含外链页面)。
后话
目前基本没有太大问题,只是在显示代码块时,若代码块只有一行代码,左上角的圆角会显示成直角(这仅为本博客遇到的问题,本博客代码块的显示是通过Enlighter插件显示,若未使用该插件,则基本不用担心该问题,或许之后我也会向插件开发去反馈该问题,总之并不是特别影响),还有就是回到顶部的按钮在启动夜间模式之后会被隐藏,因为回到顶部的按钮颜色与夜间模式的背景颜色几乎一样,启动之后并不是特别好辨别,但也不是特别影响。
总而言之,言而总之,都是无关痛痒的一些小问题,只要你不是强迫症,基本就不影响,另外,隔壁还有一款夜间模式的插件,若使用那一款,可能会出现较多的兼容问题,具体名字我忘记了,推荐先通过本文介绍插件实现,若不满意,再选择其他方案。
最后,这插件貌似广告有点多,我指的广告是,经常性要评分,以及经常告诉我推广该插件有多少佣金(这是付费插件,有一些几乎用不到的功能是收费的)。
Comments | 12 条评论
书签网 博主
确实有必要加上这个功能
龙鲲 博主
@书签网
确实有必要回复(狗头)
TeacherDu 博主
这插件不错呢!
龙鲲 博主
@TeacherDu
杜老师也可以整一个
TeacherDu 博主
@龙鲲
我不是WP,我是Hexo的~
龙鲲 博主
@TeacherDu
那没戏,杜老师那是Hexo?看着不像哎,感觉功能挺齐全的
Dabenshi 博主
嗯,下一期可能要写“夜间模式”了
龙鲲 博主
@Dabenshi
水一水博客更健康☺
obaby 博主
还以为代码实现的,竟然是插件~~
龙鲲 博主
@obaby
代码实现也不是不可以,要考虑的兼容性问题太多。
大佬博客的夜间模式也用的是插件哈,你那个插件就是本文所说的那个兼容性较差的插件。
虽然不记得名字了,但那种样式的logo我还有印象,逃~
obaby 博主
@龙鲲
我用了这么久了感觉也将就,不过有bug,不大敢动它
龙鲲 博主
@obaby
主要你博客元素也很多,要完全适配估计要定制