Non, pas directement. Vous pouvez choisir des catégories, mais uniquement pour restreindre la sélection de sujets. Je ne voudrais pas ajouter plus de logique pour activer cette option.
Une solution de contournement pourrait être d’étiqueter automatiquement tous les nouveaux sujets, en utilisant un joker :
Ou utilisez un composant différent. Si vous pouvez expliquer un peu plus le look que vous souhaitez obtenir, je pourrai peut-être vous en recommander un.
Merci pour votre réponse.
L’ajout d’une balise spécifique pour le composant entraînera un surpoids à long terme si je décide un jour de supprimer ce composant.
Par conséquent, la meilleure logique pour le composant serait de sélectionner automatiquement les derniers articles s’ aucune balise n’est spécifiée.
Si je supprime un jour le composant, je devrai rechercher tous les fils utilisant la balise « featured » et les désélectionner tous.
Vous pouvez supprimer des tags des sujets très rapidement en filtrant par tag et en utilisant les options d’action groupée :
Je pense qu’il ne prend que ceux qui sont visibles à l’écran, alors je fais souvent défiler vers le bas pour tous les charger avant d’appliquer l’action groupée. 
Eh bien, vous pouvez également supprimer cette balise et elle disparaîtra 
Remarque générale : Le composant est un fork du Composant de vignettes mises en avant officiel. L’idée et la motivation pour moi étaient d’avoir un aspect de cartes avec la fonctionnalité offerte par ce composant. Je ne pense pas ajouter de fonctionnalités supplémentaires par rapport au composant original. La raison est qu’en ce qui concerne la maintenance du code, je veux pouvoir simplement suivre les correctifs de compatibilité du composant officiel.
Au cas où cela intéresserait quelqu’un : Nous avons modifié le composant de cartes mises en avant pour permettre aux utilisateurs de faire défiler horizontalement tous les sujets mis en avant (source des sujets utilisée : les plus récents).
Voici le CSS utilisé :
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Masquer la barre de défilement pour MS Edge */
scrollbar-width: none; /* Masquer la barre de défilement pour Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Masquer la barre de défilement sur les navigateurs basés sur Webkit (Chrome, Safari, etc.) */
-webkit-overflow-scrolling: touch; /* Sur les écrans tactiles, le contenu continue de défiler pendant un certain temps après la fin du geste de défilement */
}
Demande de fonctionnalité.
Pouvons-nous avoir une option pour afficher cela sur une page de catégorie spécifique ?
c’est-à-dire si vous consultez le salon, les cartes en vedette sont affichées ici
l’image affichée est l’image de la catégorie. J’utilise le thème Air. Application pour afficher les sujets en vedette liés à cette catégorie à partir de sa sous-catégorie Frontier news.
quelle est la taille d’image recommandée pour l’image de la carte ?
Super, mais il ne prend pas en charge le thème FKB
Comment puis-je définir le nombre maximum de caractères pour le titre ? J’affiche un extrait sur la carte et il dépasse la boîte avec le titre et le texte de l’extrait.
Il n’y a pas de réglage pour contrôler le nombre maximum de caractères dans le titre. Cependant, vous pouvez augmenter le réglage hauteur des cartes pour adapter le contenu.
Si vous ne souhaitez pas ajuster à chaque fois, vous pouvez essayer ce CSS dans votre thème ou un composant.
Il supprime la limite de hauteur des cartes, et vous avez les options suivantes :
.featured-cards-container {
$stretch_card: "true";
$max-image-height: 10em;
$max-title-lines: 3;
$max-excerpt-lines: 4;
height: inherit;
max-height: inherit;
.featured-card {
@if $stretch_card == "true" {
height: inherit;
}
a.card-content .card-details {
.topic-title {
-webkit-line-clamp: $max-title-lines;
}
.topic-excerpt {
-webkit-line-clamp: $max-excerpt-lines;
}
}
a.card-content .card-image {
height: #{$max-image-height};
min-height: #{$max-image-height};
}
}
}
J’espère que cela vous aidera !
Merci, j’avais en fait défini votre hauteur de 350 avant de publier, mais je viens d’essayer votre code et il semble ajuster la taille de la carte de manière appropriée pour les titres avec des extraits.
Je déterre celui-ci, c’est du génie ! Y a-t-il un moyen de l’activer aussi pour la vue sur smartphone ?
Pour une raison quelconque, le défilement horizontal ne fonctionne plus. Quelqu’un a-t-il réussi à le faire fonctionner sur ordinateur et sur mobile ?
Essayez quelque chose comme ceci :
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* Rend la barre de défilement tangible mais invisible */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* Ou l'affiche mais en version fine */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* Assure que la barre de défilement est juste en dessous du conteneur au lieu d'être en dessous de la hauteur maximale. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
Je ne suis pas sûr que ce soit une bonne idée de masquer la barre de défilement sur un ordinateur de bureau ; cela peut être frustrant d’y accéder.
Fine et visible (en rendant également l’arrière-plan transparent) me semble bien. Qu’en pensez-vous ?
Cela fonctionne maintenant sur ordinateur ! Mais pas sur mobile. J’ai déjà bricolé du CSS pour le défilement horizontal sur mobile, mais ce n’est pas très sophistiqué 
J’ai également ajouté un ajustement de police car la taille de la police du titre était trop grande pour le petit écran
.featured-cards-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1rem;
margin-bottom: 1rem;
align-content: flex-start;
overflow-x: auto;
max-height: 350px;
}
.featured-cards-container .featured-card {
min-width: 90%;
}
.featured-card a.card-content .card-details .topic-title {
font-size: var(--font-up-1);
}
Existe-t-il un moyen de rendre l’élément entier rétractable et de reproduire le même comportement que le composant Homepage Feature ?
« « Afficher l’extrait est vide » n’arrive qu’à moi ?
J’ai mis à jour ce composant et déplacé son dépôt vers GitLab : Manuel Kostka / Discourse / Components / Featured Topics · GitLab.
La nouvelle version adopte une approche de conception légèrement différente en supprimant certaines options de style des paramètres du thème. Au lieu de cela, elle fournit deux dispositions de base (Cartes et Liste) et un modèle plus épuré pour ajouter des déclarations de style personnalisées via CSS.
Si vous souhaitez continuer à utiliser le composant précédent, il est disponible sur GitHub - nolosb/discourse-featured-cards.
C’est un peu hors sujet, mais je pense que c’est une excellente approche. J’ai du mal à ne pas fournir un million de paramètres dans un composant pour le bien de la personnalisation alors que vous devriez simplifier les choses pour l’utilisateur tout en offrant un moyen de personnaliser pour une utilisation/des utilisateurs avancés.
Je ne l’ai pas encore fait sur ce composant, mais une autre approche que j’aime est d’offrir des propriétés personnalisées comme moyen standard de personnaliser les styles. Par exemple, comme ceci, sur Manuel Kostka / Discourse / Components / Extra Banners · GitLab :
Sur le composant, vous pouvez déclarer le style avec un espace réservé pour la propriété personnalisée et une valeur de substitution par défaut :
background: var(--extra-banners-background, var(--secondary));