B2美化-增加黑夜模式

已测试此教程可适配B2 PRO 3.1.73版本

由于之前用的主题自带夜间模式,而换到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文件下,加入如下代码即可

wp_enqueue_style( 'child-night_style', B2_CHILD_URI.'/Assets/css/night_style.css' , array() , B2_VERSION, 'all');

其他事项

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

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

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

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

网站主色调:#e55039

网站背景颜色:#1b1d1f

顶部背景颜色:#1b1d1f

顶部文字颜色:#fffbf0

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

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

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

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

百度云盘

提取码:3amh复制
解压码:无

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
版权声明:
1.本站多数刊载内容若无特殊说明或标注,均为本站或会员原创发布。任何个人/组织/社会团体在未征得本站同意的情况下进行复制/盗用/抄袭/恶意传播至其他平台以及用于非法盈利者,网站所有者有权收集证据并提交相关部门进行处理。
2.本站所刊载内容部分为网络求购搜集整理,包括但不限于代码,应用程序,影音资源,电子书籍资料等,并且以研究交流为目的,所有仅供大家参考,学习,不存在任何商业目的与商业用途。若您使用开源的软件代码,请遵守相应的开源许可规范和精神,若您需要使用非免费的软件或服务,您应当购买正版授权并合法使用。如果您下载本站文件,表示您同意只将此文件用于参考、学习使用而非其他任何用途。
3.本站部分资源来源于用户上传和网络,如有侵权请邮件至(muduixi@163.com)联系我们,核实后会第一时间予以下架并删除。
4.本站推荐的资源均经过站长检测或者个人发布,不包含恶意软件病毒代码等,如果您发现此类问题,请尽快向站长举报。
5.本站仅提供下载文件的信息服务,除本站原创产品以及特别注明的产品外,其他免费及付费资源仅提供简单的售后。
6.由于本站资源大多来源于互联网,非原创及特别注明的产品外,如下载资源存在BUG以及其他任何问题,请自行调试解决。
7.如果您发现本站文件已经失效不能下载或不能正常访问,请联系站长尽快修正。
8.更多资源求购/资源分享/广告合作或其他信息请联系站长!

给TA打赏
共{{data.count}}人
人已打赏
技术教程软件源码

端口映射抖音去水印源码

2022-3-19 18:20:17

使用教程技术教程私人订制

苹果手机获取UDID设备码教程

2022-8-12 19:26:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索