ZF2 如何在布局中使用页面 javascripts 和样式表答案

【问题标题】：ZF2 How to use pages javascripts and stylesheets in layoutZF2 如何在布局中使用页面 javascripts 和样式表
【发布时间】：2014-10-24 14:56:56
【问题描述】：

我用的是zend框架2。

这是我的 layout.phtml

<?php echo $this->doctype(); ?>
<html class="fixed" lang="en">
<head>

    <!-- Basic -->
    <meta charset="UTF-8">
    <?php echo $this->headTitle('Test') ?>

    <?php

        /* Vendor CSS */
        $this->headLink(array(
                'rel' => 'shortcut icon',
                'type' => 'image/vnd.microsoft.icon',
                'href' => $this->basePath() . '/img/favicon.ico'
            ))
            ->appendStylesheet($this->basePath() . 'aaaa.css')
            ->appendStylesheet($this->basePath() . 'bbbb.css');


        /* Specific Page Vendor CSS */
        $this->headLink()
            ->appendStylesheet($this->basePath() . 'cccc.css')
            ->appendStylesheet($this->basePath() . 'dddd.css')

        /* Theme CSS */
        $this->headLink()
            ->appendStylesheet($this->basePath() . 'eeee.css');       
    ?>

</head>
<body>

<section class="body">

    <?php print $this->render('layout/header') ?>

    <div class="inner-wrapper">
        <?php print $this->render('layout/left-menu') ?>

        <section role="main" class="content-body">
            <?php echo $this->content; ?>
        </section>
    </div>

    <?php print $this->render('layout/right-menu') ?>
</section>

<?php
    /* Vendor */
    $this->headScript()
            ->appendFile($this->basePath() . 'aaaa.js')
            ->appendFile($this->basePath() . 'bbbb.js');          

    /* Specific Page Vendor */
    $this->headScript()
        ->appendFile($this->basePath() . 'cccc.js')
        ->appendFile($this->basePath() . 'dddd.js);

    /* Theme Base, Components and Settings */
    $this->headScript()
        ->appendFile($this->basePath() . 'eeee.js');

?>

</body>
</html>

此布局运行良好。但是特定页面供应商不需要在 layout.phtml 中设置。它会随着内容而改变。所以我需要将 /* 特定页面供应商 */ 部分移动到相关的 .phtml 文件中。之后我的布局和内容应该是这样的。

布局.phtml 文档类型（）； ?>

    <!-- Basic -->
    <meta charset="UTF-8">
    <?php echo $this->headTitle('Test') ?>

    <?php

        /* Vendor CSS */
        $this->headLink(array(
                'rel' => 'shortcut icon',
                'type' => 'image/vnd.microsoft.icon',
                'href' => $this->basePath() . '/img/favicon.ico'
            ))
            ->appendStylesheet($this->basePath() . 'aaaa.css')
            ->appendStylesheet($this->basePath() . 'bbbb.css');

        /* Theme CSS */
        $this->headLink()
            ->appendStylesheet($this->basePath() . 'eeee.css');       
    ?>

</head>
<body>

<section class="body">

    <?php print $this->render('layout/header') ?>

    <div class="inner-wrapper">
        <?php print $this->render('layout/left-menu') ?>

        <section role="main" class="content-body">
            <?php echo $this->content; ?>
        </section>
    </div>

    <?php print $this->render('layout/right-menu') ?>
</section>

<?php
    /* Vendor */
    $this->headScript()
            ->appendFile($this->basePath() . 'aaaa.js')
            ->appendFile($this->basePath() . 'bbbb.js');  

    /* Theme Base, Components and Settings */
    $this->headScript()
        ->appendFile($this->basePath() . 'eeee.js');

?>

</body>
</html>

内容.phtml

/* Specific Page Vendor CSS */
$this->headLink()
    ->appendStylesheet($this->basePath() . 'cccc.css')
    ->appendStylesheet($this->basePath() . 'dddd.css')

<h1>This is content of the page</h1>

/* Specific Page Vendor */
$this->headScript()
    ->appendFile($this->basePath() . 'cccc.js')
    ->appendFile($this->basePath() . 'dddd.js);

请假设底部样式表被覆盖在样式表之上。底部 javascript 使用上面的 javascript 函数。

我该怎么做？

【问题讨论】：

什么？为什么会重复？
不是很清楚问题是什么。您说您需要将一些标题移动到相关的 .phtml 文件中-您尝试过吗？它应该可以正常工作。
你想为不同的页面使用不同的布局吗？

标签： javascript css zend-framework zend-framework2 view-helpers

【解决方案1】：

您应该将布局文件和页面文件分开。布局 JS / CSS 是您在每个页面上都需要的文件。

内容样式/javascript 文件总是从控制器操作中加载。

$api->getView()->inlineScript()->appendScript('assets/js/jsfile.js');
$api->getView()->headLink()->appendStylesheet('assets/css/cssfile.css')

【讨论】：

我需要将 cccc.js、dddd.js 添加到 bbbb.js 和 eeee.js 中。它不是附加的。