Ciao a tutti,
Il nostro team HR ha deciso di utilizzare le caselle delle categorie invece dell’elenco delle categorie come mostrato di seguito.
Tuttavia, desiderano anche che gli ultimi argomenti appaiano in fondo alle categorie, come si vede nella pagina della community di Revolut.
Sto facendo fatica a capire come realizzare questa cosa, sia tramite un’impostazione esistente che con il CSS.
Qualche idea?
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.
Ho realizzato questo o qualcosa di simile per alcuni siti finora. Se inserisci questo codice nella sezione <head> del tuo tema, tutte le categorie verranno visualizzate in cima alla tua homepage (e anche in /latest, assumendo che sia identica alla homepage).
Dovrai solo aggiungere il CSS per strutturare il layout come preferisci. Questo è un ottimo punto di partenza per utilizzare l’API e i template Handlebars in generale.
<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'); // Mostra la homepage
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Ottieni l'elenco delle categorie
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Nascondi la homepage
$('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!
Hello,
Thank you for this code snippet! I am working on a project where I need to do some things on this principle (not necessarily categories) and I would like to put this directly in the plugin that I develop.
I know where to put the template handlebars, but I can not find the folder / file where to put the javascript. Could you tell me how to proceed?
Thank you,
Thymotep
I love this idea! Looking forward to test such a theme component or plugin
C’è un aggiornamento a riguardo? Sto ricevendo un errore dallo script che non riesce a ottenere i nomi delle categorie. Nulla sta cambiando nella pagina.
Sì, c’è stato un errore! Grazie per averlo segnalato. Ho corretto il codice nel post qui sopra.
Abbiamo attivato la modalità rigorosa per il nostro JavaScript, il che significa che categoryName = []; deve essere dichiarato. La soluzione è stata modificare quella riga in let categoryName = [];.
Questo link di github, che si spera sia il componente che fa questo trucco, è 404.
Penso che quel componente sia ora qui:
Okay… dovrò capire come far funzionare un hbs come qualcosa che posso aggiungere a discourse. Immagino di doverlo usare come file in un componente e devo fare un tutorial su questo?
Ho visto un tutorial con un tema semplice. È la direzione giusta da prendere?
Non l’ho mai fatto prima, quindi non conosco la risposta. Il tutorial per sviluppatori di temi sarebbe sicuramente un buon punto di partenza.
Se cerchi in quella pagina “Mounting widgets”, vedrai un esempio di come visualizzare un widget in una parte diversa della pagina.
Anche questo argomento howto potrebbe essere utile come esempio:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Ti farò sapere se avrò successo. Nel frattempo, ho installato il tema Air e sono abbastanza soddisfatto, ma mi piacerebbe comunque avere gli ultimi post sotto gli argomenti delle categorie.
Una volta ero un programmatore msvc++ 25 anni fa, e sono riuscito a creare un’app Flutter rilasciata sul Play Store. Tuttavia, le API open source non sono facili per me. Vedremo come andranno le cose. Pubblicherò un aggiornamento quando potrò.
Ci sei riuscito? Sto cercando di fare lo stesso, mi chiedo se c’è qualcosa di facile o se devo approfondire il tema e dedicare del tempo.
Utilizzando l’impostazione dello stile della pagina della categoria desktop “Box con sottocategorie”, sono stato in grado di creare un componente del tema e aggiungere codice sotto i box. Ora sto cercando di capire come elencare gli argomenti più recenti su tutto il sito.
<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>
Il problema è che questo dice semplicemente “Sei in pari”.
Mi sono arreso. Ora uso principalmente cose standard.