当前位置:首页 > 技术类 > 自己动手给网站增加一个夜间模式

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

微信用户4年前 (2022-02-23)技术类3503


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

       教大家怎么给自己的网站添加一个夜间模式,当然代码不是我制作开发的,我不生产代码,我只是代码的搬运工(广告词很熟悉哈),好了不多说废话,这个代码是在网上找到,也不知道原始作者是谁,感谢您的无私奉献。好了,废话少说,开始表演。。。

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

自己动手给网站增加一个夜间模式 JavaScript
<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>
  • 保存文件即可,如果想要实现自动切换夜间模式,那么直接复制如下代码

自己动手给网站增加一个夜间模式 JavaScript
<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”文件,我们需要给网站填写一个按钮,以此来手动开启和关闭夜间模式:

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

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

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

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

自己动手给网站增加一个夜间模式 Markup
<body class="{if GetVars('night' 'COOKIE') } night{/if}">

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

自己动手给网站增加一个夜间模式 Markup
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

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

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


免责声明
    本网站在国家相关法律法规规定的范围内,只按现有状况提供文章发布第三方网络平台服务,本网站及其所有者非交易一方,也非交易任何一方之代理人或代表;同时,本网站及其所有者也未授权任何人代表或代理本网站及其所有者从事任何网络交易行为或做出任何承诺、保证或其他类似行为,除非有明确的书面授权。
    鉴于互联网的特殊性,本网站无法鉴别和判断相关交易各主体之民事权利和行为能力、资质、信用等状况,也无法鉴别和判断虚拟交易或正在交易或已交易之虚拟物品来源、权属、真伪、性能、规格、质量、数量等权利属性、自然属性及其他各种状况。因此,交易各方在交易前应加以仔细辨明,并慎重考虑和评估交易可能产生的各项风险。

扫描二维码推送至手机访问。

版权声明:本文由点度点度金讯时代-BLOG发布,如需转载请注明出处。

本文链接:https://lmwmm.com/post/1.html

分享给朋友:

“自己动手给网站增加一个夜间模式” 的相关文章

曾经比快播还火的 App,竟然又复活了。。

曾经比快播还火的 App,竟然又复活了。。

此前,微博话题“有哪些曾经很火,但消失了的APP”引发广大网友热议,有很多网友提到了“音悦台”.经过漫长的等待,音悦台终于要回归了!据音悦台官方透露,它们的产品已经开始内测,并即将推出,“我们曾经很火,但是并没有消失只是冬眠了…”今日,音悦...

ChatGPT来了,到底创造了什么

ChatGPT来了,到底创造了什么

ChatGPT引爆“iPhone时刻”,其威力在于语言,使其勾连了物理、精神与观念三大世界;它会创造什么?又会如何革新人类“存在之家”?文丨FT中文网财经版主编 徐瑾ChatGPT持续走热,可以说是2023的年度事件。对此,有人欢呼,新风口...

一口气最全解读 ChatGPT 编程超能力,13个章节、50个实例,告诉你从哪儿开始!

一口气最全解读 ChatGPT 编程超能力,13个章节、50个实例,告诉你从哪儿开始!

前言今天,我们通过十三个章节,50+个示例,为大家展示ChatGPT在编程开发方面的无限潜力。有了ChatGPT的力量,可以简化工作流程,减少错误,甚至改进代码!从作为初学者学习知识,到为面试做准备,所有你需要的,基本都覆盖了。不过也要注意...

ChatGPT能上传文件了,文档图片数据集秒理解,代码一键执行

ChatGPT能上传文件了,文档图片数据集秒理解,代码一键执行

梦晨 发自 凹非寺量子位 | 公众号 QbitAIChatGPT又出试验型新模式,不少网友陆续收到代码解释器Alpha测试资格。简单来说,这个模式提供两个功能:执行Python代码,接受文件上传下载。为什么是这两个功能的组合?可以看目前最火...

ChatGPT访问量再创新高:百度的60%,谷歌的2%

ChatGPT访问量再创新高:百度的60%,谷歌的2%

梦晨 发自 凹非寺量子位 | 公众号 QbitAIChatGPT上月全球访问量 17.6 亿次,已达到谷歌的2%! 根据SimilarWeb统计,已超越必应、鸭鸭走DuckDuckGo等其他国际搜索引擎。 挡在前面...

AI孙燕姿翻唱爆火,多亏这个开源项目!广西老表带头打造,上手指南已出

AI孙燕姿翻唱爆火,多亏这个开源项目!广西老表带头打造,上手指南已出

AI孙燕姿这么快翻唱了这么多首歌,到底是咋实现的?关键在于一个开源项目。最近,这波AI翻唱趋势大火,不仅是AI孙燕姿唱的歌越来越多,AI歌手的范围也在扩大,就连制作教程都层出不穷了。而如果在各大教程中溜达一圈后就会发现,其中的关键秘诀,还是...