B2主题美化之夜间/黑夜模式自动切换版(2022)

前几天微信群有粉丝让给奇它论坛增加一个黑夜模式,故去找了一圈教程,发现还挺多的,故老白我找了一个进行了简单的修改,适配到了现在网站里面。现在就把这个教程写出来,作为一个B2主题美化记录:WordPress网站B2主题夜间/黑夜模式自动切换版(2022),添加位置分别为电脑端右下角、手机端顶部菜单栏右上角。

1.演示效果

以下分别是是手机端与电脑端的演示效果奇它论坛https://www.qitabbs.com/17946.html

B2主题美化之夜间/黑夜模式自动切换版(2022)

移动端切换按钮右上角(已设置pc端隐藏)

B2主题美化之夜间/黑夜模式自动切换版(2022)

电脑端切换按钮-右下角(移动端隐藏)

2.黑夜模式功能代码

代码来自许天和许先生两位站长,感谢他们的分享,我仅是写了一个使用说明书而已

css代码:部分样式可能要根据自己网站的情况调整

https://img.ahap.cn/file/ahap/CSS/b2/quyl.css

js代码:不用修改奇它论坛https://www.qitabbs.com/17946.html

 //夜间模式-https://www.qitabbs.com/17946.html
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
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');
}
}
})();
//夜间模式切换-https://www.qitabbs.com/17946.html
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('夜间模式关闭');
}
}

3.B2主题集成黑夜模式

关于B2主题黑夜模式的集成,看到好些教程,极其繁琐,看得我头晕,我个人理解的过程就是:添加黑夜模式功能——将功能摆放在合适的位置。

3.1引入黑暗模式

首先是引用功能到B2主题,将上面的css文件和js,保存成文件引入到footer.php,注意文件位置(我这里是网站根目录),放在</body>标签之前即可

<link rel="stylesheet"href="/nightqita.css">
<script type="text/javascript" src="/nightqita.js"></script>

3.2电脑端右下角

修改位置:Modules/Templates/Footer.php奇它论坛https://www.qitabbs.com/17946.html

效果大家看前面我放的预览图,此处我是将二维码给替换了,大家也可以自行定义

 <!--切换亮度修改byqitabbs.com--> 
<div class="bar-item bar-qrcode"><a href="javascript:switchNightMode()" target="_self">
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-liangdu"></use></svg>
</a>
</div>

B2主题美化之夜间/黑夜模式自动切换版(2022)

3.3 手机端右上角

修改位置:Modules/Templates/Header.php,我此处新定义了一个,方便设置电脑端隐藏,在代码header-banner-right normal-banner-right下方

 <div class="night-qitabbs"><a href="javascript:switchNightMode()" target="_self"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liangdu3"></use></svg></a></div>

B2主题美化之夜间/黑夜模式自动切换版(2022)

CSS修改一下位置和设置电脑端隐藏(添加在style.css文件中即可)

以上就是奇它论坛@老白分享的B2添加黑夜模式的教程,更多B2主题美化的教程在文末标签。

WordPress教程合集:https://www.qitabbs.com/jianzhan

经验·技巧网站建设

WordPress去除/禁止后台侧栏插件-主题-版本更新提示

2022-4-21 11:19:20

经验·技巧网站建设

WordPress网站宝塔面板开启404防盗链教程

2022-4-26 11:47:30

40 条回复 A文章作者 M管理员
  1. 体验服

    学习一下

  2. fff

    学习以下,正需要

  3. natian

    学习以下,正需要

  4. 一梦千年

    感谢分享

  5. picnic

    谢谢

  6. meteorrrr

    真不错

  7. 支持

    看看有没有

  8. wi196324

    感谢分享

  9. 夕阳团

    感谢分享

  10. 周杰伦啊

    夜间模式下刷新页面每次会闪白一下

  11. wi196324

    感谢

  12. xswy

    看一下正需要

  13. 灬清风

    看看

  14. 周杰伦啊

    看一眼吧啊

  15. biwawa

    看看

  16. abco

    感谢,很实用

  17. 小白1234

    学习一下啊

  18. B2b2

    感谢分享

  19. chers

    感谢分享

  20. June

    优秀优秀

  21. 小雨

    学习

  22. odmins

    看看咋用,感谢老铁分享

  23. Nipsih

    这个的确是正需要的东西

  24. 骚凌云

    看看

  25. Qitag

    学习学习

  26. 我来啦

    学习一下

  27. clover

    学习一下

  28. HaiVong

    感谢分享呀

  29. 夕阳景

    学习一下啊

  30. 是阿峰同学

    nice~哈哈nice~哈哈

  31. 叽叽嘎嘎

    nice~哈哈

  32. 哔哩哔哩

    学习一下啊

  33. 优渥设计

    学习一下啊

  34. guo5524560

    看看

  35. 初心8046

    支持

  36. 艾奇云

    测试看看

个人中心
购物车
今日签到
有新私信 私信列表
搜索