Ich möchte einen Banner-Bereich erstellen, der auf der Startseite unter dem Header platziert wird und einige aufgemotzte Kategorien-Boxen enthält. Zum Beispiel:
Ich verstehe, dass ich den Outlet „below-site-header
Betrachten Sie den TLP-Plugin als Ausgangspunkt. Es gibt bereits eine Funktion für hervorgehobene Bilder, die auf Themen verweist. Möglicherweise können Sie einen Teil des Codes wiederverwenden.
Könnte er das hier verwenden?
Da Kategorien weniger dynamisch sind, könnte ein statischerer Ansatz sinnvoll sein 
Ich schätze, du musst entscheiden, ob es datengesteuert sein soll oder nicht.
Idealerweise möchte ich eine ausgefeiltere Version des ‘Kategorienfelds mit Themen’ haben, das auch das Kategorienlogo und das Hintergrundbild sowie die neuesten Themen in dieser Kategorie einbindet.
Wenn dies jedoch über die Standardmechanismen für Themes oder Plugin-Erweiterungen nicht einfach umsetzbar ist, könnte der Aufwand den Nutzen übersteigen. In diesem Fall werde ich es entweder statisch umsetzen oder das Layout der Kategorienboxen auf der Startseite verwenden und diese nach Bedarf stylen.
Ich denke, es gibt zwei wesentliche Kriterien:
- Gibt es eine standardisierte Möglichkeit, ein Konfigurationselement „Kategorie auswählen
In einem Plugin kannst du alles tun, was du möchtest (obwohl es natürlich am besten ist, Strategien zu verfolgen, die das Risiko minimieren, dass dein Plugin nach einem Core-Update kaputtgeht). Skizziere deine Ideen, kopiere von bestehenden Plugins und dem Core-Diskurs und beginne dann mit einer einfachen Version und iteriere weiter.
Ich habe mir diesen vorherigen Beitrag von Kris angesehen und ihn direkt an etwas angepasst, das du als Basis verwenden könntest. Vieles von dem, was hier behandelt wird, wurde von ihm in seinem ursprünglichen Thema dargelegt.
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Der gesamte Code wird dem Abschnitt <head> (head_tag.html) deines Themes hinzugefügt.
Dieser erste Abschnitt prüft, ob sich die Seite, auf der du dich befindest, auf der „Startseite“ befindet.
Anschließend rufen wir die Kategorien der Site mit der Methode Category.list() der Kategorieklasse ab.
Dann vergleichen wir diese mit den Kategorien, die du hervorheben möchtest. Diese befinden sich im definedFeaturedCategories-Array, das im folgenden Code definiert ist. Die von dir zugelassenen Kategorien werden der Komponente zugewiesen, die an eine Vorlage zur Darstellung übergeben wird.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// Wir verwenden das Category-Modell, um die Site-Kategorien abzurufen
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container ist der Plugin-Auslass,
// featured-topics ist dein benutzerdefinierter Komponentenname
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// Bei Seitenwechsel prüfen, ob die URL übereinstimmt
// Wenn deine Startseite nicht /latest ist, ändere dies zu /categories
$('html').addClass('custom-featured-categories');
// Füge dem HTML-Tag eine Klasse für einfaches CSS-Targeting hinzu
let definedFeaturedCategories = ["uncategorized","blog","two"]
// Array der Kategorien, die du hervorheben möchtest
// Stelle sicher, dass die Kategoriennamen in Kleinbuchstaben geschrieben sind
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// Fügt nur die Kategorien, die du hervorheben möchtest, in das Array zur Darstellung ein
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// Wenn die Seite nicht mit den oben genannten URLs übereinstimmt, tue Folgendes:
$('html').removeClass('custom-featured-categories');
// Entferne unsere benutzerdefinierte Klasse
component.set('categories',[])
// Setze die Kategorien auf ein leeres Array, um die Darstellung zu deaktivieren
}
});
}
});
</script>
Dieser nächste Abschnitt fügt die Vorlage für die oben erstellte Komponente in den Plugin-Auslass above-main-container ein. Er ruft die benutzerdefinierte categories-wrapper auf, die im dritten Schritt erstellt wurde, und definiert categories als featuredCategories, die oben erstellt wurden.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- Verwende die categories-wrapper-Vorlage, die unten erstellt wurde -->
<!-- Definiere categories als featuredCategories, die im obigen Skript erstellt wurden -->
</div>
</script>
Der dritte Abschnitt erstellt die benutzerdefinierte Handlebars-Vorlage categories-wrapper, um die hervorgehobenen Kategorien darzustellen. Sie wurde direkt von der Discourse-Vorlage categories-only.hbs abgeleitet, die auf der Kategorien-Seite von Discourse verwendet wird.
<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
<!-- Dies erstellt eine Komponenten-Vorlage namens 'categories wrapper' -->
<!-- Der gesamte Vorlagencode wurde von der eigenen Kategorien-Seiten-Vorlage von Discourse angepasst
https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/categories-only.hbs -->
<div class="top-categories-wrapper">
{{#each categories as |c|}}
<div class="top-category-column-one">
{{category-title-link category=c}}
{{#if c.description}}
<div class="category-description">
{{dir-span c.description}}
</div>
{{/if}}
{{#if c.isGrandParent}}
<table class="category-list subcategories-with-subcategories">
<tbody>
{{#each c.subcategories as |subcategory|}}
<tr
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString
}}
class="{{if
subcategory.description_excerpt
"has-description"
"no-description"
}}
{{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}"
>
<td
class="category"
style={{border-color subcategory.color}}
>
{{category-title-link tagName="h4" category=subcategory}}
{{#if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|
}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subsubcategory
}}
{{category-link subsubcategory hideParent="true"
}}
</span>
{{/unless}}
{{/each}}
</div>
{{else if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |subcategory|}}
{{#unless subcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subcategory}}
{{category-link subcategory hideParent="true"}}
{{category-unread category=subcategory}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
<div class="top-category-column-two">
<span class="topics-header">
Themen
</span>
<span class="topics-count">
{{c.topic_count}}
</span>
{{category-unread category=c tagName="div" class="unread-new"}}
</div>
{{/each}}
</div>
</script>
Dies sollte dir helfen, mit dem zu beginnen, was du in deinem OP angefordert hast.
Für das Styling der Farbe jedes Kategoriencaches entsprechend seinen benutzerdefinierten Farben kannst du im dritten Abschnitt Styles mit # + c.color hardcodieren, um auf den Farbcode der Kategorien zuzugreifen.
Abgesehen davon kann das Styling in der Datei common.scss vorgenommen werden.
Wow! Vielen Dank für diese detaillierte und äußerst hilfreiche Antwort, @jordan.vidrine! Ich werde es versuchen und dir Bescheid geben, wie es läuft 
Das hat super funktioniert, @jordan.vidrine:
Das Einzige, das seltsam ist, ist, dass die Themen erst geladen werden, nachdem man /categories besucht hat. Ansonsten ist es so, als gäbe es überhaupt keine Themen:
Hast du eine Idee, was da los ist?
Hmm. Tut mir leid, ich bin mir nicht sicher. Ich kann das Problem nicht reproduzieren.