README

版本 0.0.1

简介

AssetPackages ZF2 模块代表了在模板中包含 CSS 和 JS 的一种更抽象的方法。通常，如果您想包含 bootstrap 或其他自定义库，通常需要包含 CSS 和 JS 文件。您可能这样做

<?php echo $this->headLink()
                ->appendStylesheet('/assets/some-module/bootstrap/css/bootstrap.css')
                ->appendStylesheet('/assets/custom-module/file-1.css')
                ->appendStylesheet('/assets/custom-module/file-2.css') ?>

<?php echo $this->inlineScript()
                ->appendFile('/assets/some-module/bootstrap/js/bootstrap.js')
                ->appendFile('/assets/custom-module/file-1.js')
                ->appendFile('/assets/custom-module/file-2.js')
                ->appendFile('/assets/custom-module/file-3.js') ?>

启用 AssetPackages 模块后，您可以使用新的 assetPackage 视图辅助器包含整个库

<?php $this->assetPackage()->append('bootstrap')
                           ->append('custom-lib') ?>

给定正确的配置，上述代码将按照正确的顺序包含所选库的 CSS 和 JS 文件。与标准 ZF2 视图辅助器一样，您可以使用 append 和 prepend 方法影响包含的资产顺序。

<?php $this->assetPackage()->append('custom-lib')
                           ->prepend('jquery') ?>

使用配置，您可以决定脚本标签是否应包含在 head 部分，或者作为 body 内的行内脚本标签。内部 assetPackage 视图辅助器作为 headLink、headScript 和 inlineScript 辅助器的包装器，因此您也可以同时使用它们而不会出现问题。最后 - 在您的布局中 - 您应该以标准方式渲染标签

<?php echo $this->headLink() ?>
<?php echo $this->headScript() ?>
<?php echo $this->inlineScript() ?>

安装

如果您使用 composer，您可以通过将以下行添加到您的 composer.json 来安装它

"simplercode/asset-packages": "dev-master@dev"

配置

1. 在您的 application.config.php 中启用 AssetPackages 模块

2. 在任何配置文件中，您可以配置您的库，例如

   array(
       'asset_packages' => array(
           'packages' => array(
               'bootstrap' => array(
                   'styles' => '/assets/area42/vendor/bootstrap/css/bootstrap.min.css',
                   'scripts' =>'/assets/area42/vendor/bootstrap/js/bootstrap.min.js'
               ),
               'custom-lib' => array(
                   'styles' => array(
                       '/assets/custom-module/file-1.css',
                       '/assets/custom-module/file-2.css'
                   ),
                   'scripts' => array(
                       '/assets/custom-module/file-1.js',
                       '/assets/custom-module/file-2.js',
                       '/assets/custom-module/file-3.js'
                   ),
               ),
           ),
       ),
   );

3. 然后您可以使用 assetPackage 辅助器在您的模板或部分中包含整个库

   <?php $this->assetPackage()->append('custom-lib')

4. 在您的布局中，请记住使用原生视图辅助器实际渲染标签

   <?php echo $this->headLink() ?>
   <?php echo $this->inlineScript() ?>

5. 可选地，如果您不喜欢 assetPackage 视图辅助器的名称，您可以通过配置别名来更改它

   'view_helpers' => array(
       'aliases' => array(
           'asset' => 'assetPackage'
       ),
   ),

   然后您可以像这样使用它

   <?php $this->asset()->append('jquery')
                       ->append('select2')
                       ->append('custom-lib')

在 head 或 body 中包含脚本

还有一个 scripts_placement 标志，允许您决定脚本应添加的位置。此标志接受以下值：inline 或 head（默认为：inline）。

array(
    'asset_packages' => array(
        'scripts_placement' => "head" // set value for all packages
        'packages' => array(
            'custom-library' => array(
                'scripts_placement' => "inline" // set value for all scripts within "custom-library" package
                'scripts' => ...
            )
        )
    ),
)

您还可以使用以下语法将一些脚本分配给 head，一些分配给一个包内的行内

array(
    'asset_packages' => array(
        'packages' => array(
            'custom-library' => array(
                'scripts' => array(
                    'head' => array(
                        'head-1.js',
                        'head-2.js'
                    ),
                    'inline' => array(
                        'inline-1.js',
                        'inline-2.js'
                    )
                )
            )
        )
    ),
)

与 AssetManager 一起使用

此模块仅在视图层操作。其作用是将您的资产库名称映射到 一个 或 几个 不同的路径 - 然后使用原生 ZF2 视图辅助器包含这些路径。因此，它与 AssetManager 模块（在接收到 HTTP 请求后负责处理和缓存别名）一起使用时没有问题。

很容易根据您当前的环境加载不同的 asset_packages 映射配置，如这里所述的方法。这样，您可以根据您的配置加载不同版本的资产，而无需更改您的模板。

值得注意的是，原生视图辅助器会处理脚本和样式的重复导入，因此您不必担心重复导入相同的文件。

此外，AssetPackages 模块还应与 AssetAliases 模块很好地协同工作。