自己动手给网站增加一个夜间模式

11个月前 ( 03-05 ) 3181阅读 12评论

好久没有写博文了,因为疫情的缘故,一直都是在家远程办公,碎片时间不定,再加上定制了两款主题,所以没抽出时间来写博客,今儿清闲所以手写一篇教程,教大家怎么给自己的网站添加一个夜间模式,当然代码不是我制作开发的,我不生产代码,我只是代码的搬运工(广告词很熟悉哈),好了不多说废话,这个代码是在网上找到,也不知道原始作者是谁,感谢您的无私奉献。好了,废话少说,开始表演。。。

自己动手给网站增加一个夜间模式 第1张

首先,我们需要在主题模板中打开“footer.php”文件,在“</body></html>”前添加如下代码:

<script type="text/javascript">
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.add('night');
        document.cookie = "night=1;path=/"
        console.log('夜间模式开启');
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
        console.log('夜间模式关闭');
    }
}
</script>
  • 保存文件即可,如果想要实现自动切换夜间模式,那么直接复制如下代码

<script type="text/javascript">
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.add('night');
        document.cookie = "night=1;path=/"
        console.log('夜间模式开启');
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
        console.log('夜间模式关闭');
    }
} (function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 5){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
            console.log('夜间模式自动开启');
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
            console.log('夜间模式自动关闭');
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
        }else if(night == '1'){
            document.body.classList.add('night');
        }
    }
})();</script>
  • 代码中的 22 5 就是晚上22点开始到第二天的5点结束,其实这段代码并不严谨,为什么这么说呢?此代码是针对没有记录cookies的网站来说有效,一旦手动开启或者关闭过夜间模式,那么这个自动是失效了,除非清空浏览器的cookies,总之这里目前没有办法完美适配(我技术不行),其实我们可以在js做个判断,就是每天的22点时候判断cookies是否是夜间模式,如果不是,弹出对话框询问是否开启夜间模式,如果是就不提示。这么说您应该晓得吧,说的简单,但是,,,我不会写。。。咳咳!不扯了,继续教程。

  • 然后打开网站的“header.php”文件,我们需要给网站填写一个按钮,以此来手动开启和关闭夜间模式:

<a class="at-night" href="javascript:switchNightMode()" target="_self"></a>
  • 复制如上代码,放在你认为合适的地方,然后保存,登录后台,清空主题模板缓存编译,然后打开首页,测试夜间模式是否有效。

  • 其实教程到这才算是完成一般,因为你在测试的过程中会发现,开启夜间模式并没有效果,,,嗯嗯是的,因为你们没有适配夜间模式的css,这个教程写不出,因为每个主题模板的div框架和css命名不同,无法统一,所以需要您自己去查找对应的class类,然后添加夜间模式的样式,例如:

body.night DIV名称 {
    background-color: #263238;
    color: #aaa; 
}
  • 这样一来开启夜间模式后背景色就换成了黑色,字体是白色,如果网站css框架太多,相信我这绝对是一个大坑,哦对了,防止css样式重叠,建议在css样式表最底下适配夜间模式的代码。

  • 这些都配置完成,前台查看首页,你会发现在夜间模式下会出现闪屏,就是,打开一个页面的瞬间是正常模式,然后在1秒(电脑速度慢的时候可不止1秒)后转换成夜间模式,哇塞,简直就是亮瞎眼有木有?别急,教你一个办法,打开“header.php”文件,在<body>上添加如下代码:(此代码仅限Z-Blog

<body class="{if GetVars('night','COOKIE') } night{/if}">

其他程序(TP5或者Typecho等)使用这个:

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

这样就解决闪屏的BUG了,当检测到cookie相关字段时直接输出body的class为night,就可以已防止页面闪烁。好了,准备下班~有不懂得留言,别告诉我让我给你们适配夜间模式css,我做不到,,,我的锦鲤目前还是适配中,代码太多,太焦躁。。。

哦对了,还是那句话,修改前记得备份主题模板文件

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

表情:
评论列表 (有 12 条评论,3181人围观)
网友昵称:老李收录网
老李收录网V铁粉2020-04-29凉席 回复 UC Browser 6.2.4098.3 Windows 10 x64
为什么第二步后按钮不显示呢?
网友昵称:李洋博客
李洋博客V博主2020-04-30 回复 Sogou Explorer Windows 10 x64
@老李收录网 修改模板需要在后台清空主题编译才行。
网友昵称:老李收录网
老李收录网V铁粉2020-04-30 回复 UC Browser 6.2.4098.3 Windows 10 x64
@李洋博客 后台清空主题编译也不行,试过了,还重新启用模板了
网友昵称:李洋博客
李洋博客V博主2020-05-03 回复 Sogou Explorer Windows 10 x64
@老李收录网 那是不是没有样式文件?右侧QQ联系站长
网友昵称:蓑笠翁
蓑笠翁V铁粉2020-04-05板凳 回复 Firefox 68.0 Mac OS X 10.14
请问锦鲤主题也能配置夜间模式吗?由于我建站技术有限,搞了好久还是没有做出来。我修改的是锦鲤主题中的footer.php和header.php,改了这两个也重新编译了,但是没有效果。希望能给点指导,谢谢。
网友昵称:李洋博客
李洋博客V博主2020-04-06 回复 Sogou Explorer Windows 10 x64
@蓑笠翁 后期有时间应该会去适配夜间模式。
网友昵称:烟雨青山
烟雨青山V铁粉2020-03-07椅子 回复 QQBrowser 10.5.3863.400 Windows 10 x64
TP5程序COOKIE的night值获取不了。。还是会闪屏
网友昵称:李洋博客
李洋博客V博主2020-03-07 回复 Sogou Explorer Windows 10 x64
@烟雨青山 TP5不能用zb的方案,看文章,更新了。
网友昵称:烟雨青山
烟雨青山V铁粉2020-03-08 回复 QQBrowser 10.5.3863.400 Windows 10 x64
@李洋博客 博主厉害!
网友昵称:李洋博客
李洋博客V博主2020-03-14 回复 Sogou Explorer Windows 10 x64
@烟雨青山 谢谢支持!
网友昵称:關家三少
關家三少V超级VIP2020-03-05沙发 回复 Safari 13.0.5 Mac OS X 10.13.6
其实我觉得,应该是js弄个获取本地时间自动开启比较科学~嗯 纸上谈兵谁都会 哈哈哈
网友昵称:李洋博客
李洋博客V博主2020-03-06 回复 Sogou Explorer Windows 10 x64
@關家三少 目前来说没什么完美的方案,先这样!
取消
支付宝二维码
支付宝二维码
微信二维码