Symfony2:如何正确包含资产与 Twig 模板继承? [英] Symfony2: How to properly include assets in conjunction with Twig template inheritance?

问题描述

我目前正在使用 Symfony 2.1.0 开发一个 Web 应用程序.

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:

• 应用/资源/视图/
  • base.html.twig: 基本模板，包含 title、stylesheets 和 body 块.李>
  • app/Resources/views/
    • base.html.twig: base template, containing title, stylesheets and body blocks.
    • layout.html.twig: 布局模板(扩展基本模板)，将主样式表附加到 stylesheet 块，并覆盖 body 块，包括 navigation.html.twig 并定义一个 content 块
    • layout-admin.html.twig: 与上面相同，但包括 navigation-admin.html.twig
    • src/My/PageBundle/Resources/views/Main
      • 标准模板，扩展布局模板并覆盖其内容块
      • 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
        • 管理模板.与上述相同，但扩展了管理布局模板.
        • main.css: 主样式表

        如您所见，我已将样式表放入我的包中.我不知道这是否是好的做法.

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

        现在，我在 layout.html 中添加了这个:

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

        但 asset('css/main.css') 只是链接到 /css/main.css，而 ./app/console 资产:install 将资产安装在 web/bundles/mypagebundle/ 中.我不喜欢这样，我的包名称会公开可见(这可能会让用户怀疑我正在使用 Symfony，而且我喜欢保留我网页的内部结构，嗯，内部的).是否可以更改 assets:install 安装资产的目录?在 web/中手动安装资产对我来说似乎很乏味.

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

        我也在考虑使用 Assetic 进行资产管理，因为我个人喜欢自动缩小我的脚本/样式表并将它们全部存储在一个文件中的可能性.但是，我听说如果您在不同级别包含样式表，这是不可能的，即它不适用于三级继承系统.有可能解决这个问题吗?另外，使用 Assetic 可以让我对公众隐藏我的捆绑包名称吗?

        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?

        推荐答案

        使用assetic可以解决你所有的问题.

        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

        可以，但它会为每个级别生成一个 css 文件(实际上就像使用asset()).

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

        例子:

        布局:

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

        子模板:

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

        结果:

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

        这篇关于Symfony2:如何正确包含资产与 Twig 模板继承?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！