用无脂肪框架动态更改CSS？

问题描述

我正在尝试在CSS中使用一些短代码，以便可以使用无脂肪的变量一次全部更改它们。

例如来自我的config.ini：

accentColor=8f0

按照我的风格，css是：

.addToCart:hover {
    background-color: #[[accentColor]];
}

在我的header.htm视图文件中：

<link rel="stylesheet" href="{{@BASE}}/ui/css/style-user.PHP">

style-user.PHP：

<?PHP
    header("Content-type: text/css; charset: UTF-8");
    $fullpath='http://'.$_SERVER['SERVER_NAME'].'/ui/css/style.css';

    if(file_exists('style.css')){
        $search=array('[[accentColor]]','[[protectPhotoOpacity]]','[[protectPhotoPosition]]');
        $replace=array('{{ @accentColor }}','0.3','30');
        echo str_replace($search,$replace,file_get_contents($fullpath));
    } else {
        echo "body {background-color: white;}";
    }
?>

发现style.css很好，其他短代码更改也正在起作用。 {{@accentColor}}在style-user.PHP文件中不起作用，但在header.htm中工作正常。我想念什么？

是否有更好的方法可以做到这一点？

编辑： 我将.PHP放在根文件夹中，而不是/ ui / css文件夹中。这就是我最终得到的：

<?PHP
    $f3=require('lib/base.PHP');
    $f3->config('options.ini');
    $f3->set('CACHE',TRUE);
    echo Template::instance()->render('ui/css/style.css','text/css');
?>

然后在css文件中，仅使用{{@ @accentColor}}模板变量即可。

解决方法

发现style.css很好，其他短代码更改也正在起作用。 {{@accentColor}}在style-user.php文件中不起作用，但在header.htm中工作正常。我想念什么？

我假设您正在使用F3的模板系统来渲染header.htm。看来您没有使用模板系统来呈现CSS文件。

我建议利用模板系统和模板变量（例如{{ @accentColor }}）。然后，出于性能原因，您将能够缓存已解析的模板文件和/或生成的CSS文件。

您的代码可能类似于以下代码段：

<?php

// Setup F3 here.
// You could utilize the routing system or skip routing and return only the CSS file.
// I would prefer the routing system with a cached route.

echo Template::instance()->render(
    'style.css',// Your CSS file stored in one of the `UI` directories
    'text/css',[
        'accentColor' => '#123456',// Specify variables or forward variables from a configuration file
    ]
);

当然，还有其他解决方案。我要么注册CSS路由，要么提供一个引导F3的PHP文件，以使用您的变量来呈现CSS文件。