ZF2如何在布局中使用页面javascript和样式表

时间:2014-10-22 14:22:53

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

我使用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中设置特定页面供应商。它会随着内容而改变。所以我需要移动/ *特定页面供应商* / part到相关的.phtml文件。之后我的布局和内容应该是这样的。

layout.phtml     DOCTYPE(); ?&GT;          

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

Content.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函数。

我该怎么做?

1 个答案:

答案 0 :(得分:0)

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

内容样式/ javascript文件始终从控制器操作加载。

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