2012-09-16 28 views
7

我目前正在开发一个使用Symfony 2.1.0的Web应用程序。Symfony2:如何正确包含与Twig模板继承一起的资产?

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

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

  • 应用程序/资源/视图/
    • base.html.twig :基模板,包含标题,样式表主体块。
  • SRC /我/ PageBundle /资源/视图
    • layout.html.twig:布局模板(延伸的基本模板),附加的主要样式表到样式表块,并且覆盖块,包括navigation.html.twig并限定内容
    • 布局admin.html.twig:与上述同样的事情,但包括导航admin.html.twig
    • 的src /我的/ PageBundle /资源/视图/主
      • 标准模板,延长布局模板,并覆盖它内容
    • 的src /我的/ PageBundle /资源/视图/管理
      • 管理模板。与上述相同,但扩展了管理布局模板。
  • 的src /我的/ PageBundle /资源/公/ CSS
    • 的main.css:主样式

正如你所看到的,我有将样式表放入我的包中。我不知道这是否是好的做法。

现在,事情是,在布局。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,我可以将公开的名称隐藏起来?

回答

4

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

我听说这是不可能的,如果你有不同层次的样式表,也就是说,它不会与三级继承体系

你可以工作,但它会产生一个CSS文件为每个级别(就像资产(),实际上)。

实施例:

布局:

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

备选子模板可以完全地覆盖样式表BLO CK,从而只产生一个样式表(但它不太干):

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

所以它绝不可能有Assetic胶水全部各级样式表放在一起?因为使用第二种方法,如果我决定在顶层添加另一个样式表,我将不得不更改所有子模板,对吗? –

+0

对。你也可以在config.yml中定义'main'资源(参见文档)并引用这个资源,而不是直接引用main.css。通过这种方式,您可以更改主资源,而无需更改所有模板。 – arnaud576875

+0

谢谢。在旁注中,我的应用程序结构的其余部分对你来说看起来是不错的练习还是有我缺少的东西? –