En-tête des catégories mises en avant

[manuel (Manuel Kostka)]

	Résumé	Catégories de fonctionnalités sur certaines vues.
	Lien vers le dépôt	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	Nouveau sur les thèmes Discourse ?	Guide pour débutant sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Vue en cartes

Vue en liste

Paramètres

Vous pouvez basculer entre les deux mises en page ci-dessus ou choisir aucune et définir vos propres styles. Vous pouvez également sélectionner une route et définir une sortie pour le composant.

Modèle

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

Merci, Handy TC.

Je suppose qu’un interrupteur pour afficher uniquement sur la page d’accueil, afficher le logo du site et afficher la description du site sous le logo seraient des ajouts souhaitables.

[manuel (Manuel Kostka)]

@Zup

Un interrupteur pour l’afficher uniquement sur la page d’accueil

Actuellement, il s’affiche sur les listes globales (récent/nouveau/non lu/meilleur). J’envisageais d’ajouter un menu déroulant dans les paramètres pour sélectionner les pages globales sur lesquelles il doit apparaître. Donc, oui, c’est dans ma feuille de route, dès que j’aurai le temps d’y revenir !

Quel serait le cas d’utilisation pour afficher le logo ? Sur les pages globales, vous êtes presque « à la maison » de toute façon ?

Ce qui m’intéresserait le plus d’ajouter, c’est une vue mobile. Je n’ai pas encore eu d’idée à ce sujet, c’est pourquoi elle n’est tout simplement pas affichée sur mobile. Merci d’avoir partagé ! Si vous avez une idée à ce sujet, n’hésitez pas !

[Zup]

@manuel

Quel serait le cas d’utilisation pour avoir un logo ?

Une esthétique personnalisée, combinée à une brève description, offrirait un aperçu rapide de la communauté aux nouveaux visiteurs et servirait de rappel aux utilisateurs existants concernant la mission de la communauté. Il serait positionné au-dessus ou à gauche des liens.

Afficher cela par défaut sur les liens globaux, ainsi que de manière optionnelle par catégorie (et pages d’étiquettes ?), servirait de menu de navigation pratique pour les zones prioritaires — ce serait mon utilisation principale prévue. (D’ailleurs, la possibilité d’inclure des liens personnalisés, et pas seulement des catégories, serait une autre fonctionnalité souhaitable.)

Personnellement, je trouve que la plupart des sites Discourse ont tendance à être un peu vagues, surtout lors de la première visite, et par défaut, je pense que la navigation de Discourse peut être confuse pour l’utilisateur moyen. En général, mes sites sont conçus pour privilégier seulement quelques zones (parmi beaucoup), et ces ajouts proposés rendraient très clair pour l’utilisateur moyen quelles sont ces zones, tout en facilitant leur accès.

[valsha (KingPin)]

Bon composant,
Nous avons installé Bannière polyvalente. Comment pouvons-nous placer ce composant EN DESSOUS de la Bannière polyvalente ?
Ainsi, la Bannière polyvalente s’affichera en premier, suivie du vôtre.
Merci.

[manuel (Manuel Kostka)]

Oui, les deux composants sont rendus sur la même sortie. Je ne sais pas ce qui cause l’ordre des éléments dans ce cas ? Sur mon site, ils s’affichent par défaut sous la bannière..

Mais vous devriez pouvoir cibler l’ordre avec des déclarations CSS :

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important ;
}

[manuel (Manuel Kostka)]

@Zup

Par ailleurs, la possibilité d’inclure des liens personnalisés — et pas seulement des catégories — serait une autre fonctionnalité souhaitable.

Cela semble impliquer de nombreuses options personnalisées. Je ne voudrais pas ajouter autant de logique à ce composant.
Créer une navigation mise en avant me semble davantage correspondre à un cas d’usage pour une bannière HTML personnalisée ? Il suffirait d’ajouter quelques liens avec des images et des titres.

@Zup

Je constate que la plupart des sites Discourse ont tendance à être un peu vagues, surtout lors de la première visite, et par défaut, je pense que la navigation de Discourse peut être déroutante pour l’utilisateur moyen.

Je suis d’accord avec cela ! Je pense que des bannières dédiées aux visiteurs et aux nouveaux inscrits peuvent être utiles et accueillantes.

[JammyDodger]

Il y a une option « échanger le positionnement par défaut » dans les paramètres de la bannière polyvalente, si cela peut vous aider ?

échanger le positionnement par défaut

Si un autre composant lié à la bannière est actif, utilisez cette option pour échanger sa position avec celle de la bannière polyvalente.

[valsha (KingPin)]

Essayez ce paramètre, cela ne m’a pas aidé

[Rhod (Rodolfo)]

J’ai installé un composant de thème mais il ne s’intègre pas dans le contenu principal, ce qui le rend vraiment déplacé (laid), j’utilise le thème air.
Pouvez-vous m’aider s’il vous plaît où je peux faire apparaître le composant à l’intérieur du conteneur de couleur sombre ?

Cela ressemble à ceci :

Je voudrais que cela ressemble à ceci :

[AkaiBukai]

Bonjour,
Je débute avec Discourse et le theming…
Je voudrais avoir une sorte de cartes en haut, comme vous pouvez le voir ici : Secret World Legends - Funcom Forums
Ce composant de thème semble aider dans cette direction…
Je l’ai installé et j’ai pu sélectionner les catégories que je veux voir apparaître, mais je n’ai obtenu que les titres…
Ce qui est logique car je n’ai encore défini aucune image…

Ma question (qui est probablement une question stupide car personne d’autre ne l’a posée) est la suivante : comment puis-je définir l’image des catégories ?
Et comment puis-je les “télécharger” ?

Merci pour toute aide…

[Heliosurge (Dan DeMontmorency)]

Accédez aux paramètres de vos catégories que vous avez utilisés pour créer une catégorie et sélectionnez l’onglet image.

Télécharger une image

[Vasan_Cannane]

Salut, je suis nouveau sur Discourse et j’ai une question concernant l’en-tête des catégories mises en avant.

J’essaie d’obtenir ceci mais je n’y arrive pas.

Ils ont donné quelques lignes de code :

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [lien, logo, nom de chaque élément...]
      }
    }
  }
}

Comment puis-je spécifier le lien, le logo et le nom de l’élément ?

Quelqu’un peut-il clarifier cela ?

Merci.

[Arkshine]

Salut, bienvenue

Si vous souhaitez afficher une image comme celle de l’exemple, vous devez sélectionner les catégories pertinentes dans les paramètres du composant de thème et vous assurer que chacune d’elles a une image assignée (paramètres de catégorie → Images → Logo de catégorie).

[Vasan_Cannane]

Ceci est le paramètre du composant de thème « Catégories mises en avant » et je ne trouve rien

[Arkshine]

Vous devez modifier votre paramètre de catégorie :

Cliquez sur l’onglet Images :

…et téléchargez une Image de logo de catégorie !

[Vasan_Cannane]

J’ai une rangée de produits, comment puis-je diviser les produits en plusieurs colonnes ?

[Arkshine]

Quelque chose comme ça ?

Si oui, essayez ce CSS. Ajoutez-le à votre CSS de thème ou dans un composant.

À l’intérieur, vous pouvez voir des variables que vous pouvez contrôler.
Vous pouvez choisir le nombre de colonnes, l’écart entre les éléments et la largeur de chaque élément.
Les éléments s’empilent automatiquement.

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;
    
    display: grid !important;
    
    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

Merci pour votre aide.

Puis-je demander une aide supplémentaire ?

C’est ce que j’essaie de réaliser.

Pouvez-vous m’aider à ce sujet ?

[Arkshine]

Essayez quelque chose comme ceci :

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
    > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}