Made in DeveloperHub
La mayoría de los proyectos deberían usar el Diseñador de páginas de inicio visual, que ya genera automáticamente tarjetas a partir de su contenido. Este ejemplo es para páginas de HTML personalizado: recrea a mano un diseño similar de tarjetas generadas automáticamente, usando el evento oncardschanged para que las tarjetas se actualicen cada vez que cambie el contenido de la documentación. La página consta de un «hero», que no explicaremos porque es HTML básico, y después la parte generada automáticamente.
En la parte generada automáticamente, mostramos una tarjeta por cada categoría de la sección de documentación del Centro de soporte. Cada tarjeta enumera 3 páginas y un botón Mostrar todo.
El HTML de la página de inicio es muy sencillo. Solo muestra un encabezado y después un div con el id landing-cards, en el que generaremos las tarjetas.
Para mostrar las tarjetas, podemos escuchar un evento llamado oncardschanged. Este evento se emite cuando el lector navega a la página de inicio. Los detalles del evento contienen la información necesaria para generar el diseño.
Comprueba si estamos en una página de inicio en lugar de una página personalizada. (También podrías implementar lo mismo en una página personalizada si fuera necesario)
event.detail.docs es un array de objetos que representan la estrategia de generación de tarjetas disponible. Cada objeto (la variable card aquí) tiene un title y un link. Esto representa una categoría de nuestra documentación. Crearemos una tarjeta para cada una de ellas y después un H4 que contendrá el enlace al título.
Cada objeto también tiene details, que de nuevo es un array de objetos con títulos y enlaces. Esto representa una página de nuestra documentación. Crearemos un enlace para cada objeto y lo colocaremos en la tarjeta.
El resto del código usa clases de bootstrap para crear dos columnas atractivas y añadir las tarjetas a ellas. Hay un botón «Mostrar todo» que usa el enlace principal de la tarjeta.
La última función window.applyClickHandlersOnLinks() indica al renderizador que convierta los enlaces que se acaban de añadir mediante javascript en enlaces de aplicación de una sola página. Sin esta llamada, al hacer clic en un enlace se recarga toda la página. Recuerda siempre llamarla después de añadir todos los enlaces.