Configurar una plantilla base con un menú de navegación, columnas responsivas y vistas parciales es fundamental para estructurar cualquier proyecto en Symfony. A continuación se explican los pasos clave para lograrlo utilizando Twig como motor de plantillas y Bootstrap como framework CSS.
¿Cómo se configura el controlador y la vista principal?
El punto de partida es el controlador. En este caso, se trabaja con el controlador Home, donde se renombra el método principal para que retorne una vista llamada Home [0:18]. No se pasa información adicional al método; simplemente se indica qué plantilla debe renderizar.
Del lado de las plantillas, dentro de la carpeta Page, se crea el archivo home.html.twig. Su contenido inicial es sencillo: un título y un H1 con un texto de ejemplo como "Hello Home" [0:40]. Esto permite verificar rápidamente que la conexión entre controlador y vista funciona correctamente.
¿Cómo se estructura la plantilla base con Bootstrap?
La plantilla base.html.twig es el esqueleto de todo el sistema. Dentro de su sección body se construye la estructura principal con tres elementos fundamentales [1:00]:
- Un div contenedor con la clase
container.
- Un div fila con la clase
row.
- Dos columnas definidas con las clases
col-md-9 y col-md-3.
El sistema de rejilla de Bootstrap trabaja con doce columnas por fila. Aquí se distribuyen nueve columnas para el contenido principal y tres para una barra lateral (aside), sumando el total de doce [1:38].
Dentro de la columna principal se coloca el bloque body de Twig, que es donde cada vista inyectará su contenido. En la columna secundaria se incluye una vista parcial para mostrar información complementaria.
¿Qué son las vistas parciales en Twig?
Twig permite incluir fragmentos de plantilla reutilizables mediante la función include. En la plantilla base se utilizan dos inclusiones [1:08]:
_menu.html.twig: contiene el menú de navegación._aside.html.twig: contiene la información lateral.
Estos archivos se crean dentro de la carpeta de plantillas haciendo clic derecho y seleccionando Nuevo [1:58]. El prefijo con guion bajo es una convención para identificar vistas parciales que no se renderizan de forma independiente.
¿Cómo se construye el menú de navegación?
El menú se construye dentro de un elemento <header> con varias clases de Bootstrap [2:10]:
navbar y navbar-dark: definen la barra de navegación con tema oscuro.bg-dark: establece el color de fondo.mb-5: aplica un margen inferior de nivel cinco.
Dentro del contenedor se coloca un <span> con la clase navbar-brand y mb-0 h1, que funciona como la marca o título del sitio, en este caso "Symfony/Doctrine" [2:30].
Para los enlaces de navegación se utiliza una lista <ul> con la clase navbar-nav. Cada elemento <li> lleva la clase nav-item, y el enlace <a> dentro usa nav-link junto con text-white para el color del texto [2:50].
El atributo href utiliza el helper path de Twig, una función que genera URLs a partir del nombre de las rutas definidas en el controlador. En este ejemplo se apunta a la ruta app_home [2:55].
¿Cómo se diseña el contenido del aside?
Para la barra lateral se aplica un diseño compacto con las clases p-3 (relleno nivel tres), bg-dark, text-white y rounded (esquinas redondeadas) [3:32].
El contenido se organiza en varios párrafos con texto de ejemplo. Se utilizan etiquetas <strong> para resaltar palabras clave en negrita y mejorar la jerarquía visual [4:18]. Al final se agrega un botón con las clases btn, btn-warning y btn-lg, que crea un botón grande de color amarillo con el texto "Comentarios" [4:32].
Un detalle importante durante el desarrollo fue corregir divs sin cerrar en la plantilla base, lo cual impedía que las columnas se mostraran lado a lado [5:00]. Tras corregir las etiquetas, el diseño muestra correctamente el contenido principal junto a la barra lateral.
Con esta estructura definida, el proyecto cuenta con una base sólida para seguir añadiendo funcionalidades. Si tienes dudas sobre la organización de plantillas o el uso de Bootstrap en Symfony, comparte tu experiencia en los comentarios.
