使用 fat free 框架动态更改 CSS？

Question

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

例如来自我的 config.ini:

accentColor=8f0

在我的 style.css 中是：

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

在我的 header.htm 查看文件中：

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

样式-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 }} 模板变量。

Answer 1

It's finding style.css fine and the other shortcode changes are working. {{ @accentColor }} is not working in the style-user.php file but works fine in header.htm. What am I missing?

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

我建议使用模板系统和模板变量（如 {{ @accentColor }}）。然后，出于性能原因，您将能够缓存已解析的模板文件 and/or 结果 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 路由或提供一个 PHP 文件，该文件正在引导 F3 以使用您的变量呈现 CSS 文件。

使用 fat free 框架动态更改 CSS？

dynamically change CSS with fat free framework?

fat-free-framework