Ningún sitio web estaría completo sin incluir archivos de JavaScript y hojas de estilo CSS. La gestión de estos archivos en Symfony es muy elegante gracias a la herencia de plantillas.
Truco En esta sección se explica cómo enlazar archivos CSS y JavaScript. No obstante, Symfony2 también incluye otra librería muy potente llamada Assetic, que permite hacer cosas mucho más interesantes con esos archivos, como juntarlos todos en un único archivo y reducir su tamaño eliminando espacios en blanco y comentarios.
Comienza añadiendo dos bloques a la plantilla base: el primero se llama stylesheet y se encuentra dentro de la etiqueta <head> y el segundo se llama javascript y está justo por encima de la etiqueta de cierre </body>. El contenido inicial de estos bloques son los enlaces a las hojas de estilo y archivos JavaScript necesarios para que tu sitio funcione y se vea bien:
{# app/Resources/views/base.html.twig #}
<html>
<head>
{# ... #}
{% block stylesheets %}
<link href="{{ asset('/css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
{# ... #}
{% block javascripts %}
<script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
{% endblock %}
</body>
</html>El ejemplo anterior es muy sencillo, pero ¿qué sucede si una plantilla hija necesita añadir algún archivo CSS o JavaScript adicional? Imagina que dispones de una página de contacto y necesitas incluir una hoja de estilo llamada contact.css sólo en esa página. Para ello, utiliza el siguiente código:
{# src/Acme/DemoBundle/Resources/views/Contact/contact.html.twig #}
{% extends '::base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('/css/contact.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{# ... #}En la plantilla hija, sólo tienes que reemplazar el bloque stylesheets del padre para enlazar la nueva hoja de estilos. Obviamente, como lo que quieres hacer es añadir un nuevo CSS y no eliminar todos los que enlaza la plantilla padre, se utiliza la función parent() de Twig para incluir todo el contenido del bloque stylesheets de la plantilla base.
Las plantillas también pueden enlazar archivos que se encuentren en el directorio Resources/public de cualquier bundle. Para hacer que esos archivos estén disponibles en la aplicación, ejecuta el comando php app/console assets:install directorio [--symlink], que mueve (o enlaza simbólicamente) los archivos a la ubicación correcta. (el valor de directorio por defecto es web, que es el valor que casi siempre se utiliza en las aplicaciones Symfony2).
<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" type="text/css" rel="stylesheet" />El resultado final es una página que incluye tanto la hoja de estilos main.css como contact.css.