smoya/asset-management-bundle

此包已被 弃用 并不再维护。未建议替代包。

Symfony2 扩展包，提供在 Twig 模板中轻松管理 assetic 包包含的方法。

维护者

详情

github.com/smoya/AssetManagementBundle

主页

源代码

问题

安装数: 107,637

依赖者: 1

建议者: 0

安全: 0

星标: 18

关注者: 2

分支: 3

公开问题: 1

类型:symfony-bundle

1.0.0 2014-02-05 14:38 UTC

Requires

Replaces

  • smoya/assetmanagementbundle: dev-master

MIT 82538d09119da015dcb1f976e8b344d6d4322b2e

  • Sergio Moya <smoya89.woop@gmail.com>

twigjavascriptcssassetmanageasseticbottom

This package is not auto-updated.

Last update: 2021-10-30 06:44:20 UTC

README

Symfony2 资产管理扩展包

##待办事项

  • 改进 README 文档
  • 更多功能
  • 测试
  • 等等

此扩展包提供了一种在 Twig 模板中管理 assetic 包包含的简单方法。当然，我们之前需要安装 Assetic 库。

此扩展包允许您将包含资产（javascript 和 css）的代码打印到所需的位置。例如，在 html 代码末尾加载已加载的 javascript jquery 库之后。

例如，这可行

模板 1（不继承基本模板）

{{ assets_add('assetic/foo.js', 'js') }}

基本模板

{{ assets_render('js') }}

得到的结果

<script src="/assetic/foo.js" />

安装

将此条目添加到 deps 文件中

[SmoyaAssetManagementBundle]
    git=https://github.com/smoya/AssetManagementBundle.git
    target=/bundles/Smoya/Bundle/AssetManagementBundle

将扩展包注册到您的应用程序 Kernel 中

// app/AppKernel.php
public function registerBundles()
{
    return array(
        //..
        new Smoya\AssetManagementBundle\SmoyaAssetManagementBundle(),
        //..
    );
}

在 2.1*

Smoya\Bundle\AssetManagementBundle\SmoyaAssetManagementBundle()

现在更新 vendors

$ ./bin/vendors

现在，我们需要将此条目添加到自动加载器

<?php
// app/autoload.php

$loader->registerNamespaces(array(
    // ...
    'Smoya'        => __DIR__.'/../vendor/bundles',
));

使用

首先，我们需要 设置需要包含的包。Sonata 团队在此 文章 中提供了一个示例。

想象以下情况

###我们有 3 个模板

  • ::base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
            {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}
                <link href="{{ asset_url }}" media="all" type="text/css" rel="stylesheet" />
            {% endstylesheets %}
    </head>
    <body>
        {% block content %}
            This page exists for test SmoyaAssetManagementBundle
        {% endblock %}
    
        {% block javascripts %}
            <script src="{{ asset('assetic/main.js') }}"></script>
        {% endblock %}
    
        {% block extra %}
    
        {% endblock %}
   </body>
</html>
  • index.html.twig
    {% extends '::base.html.twig' %}
    {% block content %}
            This page extends from '::base.html.twig' template and i can include code.
        
    {# We need to render a widget #}
    {% render AcmeTestBundle:Test:widget %}
        
    {% endblock %}

    {% block extra %}
        <script src="{{ asset('assetic/bar.js' }}" />
    {% endblock %}
  • widget.html.twig
    {% block widget %}
        I am a widget and I need render Javascript at the bottom of the website code       
    {% endblock %}
    
    {# This block extra is not the ::base.html.twig 'extra' block #}
    {# Because im not extending the ::base.html.twig template #}
    {% block extra %}
        <script src="{{ asset('assetic/another.js' }}" />
        <script>
            alert('Widget loaded');
        </script>
    {% endblock %}

###问题和解决方案：当使用 Twig 渲染，如果渲染的模板包含javascript，它将在调用位置打印出来。如果你在加载javascript之前进行渲染，特别是如果代码需要其他库（例如 jQuery），这会是一个问题。

为此，我们使用 Twig 的功能，添加此扩展包如下

  • ::base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
            {% stylesheets filter='cssrewrite' 'css/compiled/main.css' %}
                <link href="{{ asset_url }}" media="all" type="text/css" rel="stylesheet" />
            {% endstylesheets %}
    </head>
    <body>
        {% block content %}
            This page exists for test SmoyaAssetManagementBundle
        {% endblock %}
    
        {% block javascripts %}
            <script src="{{ asset('assetic/main.js') }}"></script>
        {% endblock %}
    
        {# render managed assets #}
        {{ render_assets() }} 
    
        {% block extra %}
    
        {% endblock %}
   </body>
</html>
  • index.html.twig
    {% extends '::base.html.twig' %}
    {% block content %}
        This page extends from '::base.html.twig' template and i can include code.
        
        {# We need to render a widget #}
        {% render AcmeTestBundle:Test:widget %}
        
    {% endblock %}
    
    {# This one can do because we inherited from the template base, which contains this block below including javascript #}
    {% block extra %}
        <script src="{{ asset('assetic/bar.js' }}" />
    {% endblock %}
  • widget.html.twig
    {% block widget %}
        I am a widget and I need render Javascript at the bottom of the website code       
    {% endblock %}
    
    {# add_assets adds the inclusion html code for the passed assets in the place where the render_assets() function is called #}
    {{ add_assets('assetic/bar.js', 'js') }}
    {{ add_assets('alert("Widget Loaded");', 'inline_js') }}

##添加资产的选项和参数

    {{ add_assets([$ASSETS], $FORMAT, {$ATTR}) }}

参数

  • 1: ASSETS 数组/标量 资产数组或单个资产。示例：['assetic/foo.js', 'assetic/bar.js']
  • 2: FORMAT 字符串 资产的格式（js、css、inline_js 或 inline_css）
  • 3: ATTR 数组 可选 关联数组，包含包含 HTML 标签的属性。示例：对于 CSS 资产：{'media': 'screen'}

打印资产

    {{ render_assets($FORMAT) }}

参数

  • 1: ASSETS 字符串 可选 打印资产的格式。