B2主题美化-网站增加黑夜模式

Jaysun

文章最后更新时间:2023年02月11日已超过385天没有更新。

现在网站基本都是有夜间模式的,由于之前用的主题自带夜间模式,而换到7b2主题后少了这个功能感觉有点不适应,恰巧找到了guhuan大佬写的一篇教程,通过大佬的帮助,完美实现了夜间模式功能。这里也给大家分享一下本人在使用这个教程时遇到的一些问题以及解决方法。


使用教程:

1、首先,您的b2主题必须设置为社交类型菜单(此暗黑模式仅仅适配了此菜单,如果你想使用其他类型菜单可以参考night_style.CSS文件末尾的方法进行修改)

2、按照此教程修改完成后,会在侧边栏添加一个按钮进行模式切换。

3、本教程是以子主题部署为主。 如需修改父主题文中会特别标明。


第一步 引入本站图标和记录夜间开启状态


打开b2子主题目录下的header.php文件,或前往b2主题后台→常规设置添加如下代码

<link rel="stylesheet" type="text/css" href="//at.aliCDN.com/t/font_2526599_atm7o7amjx6.css"/>


同样在b2子主题目录下的header.php文件body下方添加代码。

<!--夜间模式开始-->
<script src="//at.alicdn.com/t/font_2526599_atm7o7amjx6.js"></script>
<script type="text/javascript">
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 0.1){
            document.body.claSSList.add('night');
            document.cookie = "night=1;path=/";
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
        }
    }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');
        }
    }
})();
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=/"
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
    }
}
</script>
<!--夜间模式结束-->

第二步 侧边栏图标切换

打开b2子主题目录下的child.js,添加如下代码。

/*夜间模式按钮切换*/
$("#ls").click(function () {
if ($(this).hasClass("b2-baitian-qing")) {
  $(this).removeClass("b2-baitian-qing")
  $(this).addClass("icon-tianqiyubao24")
  } else if ($(this).hasClass("b2-yewan")) {
    $(this).removeClass("b2-yewan")
    $(this).addClass("b2-baitian-qing")
  }
})

第三步 添加侧边栏按钮

打开b2父主题目录下b2/Modules/Templates/Footer.php文件,如果您的这个文件未修改的话,就在大约372行下面添加如下代码。具体请看图,找出规律即可,但是要记住的是,这个文件是不能复制到子主题进行修改的哦。

<div class="bar-item switch-theme">
  <a id="theme" href="javascript:switchNightMode()" target="_self">
  <i id="ls" class="muyu b2-baitian-qing"></i>
  <span class="bar-item-desc">夜间模式</span></a>
</div>

第四步 下载样式文件等并引入至网站(此处认真阅读~)

1 下载本文文末的压缩包文件

2 在子主题根目录新建Assets文件夹(注意区分大小写)

3 将压缩包内的kuvnlwhlqol.css文件上传至Assets文件夹下

4 在Assets文件夹下新建css文件夹 (注意区分大小写)

5 将压缩包内的night_style.css上传至css文件夹下

6 在子主题根目录下的functions.php文件下,加入如下代码即可

隐藏内容
评论可见
前往评论


其他事项

1 如果设置好了之后图标显示不出来请修改图标

可以修改成你自己的iconfont图标,也可以修改成春哥的iconfont图标;

2 单纯的黑暗需要更改色调

(但也不一定按照这里的色调哦,只是建议更改)

网站主色调:#e55039

网站背景颜色:#1b1d1f

顶部背景颜色:#1b1d1f

顶部文字颜色:#fffbf0

底部第一层背景颜色:#1b1d1f

底部第一层文字颜色:#fffbf0

底部第二层背景颜色:#1b1d1f

底部第二层文字颜色:#fffbf0


附件
b2夜间模式-v0.5版本
27.4 K
蓝奏云
****(需购买后查看)
下载文件
附件购买
售价:0 积分

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

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 14 条评论,1155人围观)
网友昵称:console.log
console.log V 普通用户 Google Chrome 121.0.0.0 Mac OS X 10.15.7 14楼
02-10 来自湖南 回复
我看看是怎么回事
网友昵称:yuemeile
yuemeile V 普通用户 Google Chrome 117.0.0.0 Android 10 13楼
2023-10-10 来自四川 回复
看看看看
网友昵称:Controller
Controller V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 12楼
2023-08-07 来自湖北 回复
文章不错,写的很好!文章不错,写的很好!
网友昵称:Controller
Controller V 普通用户 Google Chrome 115.0.0.0 Windows 10 x64 11楼
2023-08-07 来自湖北 回复
文章不错,写的很好!
网友昵称:curvature
curvature V 普通用户 Google Chrome 114.0.0.0 Windows 10 x64 10楼
2023-07-26 来自广东 回复
谢谢分享
网友昵称:yixinis
yixinis V 普通用户 Google Chrome 69.0.3947.100 Windows 10 x64 9楼
2023-06-04 来自北京 回复
谢谢分享
网友昵称:1811687158
1811687158 V 普通用户 Google Chrome 111.0.0.0 Windows 10 x64 8楼
2023-04-29 来自山东 回复
哦用吗
网友昵称:paayoo
paayoo V 普通用户 Sogou Explorer Windows 10 x64 7楼
2023-04-26 来自四川 回复
谢谢分享
网友昵称:zhaokezx
zhaokezx V 普通用户 Google Chrome 112.0.0.0 Windows 10 x64 6楼
2023-04-26 来自河北 回复
神鼎飞丹砂发的是
网友昵称:Controller
Controller V 普通用户 Google Chrome 114.0.0.0 Windows 10 x64 地板
2023-04-24 来自湖北 回复
看一看
网友昵称:iaqqtz
iaqqtz V 普通用户 Google Chrome 86.0.4240.198 Windows 7 x64 凉席
2023-03-29 来自天津 回复
感谢分享啊
网友昵称:henryour
henryour V 普通用户 Google Chrome 108.0.5359.95 Windows 10 x64 板凳
2023-03-08 来自福建 回复
看一看
网友昵称:vovotou
vovotou V 普通用户 Firefox 110.0 Mac OS X 10.15 椅子
2023-02-27 来自广西 回复
感谢分享!
网友昵称:12345678999
12345678999 V 普通用户 Google Chrome 110.0.0.0 Windows 10 x64 沙发
2023-02-12 来自广东 回复
感谢分享

目录[+]

取消
微信二维码
微信二维码
支付宝二维码