Symfony2: ¿Cómo incluir correctamente activos junto con la herencia de plantillas Twig?

I'm currently developing a web application using Symfony 2.1.0.

He leído a través del Templating chapter of the book and I'm trying to include assets (right now, it's just a single stylesheet) in my web pages.

Estoy usando el Three-level inheritance system that is mentioned in the book, and my application structure currently looks like this:

  • app/Resources/views/
    • base.html.ramita: base template, containing título, hojas de estilo y cuerpo Bloques
  • src/My/PageBundle/Resources/views
    • diseño.html.ramita: layout template (extending the base template), appending the main stylesheet to the Hoja de estilo block, and overwriting the cuerpo block, including navigation.html.twig y definiendo un contenido bloquear
    • layout-admin.html.twig: same thing as above, but including navigation-admin.html.twig
    • src/My/PageBundle/Resources/views/Main
      • standard templates, extending the layout template and overwriting its contenido bloquear
    • src/My/PageBundle/Resources/views/Administration
      • administration templates. Same thing as above, but extending the administration layout template.
  • src/My/PageBundle/Resources/public/css
    • principal.css: main stylesheet

As you can see, I have put the stylesheet in my bundle. I don't know whether this is good practice or not.

Now, the thing is, in layout.html I added this:

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" type="text/css" href="{{ asset('css/main.css)' }}" />
{% endblock %}

Pero asset('css/main.css') is just linking to /css/main.css, mientras que ./app/console assets:install installs the assets in web/bundles/mypagebundle/. I don't like the fact that this way, my bundle name would be publicly visible (which could make users suspect I'm using Symfony, and I like keeping the internals of my webpage, well, internal). Is it possible to change the directory where assets:install would install the assets? It seems tedious to me to manually install the assets in web/.

I'm also thinking about using Assetic for asset management, as I personally like the possibility to automatically minify my scripts/stylesheets and store them all together in one file. However, I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system. Is it possible to work around that? Also, would using Assetic enable me to hide my bundle name from the public?

preguntado el 16 de septiembre de 12 a las 18:09

1 Respuestas

Using assetic would address all your issues.

I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system

You can, but it will generate a css file for each level (just like with asset(), actually).

Ejemplo:

diseño:

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets 'main.css' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

sub-template:

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets 'sub.css' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

resultado:

<link rel="stylesheet" type="text/css" href="..." />
<link rel="stylesheet" type="text/css" href="..." />

Alternatively sub-template can completly override the stylesheets block, so that only one stylesheet is generated (but it's less dry):

{% block stylesheets %}
    {% stylesheets 'main.css' 'sub.css' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

result (in production / non debug):

<link rel="stylesheet" type="text/css" href="..." />

Respondido el 16 de Septiembre de 12 a las 20:09

So it is in no way possible to have Assetic glue all stylesheets at all levels together? Because with the second method, I would have to change ALL sub-templates if I decide to add another stylesheet at top level, right? - Iniquities of evil men

Right. You could also define the 'main' asset in config.yml (see docs) and reference this asset instead of referencing main.css directly. This way you can change the main asset without having to change all templates. - Arnaud LeBlanc

Thank you. On a side note, does the rest of my application structure look like good practice to you or is there something I'm missing? - Iniquities of evil men

looks like usual structure :) - Arnaud LeBlanc

Good to know, thanks. I wasn't quite sure on, for example, where I'd put the stylesheets as I can't yet distinguish between the application as a whole and my bundle. I'd upvote if I could (but I can't, sorry) - Iniquities of evil men

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.