Blocs de la page d'accueil

Composant de thème
1
:information_source: Résumé Créez une page d’accueil personnalisée avec des composants de bloc configurables
:hammer_and_wrench: Dépôt Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau aux thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

← Remplissez "repoName" et "repoURL" pour le bouton d’installation automatique →

Installer ce composant de thème

← Décrivez ce thème/composant en une ou deux phrases →
Ce composant combine les fonctionnalités de Right Sidebar Blocks et de la route de page d’accueil personnalisée. Il initialise la route et vous permet d’organiser des blocs de contenu sur la page d’accueil, offrant une flexibilité dans la disposition et la présentation du contenu.

Ci-dessous, deux exemples de vues : le premier montre une page d’accueil avec des blocs de base empilés les uns sur les autres, tandis que le second présente la même disposition avec des styles personnalisés appliqués :

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

Modification des blocs

Vous pouvez personnaliser les blocs via les paramètres du composant. Chaque bloc est ajouté en spécifiant son nom de composant Ember :

Une capture d'écran d'une interface avec plusieurs menus déroulants et des champs de saisie de nom intitulés block-banner, block-top-tags et block-upcoming-events, entre autres. (Légendé par l'IA)
Une capture d'écran d'une interface avec plusieurs menus déroulants et des champs de saisie de nom intitulés block-banner, block-top-tags et block-upcoming-events, entre autres. (Légendé par l'IA)726×1152 46.5 KB

Après avoir ajouté un bloc, vous pouvez ajuster ses propriétés en utilisant les paramètres disponibles :

L'image montre une interface utilisateur avec des champs de texte pour une bannière de bloc, y compris des options de titre, de sous-titre et de classe. (Légendé par l'IA)
L'image montre une interface utilisateur avec des champs de texte pour une bannière de bloc, y compris des options de titre, de sous-titre et de classe. (Légendé par l'IA)726×753 28.9 KB

Blocs disponibles

Vous pouvez ajouter n’importe quel composant Ember en utilisant son nom de composant. De plus, j’ai une collection de blocs disponibles sur Blocks · GitLab. Il s’agit principalement de variations de Right Sidebar Blocks.

Pour des informations détaillées sur chaque bloc, comme le nom du composant, les paramètres disponibles et la disposition du modèle, consultez leur fichier README.

Une page de documentation pour le composant de bloc Featured List, détaillant les paramètres et le code du modèle pour créer une liste de fonctionnalités avec plusieurs filtres. (Légendé par l'IA)
Une page de documentation pour le composant de bloc Featured List, détaillant les paramètres et le code du modèle pour créer une liste de fonctionnalités avec plusieurs filtres. (Légendé par l'IA)964×1114 57.8 KB

23 « J'aime »
2

C’est vraiment super, Manuel, bon travail ! :+1:

4 « J'aime »
3

@nolo est-ce que cela pourrait également être utilisé pour créer des pages personnalisées et les ajouter à la navigation latérale ?

4

Voici une solution de mise en page pour la route de la page d’accueil personnalisée. Bien sûr, vous pouvez utiliser quelque chose de similaire sur d’autres routes personnalisées. Mais l’ajout et l’intégration de ces routes dans votre application sont une tâche différente.

1 « J'aime »
7

Erreur : Tentative de résolution d’un composant dynamique avec une définition de chaîne, block-banner dans un modèle en mode strict. En mode strict, l’utilisation de chaînes pour résoudre les définitions de composants est interdite. Vous pouvez plutôt importer la définition du composant et l’utiliser directement.
Je rencontre cette erreur.

1 « J'aime »
8

Merci de votre signalement @xin_wei. Bien que je ne puisse pas le reproduire, sur la version Discourse 3.6.0.beta1-dev et en utilisant mon composant de bloc de Manuel Kostka / Discourse / Blocks / Banner · GitLab.