Emlog教程

给你的网站添加前台皮肤切换功能

 8个月前 (02-29)    406  
文章目录

本来EASTER就有两种皮肤模式了,基佬紫和深暗黑两种模式,昨晚有小伙伴在群里说如果前台能加入自动切换的皮肤的功能就好了,于是乎有了下面的过程。

演示功能在本主题右上☆图标点击即可切换

首先如果需要切换两种皮肤模式,自然要写两个css样式文件来展示不同的效果。

这里EASTER主题已经有了,那么不多说,没有的需要自己再写一套~

话不多说,直接开始。首先在footer.php底部加入我们的js代码

<script>
//夜间模式切换
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('夜间模式开启');
        window.location.reload();
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
        console.log('夜间模式关闭');
        window.location.reload();
    }
}
</script>

其次我们要在header.php头部文件加入PHP的判断,检测到Cookie相关字段输出对应的模式CSS文件

这里我们以EASTER主题为例:

<?php 
	if($_COOKIE['night'] == '1'){
		echo '<link rel="stylesheet" id="skin.css-css" href="https://mengx.io/content/templates/easter/inc/skin/syber.css?ver=5.3.2" type="text/css" media="all">';
	}else{
		echo '<link rel="stylesheet" id="layouts-css" href="https://mengx.io/content/templates/easter/inc/skin/layouts.css?ver=5.3.2" type="text/css" media="all">';
	}
?>

这里我们是判断如果COOKIE里有night这个字段的内容值是1的话我们就调用我们的syber.css样式文件(也就是我们的暗黑模式)

如果不是1的话就输出原本的css样式文件(基佬紫)

好了教程就到这里需要你们自己去动手实现~

版权声明:Mengx 发布于 8个月前 (02-29),共 1782 字。
转载请注明:给你的网站添加前台皮肤切换功能

1 条评论

  • avatar

    流离之人 ( VIP 1 )

    回复

    哎呦不错哦

8个月前 (03-06)
微语功能页面做好啦! 详情