Symfony2:如何与Twig模板继承一起正确包含资产?

时间:2012-09-16 17:48:05

标签: php symfony twig assets symfony-2.1

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

我已经阅读了本书的Templating chapter,并试图在我的网页中包含资源(现在,它只是一个样式表)。

我正在使用书中提到的Three-level inheritance system,我的应用程序结构目前看起来像这样:

  • 应用/资源/视图/
    • base.html.twig:基本模板,包含标题样式表正文块。
  • 的src /我/ PageBundle /资源/视图
    • layout.html.twig:布局模板(扩展基本模板),将主样式表附加到样式表块,并覆盖正文 block,包括 navigation.html.twig 并定义内容
    • layout-admin.html.twig:与上述相同,但包括 navigation-admin.html.twig
    • 的src /我/ PageBundle /资源/视图/主
      • 标准模板,扩展布局模板并覆盖其内容
    • 的src /我的/ PageBundle /资源/视图/管理
      • 管理模板。与上面相同,但扩展了管理布局模板。
  • 的src /我的/ PageBundle /资源/公/ 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会让我隐藏我的包名称吗?

1 个答案:

答案 0 :(得分:4)

使用assetic可以解决您的所有问题。

  

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

你可以,但它会为每个级别生成一个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="..." />