给网站增加夜间模式教程

给网站增加夜间模式教程,IMG_20210513_224528.jpg,分享,教程,百度,建站,经验,技术,代码,图文教程,Emlog教程,zblog教程,php教程,夜间,第1张

很多网站主题都自带夜间模式,其还是有部分主题没有夜间模式,怎么加呢,接下来我们看教程:(这里以Emlog为例)

首先我们打开模板下的"footer.php"文件,在“ ”前添加如下代码:

<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() > 23 || 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>

代码中的"23"与"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”文件,在上添加如下代码:(此代码仅限Z-Blog)

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

其他程序尝试以下代码,若不行自行研究吧

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


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注