CakePHP 中的 CSS 文件内部如何处理 URL 以便它们引用正确的位置?
-
21-08-2019 - |
题
我经常使用 CSS 文件设计一个网站,但我在列表中多次出现背景图像、项目符号图像,我可能会发现 css 的另一个需求 url()
功能。
但是,在 cake 中,所有 URL 都应该由 Route::url()
功能,以多种方式,最常见的是 $html->url()
但我的问题是 PHP 不解释 CSS 文件。我如何创建一个包含以下内容的 CSS 文件:
div.coolbg {
background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}
看,我的最后一个选择是在布局上内联导入 css 文件,以便可以对其进行解释。但我非常喜欢使用更“蛋糕”的方法。
谢谢!
解决方案
您不需要在你的CSS文件中使用$ HTML的“网址(),因此你不需要通过PHP解析CSS文件或创建CssController。
如果你的蛋糕的应用程序安装在您的虚拟主机的DocumentRoot,才使所有的路径,从根目录绝对图像。 e.g。
div.coolbg {
background-image: url(/img/coolbg.jpg);
}
这将在应用程序/根目录/ IMG / coolbg.jpg应用映像到您的
如果你的蛋糕应用程序未安装在虚拟主机的DocumentRoot,也就是说,你通过URL访问你的蛋糕应用如 http://www.domain.com/myapp/ ,那么你做的路径相对于CSS文件的图像。退房样式规则在app / Webroot公司/ CSS / cake.generic.css e.g。
#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}
这工作,因为样式表活在应用程序/ Web根目录/ CSS /目录,图像住在app / Webroot公司/ IMG /目录下,这样的路径“../img/cake.icon.gif”上来了的CSS的目录,然后回落到IMG目录。
其他提示
我肯定会去通过zam3858建议的解决方案。如果你不喜欢在两个不同位置您的图像,创建指向图像的CSS目录的符号链接。像这样:
$ cd app/webroot/css
$ ln -s ../img .
现在,图像路径将被正确两者的HTML辅助和样式表解决:
// css:
url(img/image.png);
// view.ctp
echo $html->image('image.png');
有可能不是cakiest解决方案,但它并不像CakePHP提供了一个。
更改与background
行至
background:url(../img/menu_027_l.jpg) no-repeat left;
您可以通过编辑您的.htaccess文件中添加的Apache通过PHP处理CSS。处理它,而不是仅仅吐出出来确实有轻微的性能命中。
AddType application/x-httpd-php .css
除非您首先实例化 Cake 对象,否则这对 Cake 的内容不会有太大帮助。如果您想使用 html 帮助程序,您可能需要弄清楚第一个 Cake 对象是如何实例化的,然后在 CSS 内容中模仿它。不确定我该怎么做——我认为拥有一个完整的 CSSController 会有点过分,但我认为你可能必须实例化一个应用程序控制器(毕竟,你希望重写的 css url 来反映你的应用程序的设置,对吧? )。所以我想你可能无论如何都必须创建一个 CSSController 。
CakePHP的专家组成的一大堆很可能会恨我建议这一个..:)
对我来说,最简单的解决办法是只包括在CSS文件夹中的图像文件。像这样
/app/webroot/css/css_images/mypic.jpg
所以在css文件我只想把在:
background-image: url(css_images/mypic.jpg);
坏事显然它不是做cakiest事情。好事是它会成功,无论如果你正在使用花哨的URL或不因为CSS发现相对于css文件的图像。
我发现,在CSS下降相对URL在CakePHP的一个辅助嵌入CSS分开时。这是因为路由器能够不同的URL映射到同一个页面,以便那么相对URL需要是不同的。例如,如果你有一个像本地主机/ MYAPP /零件/索引或本地主机/ MYAPP /零件/或本地主机/ MyApp的/部分则URL ../img/image.gif的相对URL将只为他们的工作之一。
在我的帮助,我发现要解决它的唯一办法就是让我的CSS像这样
.jquery-dialog-spinner {
display: none;
position: fixed;
z-index: 1010;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 0, 0, 0, .1 )
url('__loader_image__')
50% 50%
no-repeat;
}
,然后与在代码中生成的URL输出之前的CSS替换该标签。
$map = array(
'__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL))
);
$formatted_css = strtr($this->css, $map);
$response .= "<style type=\"text/css\">" . $formatted_css . "</style>";
如果有一个更简单的方式来做到这一点,我将不胜感激评论。