Bloques de la página principal

Componente temático
1
:information_source: Resumen Crea una página de inicio personalizada con componentes de bloque configurables
:hammer_and_wrench: Repositorio Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Este componente combina características de Right Sidebar Blocks y la ruta de página de inicio personalizada. Inicializa la ruta y te permite organizar bloques de contenido en la página de inicio, ofreciendo flexibilidad en el diseño y la presentación del contenido.

A continuación, se muestran dos vistas de ejemplo: la primera muestra una página de inicio con bloques básicos apilados uno encima del otro, mientras que la segunda demuestra el mismo diseño con estilos personalizados aplicados:

Screenshot 2025-01-14 at 10-40-23 Homepage Blocks
Screenshot 2025-01-14 at 10-40-23 Homepage Blocks1486×1654 215 KB

Screenshot 2025-01-14 at 10-41-01 Homepage Blocks
Screenshot 2025-01-14 at 10-41-01 Homepage Blocks1486×2797 321 KB

Edición de bloques

Puedes personalizar los bloques a través de la configuración del componente. Cada bloque se añade especificando el nombre de su componente Ember:

Una captura de pantalla de una interfaz con varios menús desplegables y campos de entrada de nombres etiquetados como "block-banner", "block-top-tags" y "block-upcoming-events", entre otros. (Subtitulado por IA)
Una captura de pantalla de una interfaz con varios menús desplegables y campos de entrada de nombres etiquetados como "block-banner", "block-top-tags" y "block-upcoming-events", entre otros. (Subtitulado por IA)726×1152 46.5 KB

Después de añadir un bloque, puedes ajustar sus propiedades utilizando los parámetros disponibles:

La imagen muestra una interfaz de usuario con campos de texto para un "banner de bloque", incluyendo opciones de título, subtítulo y clase. (Subtitulado por IA)
La imagen muestra una interfaz de usuario con campos de texto para un "banner de bloque", incluyendo opciones de título, subtítulo y clase. (Subtitulado por IA)726×753 28.9 KB

Bloques disponibles

Puedes añadir cualquier componente Ember usando su nombre de componente. Además, tengo una colección de bloques disponibles en Blocks · GitLab. Estas son principalmente variaciones de Right Sidebar Blocks.

Para obtener información detallada sobre cada bloque, como el nombre del componente, los parámetros disponibles y el diseño de la plantilla, consulta su archivo README.

Una página de documentación para el componente de bloque "Featured List", que detalla los parámetros y el código de plantilla para crear una lista destacada con varios filtros. (Subtitulado por IA)
Una página de documentación para el componente de bloque "Featured List", que detalla los parámetros y el código de plantilla para crear una lista destacada con varios filtros. (Subtitulado por IA)964×1114 57.8 KB

23 Me gusta
2

¡Esto es genial, Manuel, buen trabajo! :+1:

4 Me gusta
3

@nolo ¿esto también podría usarse para crear páginas personalizadas y agregarlas a la navegación de la barra lateral?

4

Esta es una solución de diseño para la ruta de página de inicio personalizada. Por supuesto, puede usar algo similar en otras rutas personalizadas. Pero agregar e integrar estas rutas en su aplicación es una tarea diferente.

1 me gusta
7

Error: Se intentó resolver un componente dinámico con una definición de cadena, block-banner en una plantilla de modo estricto. En modo estricto, está prohibido usar cadenas para resolver definiciones de componentes. En su lugar, puede importar la definición del componente y usarla directamente.
我会出现这样的报错耶

1 me gusta
8

Gracias por informar @xin_wei. Aunque no puedo reproducirlo, en la versión de Discourse 3.6.0.beta1-dev y usando mi componente de bloque de Manuel Kostka / Discourse / Blocks / Banner · GitLab.