Symfony2: How to properly include assets in conjunction with Twig template inheritance?

狂风中的少年 提交于 2020-01-12 07:49:06

问题


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

I've read through the Templating chapter of the book and I'm trying to include assets (right now, it's just a single stylesheet) in my web pages.

I'm using the Three-level inheritance system that is mentioned in the book, and my application structure currently looks like this:

  • app/Resources/views/
    • base.html.twig: base template, containing title, stylesheets and body blocks.
  • src/My/PageBundle/Resources/views
    • layout.html.twig: layout template (extending the base template), appending the main stylesheet to the stylesheet block, and overwriting the body block, including navigation.html.twig and defining a content block
    • 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 content block
    • src/My/PageBundle/Resources/views/Administration
      • administration templates. Same thing as above, but extending the administration layout template.
  • src/My/PageBundle/Resources/public/css
    • main.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 %}

But asset('css/main.css') is just linking to /css/main.css, whereas ./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?


回答1:


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).

Example:

layout:

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

result:

<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="..." />


来源:https://stackoverflow.com/questions/12449218/symfony2-how-to-properly-include-assets-in-conjunction-with-twig-template-inher

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!