zoukankan      html  css  js  c++  java
  • 网站多种主题颜色替换的不同实现

    一般来说网站改版或者由于用户喜好不同,需要准备几套不同的主题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中可以写在assetsAppAsset.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 此方法适用于资源文件内容较大的情况。

  • 相关阅读:
    86. Partition List
    2. Add Two Numbers
    55. Jump Game
    70. Climbing Stairs
    53. Maximum Subarray
    64. Minimum Path Sum
    122. Best Time to Buy and Sell Stock II
    以场景为中心的产品设计方法
    那些产品经理犯过最大的错
    Axure教程:如何使用动态面板?动态面板功能详解
  • 原文地址:https://www.cnblogs.com/mengsx/p/6020473.html
Copyright © 2011-2022 走看看