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 此方法适用于资源文件内容较大的情况。

  • 相关阅读:
    SVNKit学习——基于Repository的操作之print repository tree、file content、repository history(四)
    java操作svn【svnkit】实操
    python笔记38-使用zmail发各种邮件案例代码
    python笔记37-史上最好用的发邮件zmail
    python笔记3-邮件发送(smtplib)
    第9期《python3接口自动化测试》课程,6月29号开学!
    anyproxy学习4-Linux(Centos)搭建anyproxy环境
    anyproxy学习3-修改返回内容(beforeSendResponse)
    anyproxy学习2-rule模块实现接口mock功能
    anyproxy学习1-windows平台安装和抓手机app上https请求
  • 原文地址:https://www.cnblogs.com/mengsx/p/6020473.html
Copyright © 2011-2022 走看看