Question

您好，我正在寻找一种解决方案，我们可以传递css和js数组并将其自动设置为cakephp 3.5中的css（位于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

... ...

Answer 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

如何从Cakephp 3.5中的Controller / View动态设置heads和js的CSS

1 个答案: