Symfony2：如何正确包含资产与 Twig 模板继承？

Question

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

我已经通读了本书的Templating chapter，我正在尝试在我的网页中包含资产（目前，它只是一个样式表）。

我使用的是书中提到的Three-level inheritance system，我的应用结构目前是这样的：

• 应用/资源/视图/
  • base.html.twig： 基本模板，包含 title、stylesheets 和 body 块。
• src/My/PageBundle/Resources/views
  • layout.html.twig: 布局模板（扩展基本模板），将主样式表附加到 stylesheet 块，并覆盖 body 块，包括 navigation.html.twig 和定义一个 content 块
  • layout-admin.html.twig: 与上面相同，但包括 navigation-admin.html.twig
  • src/My/PageBundle/Resources/views/Main
    • 标准模板，扩展布局模板并覆盖其内容块
  • src/My/PageBundle/Resources/views/Administration
    • 管理模板。与上述相同，但扩展了管理布局模板。
• src/My/PageBundle/Resources/public/css
  • main.css: 主样式表

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

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

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

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

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

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

Answer 1

使用资产将解决您的所有问题。

我听说如果您在不同级别包含样式表，这是不可能的，即它不适用于三级继承系统

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

例子：

布局：

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

另外，子模板可以完全覆盖样式表块，因此只生成一个样式表（但它不那么枯燥）：

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

结果（生产/非调试）：

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