如何解决用无脂肪框架动态更改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文件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。