locaine / lcn-include-assets-bundle
在 Symfony 2 中包含 JS 和 CSS 文件,就像在 Symfony 1 中做的那样(使用 use_javascript/use_stylesheet)
1.2.0
2016-08-17 15:20 UTC
This package is not auto-updated.
Last update: 2024-09-14 15:37:30 UTC
README
步骤 1: 下载 Bundle
打开命令行,进入您的项目目录,然后执行以下命令以下载此 Bundle 的最新稳定版本
$ composer require locaine/lcn-include-assets-bundle "~1.1"
此命令要求您全局安装 Composer,如 Composer 文档中的安装章节所述。
步骤 2: 启用 Bundle
然后,通过在您的项目 app/AppKernel.php
文件中添加以下行来启用该 Bundle
<?php // app/AppKernel.php // ... class AppKernel extends Kernel { public function registerBundles() { $bundles = array( // ... new Lcn\IncludeAssetsBundle\LcnIncludeAssetsBundle(), ); // ... } // ... }
步骤 2: 安装资产
app/console assets:install
用法
layout.html.twig
为了能够从任何 Twig 模板文件中添加 CSS 和 JS 文件,您必须在 layout.html.twig 文件中包含资产
<html>
<head>
###lcn_include_stylesheets###
...
</head>
###lcn_include_javascripts###
</body>
这将包含所有位置(首位、中间和最后)的资产。如果您需要在布局中的不同位置包含它们,您可以单独包含它们
###lcn_include_stylesheets:first###
###lcn_include_stylesheets:middle###
###lcn_include_stylesheets:last###
###lcn_include_javascripts:first###
###lcn_include_javascripts:middle###
###lcn_include_javascripts:last###
PHP
示例控制器代码
//add stylesheet $this->container->get('lcn.include_assets')->useStylesheet('/test_php.css'); //add stylesheet with optional position (default = middle) $this->container->get('lcn.include_assets')->useStylesheet('/test_php_last.css', 'last'); $this->container->get('lcn.include_assets')->useStylesheet('/test_php_first.css', 'first'); $this->container->get('lcn.include_assets')->useStylesheet('/test_php_middle.css', 'middle'); //add stylesheet async $this->container->get('lcn.include_assets')->useStylesheet('/test_php_last_async.css', 'last', true); //add javascript $this->container->get('lcn.include_assets')->useJavascript('/test_php.js'); //add javascript with optional position (default = middle) $this->container->get('lcn.include_assets')->useJavascript('/test_php_last.js', 'last'); $this->container->get('lcn.include_assets')->useJavascript('/test_php_first.js', 'first'); $this->container->get('lcn.include_assets')->useJavascript('/test_php_middle.js', 'middle'); //add javascript async $this->container->get('lcn.include_assets')->useJavascript('/test_php_last_async.js', 'last', true);
Twig
示例 Twig 模板代码
{# add stylesheet #}
{{ lcn_use_stylesheet('/test_twig.css') }}
{# add stylesheet with asset helper #}
{{ lcn_use_stylesheet(asset('test_twig_asset.css')) }}
{# add stylesheet with optional position (default = middle) #}
{{ lcn_use_stylesheet('/test_twig_first.css', 'first') }}
{{ lcn_use_stylesheet('/test_twig_middle.css', 'middle') }}
{{ lcn_use_stylesheet('/test_twig_last.css', 'last') }}
{# add stylesheet async #}
{{ lcn_use_stylesheet('/test_twig_last_async.css', 'last', true) }}
{# include stylesheets for all positions #}
###lcn_include_stylesheets###
{# include stylesheets for single position #}
###lcn_include_stylesheets:first###
{# add javascript #}
{{ lcn_use_javascript('/test_twig.js') }}
{# add javascript with asset helper #}
{{ lcn_use_javascript(asset('test_twig_asset.js')) }}
{# add javascript with optional position (default = middle) #}
{{ lcn_use_javascript('/test_twig_first.js', 'first') }}
{{ lcn_use_javascript('/test_twig_middle.js', 'middle') }}
{{ lcn_use_javascript('/test_twig_last.js', 'last') }}
{{ lcn_use_inline_javascript("console.log('lcn_use_inline_javascript - last');", 'last') }}
{# include javascripts for all positions #}
###lcn_include_javascripts###
{# include javascripts for single position #}
###lcn_include_javascripts:first###
在公共 Bundle 中的用法
如果您正在开发一个共享 Bundle 并希望使其易于使用,您可以通过以下方式轻松测试 LcnIncludeAssetsBundle 是否已安装。
PHP
if ($container->has('lcn.include_assets')) { $this->container->get('lcn.include_assets')->useJavascript('/myFile.js'); }
Twig
{% if lcn_include_assets_available is defined and lcn_include_assets_available %} {{ lcn_use_javascript('/myFile.js') }} {% endif %}