增加一个黑夜模式,故去找了一圈教程,发现还挺多的,故我找了一个进行了简单的修改,适配到了现在网站里面。现在就把这个教程写出来,作为一个B2主题美化记录:WordPress网站B2主题夜间/黑夜模式自动切换版,添加位置分别为电脑端右下角、手机端顶部菜单栏右上角。
效果图
黑夜模式功能代码
代码来自许天和许先生两位站长,感谢他们的分享,我仅是写了一个使用说明书而已
css代码:部分样式可能要根据自己网站的情况调整
https://img.ahap.cn/file/ahap/CSS/b2/quyl.css
js代码:不用修改老白
}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.xingkongweb.com/60289.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('夜间模式关闭');
}
}
B2主题集成黑夜模式
关于B2主题黑夜模式的集成,看到好些教程,极其繁琐,看得我头晕,我个人理解的过程就是:添加黑夜模式功能——将功能摆放在合适的位置。
引入黑暗模式
首先是引用功能到B2主题,将上面的css文件和js,保存成文件引入到footer.php,注意文件位置(我这里是网站根目录),放在</body>标签之前即可
<link rel="stylesheet"href="/nightqita.css">
<script type="text/javascript" src="/nightqita.js"></script>
电脑端右下角
修改位置:Modules/Templates/Footer.php
(效果大家看前面我放的预览图,此处我是将二维码给替换了,大家也可以自行定义)
<!--切换亮度修改xingkongweb.com.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>
手机端右上角
修改位置:Modules/Templates/Header.php
,我此处新定义了一个,方便设置电脑端隐藏,在代码header-banner-right normal-banner-right下方
CSS修改一下位置和设置电脑端隐藏(添加在style.css文件中即可)
/*
* this for night-xingkongweb.com
*/
.night-xcbtmw {
position: relative;
right: 6px;
display: flex;
}
.night-xcbtmw{
display: none;
}
@media (max-width: 767px) {
.night-xcbtmw{
display: block !important;
}
}