php - CakePHP:在使用 HtmlHelper 时将 CSS 添加到 CSS block 而不是使用内联输出的优势?

标签 php html css cakephp

我几天前开始学习 CakePHP,跟随他们的博客教程。
现在我正在为自己编写一个小元素以熟悉该框架。

在研究了他们的文档后,我注意到有两种方法可以包含 CSS 文件。
一种方法是使用 HtmlHelper 回显链接标记:echo $this->Html->css(array('style', 'forms', 'modal')); .根据选项数组,这种类型的链接称为“内联样式”。

另一种方法是将标签添加到(我相信是默认的?)CSS block ,然后在 <head> 中打印该 block 。 :

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>
...

最简单的方法

默认情况下,呈现的 View 将包含:

...
<head>
...
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>

如果没有与是否应添加 css 文件相关的逻辑 - 只需编辑布局文件并添加 css 文件,忽略 inline 属性是合适的。

优点:发生的事情简单、清晰、明显

动态方式

但是,如果存在与是否应包含特定 css 文件相关的逻辑 - 这就是 inline 属性变得有用的地方。

考虑以下 View 文件:

<?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 文件添加到渲染输出的头部。但是,通过使用内联属性,可以构建最终 View 所需的 css 文件。

优点:布局文件之外的代码可以将所需的 css 文件添加到 head 中的输出。

关于php - CakePHP:在使用 HtmlHelper 时将 CSS 添加到 CSS block 而不是使用内联输出的优势?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22898383/

相关文章:

php - 无法找到驱动程序 - lamp debian

php - 如何将两个四元数相乘

php - 如何存储唯一但与数据库相关的数据点

html - 增加CSS圆圈的悬停区域

javascript - 将元素列表提供给 3 列布局

css - 在 CSS 中指定相对于父 DIV 的精确百分比宽度

html - 错误消息 : <span> vs <label>

javascript - 使用 PHP(Codeigniter) 将变量从 Controller 传递到 javascript

javascript - 禁用移动浏览器滑动返回行为?

html - rendersubtree 不可见 vs 隐藏或不显示