Hallo zusammen,
unser HR-Team hat sich dafür entschieden, Kategorien-Boxen anstelle einer Kategorienliste wie unten gezeigt zu verwenden.
Allerdings möchten sie auch, dass die neuesten Themen am Ende der Kategorien angezeigt werden, wie auf der Community-Seite von Revolut zu sehen:
Ich habe Schwierigkeiten herauszufinden, wie dies umgesetzt werden kann – entweder über eine bestehende Einstellung oder mit CSS.
Habt ihr Ideen?
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.
Ich habe dies oder Ähnliches bereits für einige Websites erstellt. Wenn Sie dies im <head>-Bereich Ihres Themes einfügen, werden alle Kategorien oben auf Ihrer Startseite angezeigt (und auf /latest, vorausgesetzt, dies ist dasselbe wie Ihre Startseite).
Danach müssen Sie nur noch das CSS hinzufügen, um dieses Layout nach Ihren Wünschen zu gestalten. Dies ist eine gute Einführung in die Verwendung der API und von Handlebars-Templates im Allgemeinen.
<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'); // Startseite anzeigen
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Liste der Kategorien abrufen
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Startseite ausblenden
$('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
Gibt es ein Update dazu? Ich erhalte einen Fehler, weil das Skript die Kategorienamen nicht abrufen kann. Auf der Seite ändert sich nichts.
Ja, es gab einen Fehler! Danke, dass du ihn gemeldet hast. Ich habe den Code im Beitrag oben korrigiert.
Wir haben den strict mode für unser JavaScript aktiviert, was bedeutet, dass categoryName = []; deklariert werden muss. Die Änderung dieser Zeile zu let categoryName = []; war die Lösung.
Dieser GitHub-Link zum hoffentlich komponenten, das diesen Trick macht, ist 404.
Ich glaube, diese Komponente ist jetzt hier:
Okay.. Ich muss herausfinden, wie ich ein HBS als etwas einbinden kann, das ich zu Discourse hinzufügen kann. Ich schätze, ich muss dies als Datei in einer Komponente verwenden und ich muss dazu ein Tutorial erstellen?
Ich habe ein Tutorial mit einem einfachen Thema gesehen. Ist das der richtige Weg?
Ich habe das noch nie gemacht, daher kenne ich die Antwort nicht. Das Tutorial für Theme-Entwickler wäre definitiv ein guter Ausgangspunkt.
Wenn Sie auf dieser Seite nach „Widgets einhängen“ suchen, sehen Sie ein Beispiel dafür, wie ein Widget an einer anderen Stelle der Seite angezeigt wird.
Dieses #howto-Thema könnte auch als Beispiel nützlich sein:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Ich werde Sie informieren, wenn ich erfolgreich bin. In der Zwischenzeit habe ich das Air-Theme aktiviert und bin ziemlich zufrieden, aber ich würde trotzdem gerne die neuesten Beiträge unter den Kategoriethemen sehen.
Ich war vor 25 Jahren MSVC+±Programmierer und habe es geschafft, eine für den Playstore veröffentlichte Flutter-App zu erstellen. Open-Source-APIs sind für mich jedoch nicht einfach. Wir werden sehen, wie die Dinge laufen. Ich werde ein Update posten, wenn ich dazu in der Lage bin.
Warst du erfolgreich? Ich möchte dasselbe tun und frage mich, ob es etwas Einfaches gibt oder ob ich mich mit dem Thema befassen und etwas Zeit investieren muss.
Mit der Einstellung für den Desktop-Kategorie-Seitenstil „Boxen mit Unterkategorien“ konnte ich eine Theme-Komponente erstellen und Code unter den Boxen hinzufügen. Jetzt überlege ich, wie ich die neuesten Themen auf der gesamten Website auflisten kann.
<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>
Das Problem ist, dass hier einfach „Du bist auf dem neuesten Stand“ steht.
Ich habe aufgegeben. Ich benutze jetzt meistens Standarddinge.