Hola a todos,
Nuestro equipo de RRHH ha decidido optar por cuadros de categorías en lugar de una lista de categorías como se muestra a continuación.
Sin embargo, también les gustaría que los temas más recientes aparezcan en la parte inferior de las categorías, como se ve en la página de la comunidad de Revolut.
Estoy teniendo dificultades para averiguar cómo se puede hacer esto, ya sea mediante una configuración existente o con CSS.
¿Alguna 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.
He creado esto o algo similar para varios sitios hasta ahora. Si lo colocas en la sección <head> de tu tema, mostrará todas las categorías en la parte superior de tu página de inicio (y en /latest, asumiendo que es lo mismo que tu página de inicio).
Lo único que necesitarás después es agregar el CSS para estructurar este diseño como desees. Esta es una buena introducción al uso de la API y de las plantillas Handlebars en general.
<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'); // Mostrar página de inicio
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Obtener lista de categorías
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Ocultar página de inicio
$('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
¿Hay alguna actualización al respecto? Estoy recibiendo un error porque el script no puede obtener los nombres de las categorías. Nada cambia en la página.
¡Sí, hubo un error! Gracias por reportarlo. He corregido el código en la publicación de arriba.
Hemos activado el modo estricto para nuestro JavaScript, lo que significa que categoryName = []; debe ser declarado. Cambiar esa línea a let categoryName = []; fue la solución.
Este enlace de GitHub, con la esperanza de que sea el componente que hace este truco, devuelve un error 404.
Creo que ese componente está ahora aquí:
De acuerdo… Tendré que averiguar cómo hacer que un hbs funcione como algo que pueda agregar a Discourse. Supongo que tengo que usar esto como un archivo en un componente y necesito hacer un tutorial sobre eso.
¿Vi un tutorial con un tema simple. ¿Esa es la dirección correcta a seguir?
No he hecho esto antes, así que no sé la respuesta. El tutorial del desarrollador de temas sería sin duda un buen lugar para empezar.
Si buscas en esa página “Mounting widgets”, verás un ejemplo de cómo mostrar un widget en una parte diferente de la página.
Este tema howto también podría ser útil como ejemplo:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Te avisaré si tengo éxito. Mientras tanto, he activado el tema Air y estoy bastante contento, pero todavía me gustaría tener las últimas publicaciones debajo de los temas de la categoría.
Una vez fui programador de msvc++ hace 25 años, y logré crear una aplicación de Flutter lanzada en Play Store. Sin embargo, las API de código abierto no son fáciles para mí. Veremos cómo van las cosas. Publicaré una actualización cuando pueda.
¿Lo tuviste? Busco hacer lo mismo, me pregunto si hay algo fácil o si necesito meterme en el tema y pasar un tiempo.
Utilizando la configuración de estilo de página de categoría de escritorio “Cajas con subcategorías”, pude crear un Componente de Tema y agregar código debajo de las Cajas. Ahora estoy descubriendo cómo listar los temas más recientes en todo el sitio.
<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>
El problema es que esto simplemente dice “Estás al día”.
Me rendí. Ahora uso principalmente cosas estándar.