如何在 Cakephp 3.5 中从 Controller/View 动态设置 css on head 和 js on footer答案

【问题标题】：How can set css on head and js on footer dynamically from Controller/View in Cakephp 3.5如何在 Cakephp 3.5 中从 Controller/View 动态设置 css on head 和 js on footer
【发布时间】：2018-10-12 11:25:04
【问题描述】：

您好，我正在寻找一个解决方案，我们可以在其中传递 css 和 js 数组，并在 cakephp 3.5 中自动将其设置为 css(in Header) 和 js(footer) 默认布局

问题是所有css和js都在每个页面中调用，这不是必需的。

你能帮忙吗？

    ...
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $this->fetch('title'); ?>
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?= $this->Html->css('assets.min') ?>
    <?= $this->Html->css('styles') ?>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Josefin+Slab:100,100italic,300,300italic,regular,italic,600,600italic,700,700italic%7CLato:100,100italic,300,300italic,regular,italic,700,700italic,900,900italic%7CMontserrat:regular,700%7CNoto+Sans:regular,italic,700,700italic%7COpen+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
        @import url("https://fonts.googleapis.com/css?family=Play:regular,700%7CRaleway:100,200,300,regular,500,600,700,800,900%7CRoboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic%7CSlabo+13px:regular%7CSlabo+27px:regular&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
        @import url("https://fonts.googleapis.com/css?family=Ubuntu:300,300italic,regular,italic,500,500italic,700,700italic&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
    </style>
    <?= $this->Html->css('styles-assets') ?>
    <?= $this->fetch('meta') ?>
</head>
<body class="moto-background">
    <div class="page">
        <?= $this->element('header'); ?>
        <?= $this->fetch('content') ?>
    </div>
    <?php echo $this->element('footer'); ?>
    <div data-moto-back-to-top-button class="moto-back-to-top-button">
        <a ng-click="toTop($event)" class="moto-back-to-top-button-link">
            <span class="moto-back-to-top-button-icon fa"></span>
        </a>
    </div>
    <?php echo $this->Html->script("jquery-1.9.1.min"); ?>
    <?php echo $this->Html->script("jssor.slider.min"); ?>
    <script>
    jQuery(document).ready(function ($) {

        var options = {
            $FillMode: 2,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $AutoPlay: 1,                                       //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
            $Idle: 4000,                                        //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnH

... ...

【问题讨论】：

Using Blocks for Script and CSS Files 的手册部分非常清楚地介绍了这一点。

标签： cakephp cakephp-3.0 cakephp-3.x

【解决方案1】：

@Grag Schmidt 为您指明了正确的方向。

布局文件中的这一行会侦听其他 css 文件并将它们放在文件顶部的标签内。

<?= $this->fetch('css') ?>

从视图中调用带有block => true 选项的HtmlHelper css 函数，然后将文件插入到调用fetch('css') 的位置。

$this->Html->css('additional_style.css', ['block' => true]);

另见

Cookbook > Views > Using Blocks for Script and CSS Files

【讨论】：