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

教程介绍

怎么给自己网站增加一个夜间模式!夜间模式为了迎合夜晚,让你从视觉上感到光线变暗,就会想办法把屏幕变暗,这样屏幕整的亮度和夜间环境更接近,就能让你在晚上浏览网站不那么辣眼睛。修改前记得备份主题模板文件!

操作步骤

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>

2、保存文件即可,如果想要实现自动切换夜间模式,那么直接复制如下代码:

<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>

3、代码中的 22 和 5 就是晚上22点开始到第二天的5点结束,其实这段代码并不严谨,为什么这么说呢?

此代码是针对没有记录cookies的网站来说有效,一旦手动开启或者关闭过夜间模式,那么这个自动是失效了,除非清空浏览器的cookies,总之这里目前没有办法完美适配(我技术不行),其实我们可以在js做个判断,就是每天的22点时候判断cookies是否是夜间模式,如果不是,弹出对话框询问是否开启夜间模式,如果是就不提示。这么说您应该晓得吧,说的简单,但是,,,我不会写。。。咳咳!不扯了,继续教程。

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

<a class="at-night" href="javascript:switchNightMode()" target="_self"></a>

5、复制如上代码,放在你认为合适的地方,然后保存,登录后台,清空主题模板缓存编译,然后打开首页,测试夜间模式是否有效。

其实教程到这才算是完成一般,因为你在测试的过程中会发现,开启夜间模式并没有效果,,,嗯嗯是的,因为你们没有适配夜间模式的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,我做不到,我的锦鲤目前还是适配中,代码太多,太焦躁。

    THE END
    【版权声明】: 本文来自网络搜集或网友投稿,不代表本站观点及立场,如有版权争议请联系本站删除
    您需要 登录账户 后才能发表评论
    发布评论
    • 评论列表
    最新文章
    热门文章