cambiare dinamicamente CSS con framework fat free?
Sto cercando di utilizzare alcuni codici brevi all'interno del mio CSS in modo da poterli modificare tutti in una volta con variabili fat free.
Ad esempio dal mio config.ini:
accentColor=8f0
E nel mio style.css sarebbe:
.addToCart:hover {
background-color: #[[accentColor]];
}
nel mio file di visualizzazione 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;}";
}
?>
Sta trovando style.css a posto e le altre modifiche allo shortcode funzionano. {{@accentColor}} non funziona nel file style-user.php ma funziona bene in header.htm. Cosa mi manca?
C'è un modo migliore per farlo?
EDIT: ho messo il .php nella cartella principale invece che nella cartella / ui / css. Ecco cosa ho ottenuto:
<?PHP
$f3=require('lib/base.php');
$f3->config('options.ini'); $f3->set('CACHE',TRUE);
echo Template::instance()->render('ui/css/style.css','text/css');
?>
Quindi, all'interno del file css, usa le variabili del modello {{@accentColor}} come al solito.
Risposte
Sta trovando style.css a posto e le altre modifiche allo shortcode funzionano. {{@accentColor}} non funziona nel file style-user.php ma funziona bene in header.htm. Cosa mi manca?
Presumo che tu stia usando il sistema di template di F3 per il rendering header.htm. Sembra che tu non stia utilizzando il sistema di modelli per eseguire il rendering del file CSS.
Proporrei di utilizzare il sistema di template e le variabili template (come {{ @accentColor }}). Quindi saresti in grado di memorizzare nella cache i file modello analizzati e / oi file CSS risultanti per motivi di prestazioni.
Il tuo codice potrebbe essere simile al seguente frammento:
<?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
]
);
Naturalmente ci sono altre soluzioni. Vorrei registrare un percorso CSS o fornire un file PHP che esegue il bootstrap F3 per eseguire il rendering del file CSS con le tue variabili.