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.