B2主题美化之夜间/黑夜模式自动切换版(2022)
前几天微信群有粉丝让给老白博客增加一个黑夜模式,故去找了一圈教程,发现还挺多的,故老白我找了一个进行了简单的修改,适配到了现在网站里面。现在就把这个教程写出来,作为一个B2主题美化记录:WordPress网站B2主题夜间/黑夜模式自动切换版(2022),添加位置分别为电脑端右下角、手机端顶部菜单栏右上角。
1.演示效果
以下分别是是手机端与电脑端的演示效果老白博客https://www.xcbtmw.com/17946.html
![B2主题美化之夜间/黑夜模式自动切换版(2022)](https://www.xcbtmw.com/wp-content/uploads/2023/07/20230725224845-49903.jpeg.webp)
移动端切换按钮右上角(已设置pc端隐藏)
![B2主题美化之夜间/黑夜模式自动切换版(2022)](https://www.xcbtmw.com/wp-content/uploads/2023/07/20230725224845-b5a8d.jpeg.webp)
电脑端切换按钮-右下角(移动端隐藏)
2.黑夜模式功能代码
代码来自许天和许先生两位站长,感谢他们的分享,我仅是写了一个使用说明书而已
css代码:部分样式可能要根据自己网站的情况调整
https://img.ahap.cn/file/ahap/CSS/b2/quyl.css
js代码:不用修改老白博客https://www.xcbtmw.com/17946.html
//夜间模式-https://www.xcbtmw.com/17946.html
(function(){
if(document.cookie.replace(/(?:(?:^|.*;s*)nights*=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*)nights*=s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.remove('night');
}else if(night == '1'){
document.body.classList.add('night');
}
}
})();
//夜间模式切换-https://www.xcbtmw.com/17946.html
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=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.xcbtmw.com/17946.html
(效果大家看前面我放的预览图,此处我是将二维码给替换了,大家也可以自行定义)
<!--切换亮度修改byxcbtmw.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)](https://www.xcbtmw.com/wp-content/uploads/2023/07/20230725224846-d2f82.jpeg.webp)
3.3 手机端右上角
修改位置:Modules/Templates/Header.php,我此处新定义了一个,方便设置电脑端隐藏,在代码header-banner-right normal-banner-right下方
<div class="night-xcbtmw"><a href="javascript:switchNightMode()" target="_self"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liangdu3"></use></svg></a></div>
![B2主题美化之夜间/黑夜模式自动切换版(2022)](https://www.xcbtmw.com/wp-content/uploads/2023/07/20230725224847-57c76.jpeg.webp)
CSS修改一下位置和设置电脑端隐藏(添加在style.css文件中即可)
以上就是老白博客@老白分享的B2添加黑夜模式的教程,更多B2主题美化的教程在文末标签。
WordPress教程合集:https://www.xcbtmw.com/jianzhan
谢谢 来学习了呀
厉害!真是高手啊!
高手高手!嘎嘎手!
66666加油老哥
66666加油老哥
谢谢支持
,现在B2主题也没多少需要弄的了