Bonjour, j’ai personnalisé l’apparence de mon Discourse dans le champ personnalisé du thème .
J’utilise | script type="text/x-handlebars" data-template-name="components/categories-only" |
et des éléments similaires pour remplacer certains modèles spécifiques. Existe-t-il un moyen de les remplacer uniquement sur des pages spécifiques, comme la page d’accueil, et d’utiliser un code différent pour la vue des sous-catégories, par exemple ? Je suis encore assez nouveau sur Discourse ; je ne suis même pas certain que ce soit la bonne méthode à suivre dans les HTML/CSS personnalisés des thèmes (je sais que cela sera perdu lors des mises à jour). Si quelqu’un pouvait m’aider, je le remercie vivement.
Juste pour clarifier ce point d’abord
Ce n’est pas correct : vous ne perdez pas vos modifications lors d’une mise à jour si elles ont été apportées dans un thème. Elles sont conservées. La seule façon de perdre vos modifications est de modifier directement les fichiers sur votre serveur, ce que vous ne devriez évidemment pas faire.
Cependant, il y a un certain risque à remplacer des modèles : une mise à jour du cœur pourrait rendre vos modifications incompatibles, nécessitant alors une mise à jour. Si vous acceptez ce risque, vous pouvez techniquement réaliser ce que vous demandez ici.
Pour commencer, vous devez trouver un moyen de distinguer quand l’utilisateur se trouve sur la page d’accueil. Dans le cas du composant « categories-only », une méthode consiste à vérifier le searchContext. Lorsque vous êtes sur une page de sous-catégorie, le contexte de recherche est défini sur « category ». S’il n’y a pas de contexte de recherche, cela signifie que vous êtes sur la page d’accueil.
Pour transmettre cette information à votre modèle, ajoutez quelque chose comme ceci :
<script type="text/discourse-plugin"
version="0.8">
const categoriesOnlyComponent = require('discourse/components/categories-only').default;
categoriesOnlyComponent.reopen({
isHomepage: function() {
return !this.parentView.searchService.contextType
}.property()
});
</script>
Ce code vous permet d’utiliser isHomepage dans le modèle de categories-only. Il renvoie true s’il n’y a pas de contexte de recherche, ce qui signifie que vous êtes sur la page d’accueil. Sinon, il renvoie false.
Ensuite, vous devez copier le modèle par défaut comme suit :
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
... reste du modèle
{{/if}}
</script>
et utilisez isHomepage que nous avons ajouté. Pour cela, vous devez utiliser l’helper Handlebars {{#if}}. Essentiellement, vous avez besoin de quelque chose comme ceci :
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
... modèle uniquement pour la page d'accueil
{{else}}
... reste du modèle par défaut si vous n'êtes pas sur la page d'accueil
{{/if}}
</script>
Vous pouvez maintenant utiliser ce que vous voulez dans la section isHomepage. Vous pouvez le modifier directement ici ou créer un nouveau modèle pour cette section comme suit :
<script type='text/x-handlebars'
data-template-name='components/categories-only-homepage'>
<h1>Vous êtes sur la page d'accueil !</h1>
<p>
Utilisez cette section pour afficher le modèle du composant « categories-only » si l'utilisateur est sur la page d'accueil.
</p>
</script>
La dernière étape consiste à appeler ce modèle en tant que partial dans le modèle categories-only, à l’intérieur de la section isHomepage, comme ceci :
<script type='text/x-handlebars'
data-template-name='components/categories-only'>
{{#if categories}}
{{#if isHomepage}}
{{partial 'components/categories-only-homepage'}}
{{else}}
... reste du modèle par défaut si vous n'êtes pas sur la page d'accueil
{{/if}}
</script>
Le résultat est que lorsque vous visitez la page d’accueil, vous verrez ceci :
mais le composant dans les sous-catégories restera inchangé.
Ceci est facultatif, mais vous pourriez aussi être intéressé par la lecture de :
car c’est la nouvelle méthode recommandée pour travailler sur les thèmes et éviter d’utiliser des balises script.
Incroyable, merci beaucoup ! Maintenant, je comprends aussi un peu comment utiliser text/discourse-plugin. Je vous suis très reconnaissant !
Salut, j’aimerais poser une dernière question.
Pourrais-tu m’expliquer comment obtenir le dernier sujet dans des sous-catégories spécifiques ? Je peux utiliser category.latestTopic pour récupérer le dernier sujet d’une catégorie, mais cela ne fonctionne pas pour les sous-catégories. Y a-t-il une astuce intelligente pour contourner ce problème ? J’aimerais afficher le dernier sujet d’une sous-catégorie lorsque je liste les sous-catégories.