Construir una página principal que muestre una imagen destacada junto al listado de artículos paginados es uno de los pasos más comunes al desarrollar un blog en Laravel. Aquí aprendes a configurar las rutas, ajustar el controlador y diseñar la vista home con clases de Tailwind para presentar tus publicaciones de forma ordenada y atractiva.

Cómo configurar las rutas y el controlador para la página home

El primer paso es decidir qué rutas vas a conservar y cuáles vas a descartar. En este caso trabajas con la ruta raíz y con la ruta de publicación individual, dejando fuera la vista genérica de blog.

En el PageController mueves la búsqueda de registros al método correspondiente al home y eliminas los métodos que ya no necesitas. La consulta que antes vivía en otro lugar ahora se ejecuta directamente cuando alguien entra a la raíz del sitio, y los resultados se pasan a la vista usando compact o un arreglo asociativo.

¿Qué hace el controlador en una página home de Laravel? Recibe la petición, consulta los registros desde el modelo y los envía a la vista. Es el puente entre la base de datos y lo que el usuario ve.

Por qué importa centralizar la consulta en el controlador del home

Cuando concentras la lógica en el controlador correcto evitas duplicar código y mantienes la vista limpia. La vista solo se encarga de imprimir lo que recibe, mientras que el controlador decide qué datos llegan y en qué formato.

Cómo estructurar la vista home con Blade y Tailwind

La vista home se divide en dos bloques claros: un div superior reservado para la información destacada y otro inferior donde se imprime el listado de artículos.

Para el encabezado se usa un h1 con el texto contenido técnico y clases como text-2xl, mb-8 y un gris 900. El relleno lateral de nivel cuatro asegura respiración a los lados sin perder protagonismo del contenido.

Dentro del bloque de artículos abres un foreach de Blade que itera sobre la colección recibida. Cada iteración imprime un enlace con estas clases:

• Color de fondo gris nivel 100.
• Bordes redondeados lg.
• Relleno lateral nivel seis y vertical nivel cuatro.
• Cuadrícula de una columna con brecha nivel cuatro.
• Margen inferior nivel cuatro para separar de la paginación.

El margen inferior no es un detalle estético cualquiera: deja espacio para que la paginación respire al final del listado.

Cómo dar formato al título y la fecha de cada artículo

Dentro del enlace colocas un párrafo con dos span y debajo un h2 con el título del artículo. El primer span muestra la palabra tutorial como etiqueta y el segundo imprime la fecha de creación con formato amigable.

La fecha se formatea con la sintaxis de Blade pasando 'd/m/Y' al método de formato, lo que convierte un timestamp en algo legible como 14/03/2024.

Las clases del párrafo lo convierten en un contenedor flexible, alineado al centro, con texto pequeño y brecha nivel dos entre los elementos. La etiqueta tutorial recibe:

• Texto en mayúscula.
• Color gris 700 con fondo gris 200.
• Redondeado full para lograr forma de píldora.
• Relleno lateral nivel dos y vertical nivel uno.

¿Cómo se imprime la paginación en una vista Blade? Llamas al método links() sobre la colección paginada y Laravel genera los botones automáticamente. Solo necesitas que la variable esté en plural y haya sido paginada en el controlador.

Qué errores comunes aparecen al iterar y paginar artículos

Dos detalles suelen romper la primera ejecución. El primero es dejar el foreach incompleto sin declarar las variables de iteración. El segundo es usar la variable en singular cuando la paginación espera el nombre en plural.

Corregir ambos puntos basta para que el listado se renderice junto a la paginación al final de la página. Después solo queda ajustar el h2 con un gris 900 y un margen superior nivel dos para que el título quede bien posicionado dentro de cada tarjeta.

¿Por qué la variable de paginación debe ir en plural? Porque representa una colección de elementos. Si la nombras en singular, Laravel no encuentra los datos al renderizar los enlaces y lanza un error.

Cómo verificar que el resultado funciona en el navegador

Con el compilador de CSS encendido cualquier cambio en las clases se refleja al actualizar. Cargas la raíz del sitio, confirmas que el h1 aparece arriba, que las tarjetas se listan con su etiqueta tutorial y fecha, y que la paginación cierra el bloque inferior.

Si algo se ve desalineado, revisas las clases una a una empezando por el contenedor padre. Practica replicando este flujo en tu propio proyecto y comparte en los comentarios cómo adaptaste el diseño a tu blog.