几天前,我开始学习CakePHP,遵循他们的博客教程。
现在我正在为自己编写一个小项目,以熟悉框架。
在研究了他们的文档后,我注意到有两种方法可以包含CSS文件。
一种方法是使用 HtmlHelper: echo $this->Html->css(array('style', 'forms', 'modal'));
回显链接标记。根据选项数组,这种类型的链接称为"内联样式"。
另一种方法是将标签添加到(我相信默认?CSS 块,然后在<head>
内打印该块:
echo $this->Html->css(array('style', 'forms', 'modal'), array('inline' => false));
echo $this->fetch('css');
使用一种方式比另一种方式有什么优势?
请考虑以下布局文件:
...
<head>
...
<?= $this->Html->css('main.css'); ?>
<?= $this->fetch('css'); ?>
...
</head>
...
最简单的方法
默认情况下,呈现的视图将包含:
...
<head>
...
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
如果没有与是否应添加 css 文件相关联的逻辑 - 只需编辑布局文件并添加 css 文件即可,忽略 inline
属性。
优点:简单、清晰、明显地了解正在发生的事情
动态方式
但是,如果存在与是否应包含特定 css 文件相关的逻辑 - 这就是 inline
属性变得有用的地方。
请考虑以下视图文件:
<?php
if ($something) {
$this->Html->css('maps.css', ['inline' => false]);
echo $this->element('maps');
}
?>
View contents
或者包含以下帮助程序的插件:
<?php
class AwesomeHelper extends AppHelper {
public function beforeLayout() {
$this->Html->css('awesome.css', ['inline' => false]);
$this->Html->js('awesome.js', ['inline' => false]); // also applies to js files
}
}
在这些情况下,如果不使用内联属性或编辑布局文件,则无法将 css 文件添加到呈现输出的头部。但是,通过使用内联属性,可以构建最终视图所需的 css 文件。
优点:布局文件外的代码可以将所需的 css 文件添加到头部的输出中。