locaine/lcn-include-assets-bundle

在 Symfony 2 中包含 JS 和 CSS 文件,就像在 Symfony 1 中做的那样(使用 use_javascript/use_stylesheet)

安装数量: 2,494

依赖项: 1

建议者: 0

安全性: 0

星星: 1

关注者: 3

分支: 0

开放问题: 0

类型:symfony-bundle

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 %}