首页 > 代码库 > 网站多种主题颜色替换的不同实现
网站多种主题颜色替换的不同实现
一般来说网站改版或者由于用户喜好不同,需要准备几套不同的主题or皮肤,
本文从颜色示例,记录一下就网站主要配色切换的几种方法及场景:
一 ,每一套主题配置一份资源文件(web/css)、
这种思路是最简单的,在布局文件中引用选中主题的资源即可,
缺点在于 需要生成几份文件并维护,网站本身引用插件的资源文件也需要配置成对应几份,具体实现就不多说了
二,使用CSS变量来配置主题,方法如下:
1,根据管理员选择生成主题css颜色文件,
$colorcss=":root{".PHP_EOL ."--nicecolor:".$colorcode.";".PHP_EOL ."}"; file_put_contents‘/web/css/themecolor.css‘, $colorcss);
生成的css 文件如下:
:root{ --nicecolor:#0aa770; }
2,在主布局中引用该css文件,例如Yii2中可以写在\assets\AppAsset.php中,在view中引用即可。
class AppAsset extends AssetBundle { public $basePath = ‘@webroot‘; public $baseUrl = ‘@web‘; public $css = [ ‘css/themecolor.css‘, ‘css/site.css‘, ]; }
3,在资源文件中引用变量即可,例如
.themesnewstyle{ background-color: var(--nicecolor); } .themesnewstyle1{ color: var(--nicecolor); }
4 这种方法比较简单,适合演示 做demo,支持火狐和chrome,不支持IE,edge等,不能作为线上使用
三 PHP 代码替换生成资源类css
1 定义文件内容替换方法如下:
//替换文件内容 public static function fileReplace($dir,$oldstr,$newstr){ file_put_contents($dir,str_replace($oldstr,$newstr,file_get_contents($dir))); }
2 在管理员更换主题时,调用该方法替换相关的css文件即可
fileReplace(getcwd().‘/uploadify/uploadify.css‘, $colorold, $colornew);
3 这种方法需要资源文件提供写权限,适合中小网站资源文件不太大的时候(百K以内)
四 和第三种类似,区别在于替换文件内容方法不一样
1 替换CSS文件内容
//替换文件内容 public static function fileReplace($dir,$oldstr,$newstr){ $fp=fopen("home.css",‘r+‘); while(!feof($fp)) { $buffer=fgets($fp,4096); //替换文件 $buffer = str_replace($oldstr,$newstr,$buffer); fwrite($fp, $buffer); } fclose($fp); }
2 此方法适用于资源文件内容较大的情况。
网站多种主题颜色替换的不同实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。