2012-09-16 8 views
7

Actualmente estoy desarrollando una aplicación web usando Symfony 2.1.0.Symfony2: ¿Cómo incluir adecuadamente los activos junto con la herencia de la plantilla Twig?

He leído el Templating chapter del libro y estoy tratando de incluir elementos (en este momento, es solo una hoja de estilo) en mis páginas web.

estoy usando el Three-level inheritance system que se menciona en el libro, y mi estructura de la aplicación actualmente tiene este aspecto:

  • app/Resources/views/
    • base.html.twig : plantilla base, que contiene título, hojas de estilo y cuerpo bloques.
  • src/Mi/PageBundle/Recursos/vistas
    • base.html.twig: plantilla de diseño (que se extiende la plantilla de base), añadiendo la hoja de estilo principal a la hoja de estilo bloque, y sobrescribiendo el cuerpo bloque, incluyendo navigation.html.twig y que define un contenido bloque
    • -diseño admin.html.twig: lo mismo que el anterior, pero incluyendo navegación admin.html.twig
    • src/Mi/PageBundle/Resources/views/Main
      • plantillas estándar, que se extiende la plantilla de diseño y sobrescribir su contenido bloque
    • src/Mi/PageBundle/Resources/views/Administración
      • plantillas de administración. Lo mismo que arriba, pero ampliando la plantilla de diseño de administración.
  • src/Mi/PageBundle/Resources/public/css
    • main.css: de estilo principal

Como se puede ver, no tengo poner la hoja de estilo en mi paquete. No sé si esto es una buena práctica o no.

Ahora, la cosa es, en el diseño.html he añadido esto:

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

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

Pero asset('css/main.css') se acaba de ligarse a /css/main.css, mientras que los activos ./app/console assets:install instala en web/bundles/mypagebundle/. No me gusta el hecho de que de esta manera, el nombre de mi paquete sería públicamente visible (lo que podría hacer que los usuarios sospechen que estoy usando Symfony, y me gusta mantener las partes internas de mi página web, bueno, interna). ¿Es posible cambiar el directorio donde assets:install instalaría los activos? Me parece tedioso instalar manualmente los activos en web /.

También estoy pensando en utilizar Assetic para la gestión de activos, ya que personalmente me gusta la posibilidad de minimizar automáticamente mis scripts/hojas de estilo y almacenarlos todos juntos en un solo archivo. Sin embargo, he oído que esto no es posible si incluye hojas de estilo en diferentes niveles, es decir, no funcionaría con el sistema de herencia de tres niveles. ¿Es posible evitar eso? Además, ¿usar Assetic me permitiría ocultar el nombre de mi paquete del público?

Respuesta

4

Usar assetic resolvería todos sus problemas.

me entero de que esto no es posible si se incluyen las hojas de estilo en diferentes niveles, es decir, que no funcionaría con el sistema de herencia de tres niveles

Puede, pero generará un archivo css para cada nivel (al igual que con asset(), en realidad).

Ejemplo:

diseño:

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

sub-plantilla:

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

resultado:

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

Alternativamente sub-plantilla completamente puede anular las hojas de estilo BLO ck, de manera que sólo se genera una hoja de estilo (pero es menos seco):

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

resultado (en la producción no de depuración /):

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

Por lo tanto, no es en absoluto posible tener pegamento Assetic todo hojas de estilo en todos los niveles juntas? Porque con el segundo método, tendría que cambiar TODAS las sub-plantillas si decido agregar otra hoja de estilo en el nivel superior, ¿verdad? –

+0

Derecha. También puede definir el activo 'principal' en config.yml (ver documentos) y hacer referencia a este activo en lugar de hacer referencia a main.css directamente. De esta forma puede cambiar el activo principal sin tener que cambiar todas las plantillas. – arnaud576875

+0

Gracias. En una nota lateral, ¿el resto de la estructura de mi aplicación te parece una buena práctica o hay algo que me falta? –

Cuestiones relacionadas