Bonjour à tous,
Notre équipe RH a décidé de privilégier des boîtes de catégories plutôt qu’une liste de catégories, comme ci-dessous.
Cependant, elles souhaitent également que les derniers sujets apparaissent en bas des catégories, comme sur la page de la communauté Revolut.
Je peins à comprendre comment cela peut être réalisé, soit via un paramètre existant, soit avec du CSS.
Des idées ?
Try to work with components
You can use: categories-and-latest-topics
In this mode, there is a connection and categories and recent topics.
<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
<div class='column categories'>
{{categories-only categories=categories}}
</div>
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
Next, you override: categories-only
<script type='text/x-handlebars' data-template-name='components/categories-only'>
The contents of the file...
</script>
Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.
Options think very many.
Another option is to simply structure your category directly
Then just change the css, which is even easier. )
Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. 
I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.
J’ai déjà créé ceci ou quelque chose de similaire pour plusieurs sites. Si vous placez ce code dans la section <head> de votre thème, il affichera toutes les catégories en haut de votre page d’accueil (et de /latest, en supposant qu’il s’agit de la même page que votre page d’accueil).
Ensuite, il vous suffira d’ajouter le CSS pour structurer cette mise en page comme vous le souhaitez. C’est une excellente introduction à l’utilisation de l’API et des modèles Handlebars en général.
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
api.registerConnectorClass('below-site-header', 'custom-homepage', {
setupComponent(args, component) {
component.set('hostname', window.location.hostname);
api.onPageChange((url, title) => {
if (url == "/" || url == "/latest"){
$('html').addClass('show-custom-homepage'); // Afficher la page d'accueil
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Récupérer la liste des catégories
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Masquer la page d'accueil
$('html').removeClass('show-custom-homepage');
component.set('displayCustomHomepage', false);
}
});
}
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper">
<div class="wrap wrap-category-boxes">
<div class="homepage-category-boxes">
{{#each categoryName as |c|}}
<a href="/c/{{c.slug}}" class="box">
<div class="homepage-category-box">
{{#if c.uploaded_logo}}
<div class="category-image-wrapper">
<img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />
</div>
{{/if}}
<h2>{{#if c.read_restricted}}<i class="fa fa-lock"> </i>{{/if}}{{c.name}}</h2>
<p>{{c.description}}</p>
</div>
</a>
{{/each}}
</div>
</div>
</div>
{{/if}}
</script>
It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!
Bonjour,
Merci pour cet extrait de code ! Je travaille sur un projet où je dois appliquer ce principe (pas nécessairement pour les catégories) et j’aimerais intégrer cela directement dans le plugin que je développe.
Je sais où placer le modèle Handlebars, mais je n’arrive pas à trouver le dossier ou le fichier où mettre le JavaScript. Pourriez-vous m’indiquer comment procéder ?
Merci,
Thymotep
J’adore cette idée ! J’ai hâte de tester un tel composant de thème ou plugin.
Oui, il y avait une erreur ! Merci de l’avoir signalée. J’ai corrigé le code dans le message ci-dessus.
Nous avons activé le mode strict pour notre JavaScript, ce qui signifie que categoryName = []; doit être déclaré. Le fait de modifier cette ligne en let categoryName = []; a résolu le problème.
Ce lien GitHub vers, je l’espère, le composant qui fait ce truc, est en 404.
Je pense que ce composant se trouve maintenant ici :
D’accord… Je vais devoir trouver comment faire fonctionner un hbs comme quelque chose que je peux ajouter à Discourse. Je suppose que je dois l’utiliser comme un fichier dans un composant et que je dois faire un tutoriel à ce sujet ?
J’ai vu un tutoriel avec un thème simple. Est-ce la bonne direction à suivre ?
Je n’ai jamais fait ça auparavant, donc je ne connais pas la réponse. Le tutoriel du développeur de thèmes serait certainement un bon point de départ.
Si vous recherchez « Mounting widgets » sur cette page, vous verrez un exemple d’affichage d’un widget dans une autre partie de la page.
Ce sujet howto pourrait également être utile comme exemple :
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Je vous tiendrai au courant de mon succès. En attendant, j’ai activé le thème Air et j’en suis très satisfait, mais j’aimerais toujours avoir les derniers articles sous les sujets de catégorie.
J’ai été programmeur msvc++ il y a 25 ans, et j’ai réussi à créer une application Flutter publiée sur le Play Store. Les API open source ne sont cependant pas faciles pour moi. Nous verrons comment les choses évoluent. Je posterai une mise à jour quand je le pourrai.
Avez-vous réussi ? Je cherche à faire la même chose, je me demande s’il existe une solution simple ou si je dois plonger dans le thème et y passer du temps.
En utilisant le style de page de catégorie de bureau “Boîtes avec sous-catégories”, j’ai pu créer un composant de thème et ajouter du code sous les boîtes. J’essaie maintenant de savoir comment lister les derniers sujets sur l’ensemble du site.
<script type="text/x-handlebars" data-template-name="/connectors/category-boxes-after-boxes/mwp">
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
Le problème est que cela indique simplement “Vous avez tout vu”.
J’ai abandonné. J’utilise maintenant principalement des choses standard.