Symbolleiste unter der Website-Kopfzeile pro Kategorie

[Heliosurge (Dan DeMontmorency)]

https://meta.discourse.org/t/welcome-link-banner/218743/28

Hallo, ich wollte fragen, ob Sie meine Funktionsanfrage gesehen haben?

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

Oder alternativ eine Theme-Komponente, die es ermöglichen würde, eine Symbolleiste unter der Hauptseitenleiste zu „andocken“, wenn eine bestimmte Kategorie angezeigt wird? Denn das ist es, was ich spezifischer suche. Dies könnte zum Beispiel etwas wie Joes benutzerdefinierte Header-Links sein.

Eine Anleitung, selbst das Verhalten einer bestehenden Theme-Komponente anzupassen, um dies zu erreichen, wäre großartig.

Ich entschuldige mich, da ich immer noch ein Anfänger bin und lerne, während ich gehe.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

Oder alternativ eine Theme-Komponente, die es ermöglichen würde, eine Symbolleiste unter der Hauptseitenleiste zu „andocken“, wenn eine bestimmte Kategorie angezeigt wird? Denn das ist es, was ich spezifischer suche. Dies könnte zum Beispiel so etwas wie Joes benutzerdefinierte Header-Links sein.

Hallo!

Könnten Sie Ihre Bedürfnisse etwas genauer erläutern? Was genau möchten Sie unter dem Header von Discourse platzieren?

Die Standardmethode, „irgendetwas“ unter dem Header zu platzieren, befindet sich im Tab Nach dem Header (After Header), wenn Sie ein Theme oder eine Komponente bearbeiten:

Aber es scheint, dass Sie an etwas Dynamischeres und/oder Komplexeres denken.

Je mehr Informationen Sie angeben, desto hilfreicher werden die Antworten sein

[Heliosurge (Dan DeMontmorency)]

Vielen Dank für die schnelle Antwort.

Um ganz klar und spezifisch zu sein, wäre etwas wie Johani’s Custom Header Links (Icon) nahezu perfekt.

Das Ziel ist es, idealerweise eine Symbolleiste mit einem klickbaren Logo und dann ein paar Dropdown-Menüs zu haben.

Zum Beispiel hat das Forum einen Sponsor, dem Kategorie A mit 2 Unterkategorien gehört. Wenn Benutzer Kategorie A oder ihre Unterkategorien anzeigen, wird eine Symbolleiste unter dem Website-Header verankert. Mit Links für dieses Unternehmen.

z.B. Shop-Link, Support, Community-Links.

[Canapin (Coin-coin le Canapin)]

Die benutzerdefinierten Header-Links sind eine ziemlich einfache Theme-Komponente und ich denke, es wäre ein guter Anfang, dieselbe Codebasis zu verwenden, aber die Linkliste woanders zu platzieren.
Allerdings unterstützt sie keine Untermenüs, was schwieriger hinzuzufügen wäre.

Ein anderer Ansatz wäre, eine Komponente ohne Einstellungen zu erstellen, die nur HTML, CSS (und vielleicht ein wenig JS) verwendet. Es wäre also eine ziemlich “statische” Anpassung, und wenn Sie Änderungen vornehmen müssen, müssten Sie den entsprechenden HTML- und CSS-Code bearbeiten.

Hier ist ein Beispiel, das ich für mein eigenes Forum erstellt habe:

Und so sieht es in den Website-Anpassungen aus:

Würde eine solche Methode für Ihre Bedürfnisse ausreichen, oder bevorzugen Sie etwas, das einfacher von der Admin-Seite aus zu bearbeiten ist, wie die benutzerdefinierten Header-Links Komponente mit mehreren Eingabefeldern, wie diese?

[Heliosurge (Dan DeMontmorency)]

Etwas wie die benutzerdefinierten Header-Links könnte einfacher sein, bis ich mehr Erfahrung habe. Oder vielleicht eine Anleitung, um eine separate Komponente zu erstellen, die beispielsweise Johani’s benutzerdefinierte Header-Links-Komponente anvisiert und überschreibt, um das Verhalten in den Header zu ändern (möglicherweise gibt es dafür bereits eine Option) mit Überschreibungen, um die aktuelle übergeordnete Kategorie zu verwenden.

Wenn ich jedoch 2 Sponsoren hätte, müsste ich wissen, ob die Komponente zweimal installiert werden kann, indem die Komponente umbenannt und die Komponente nach Namen angesprochen wird.

z.B.

1. (A) Benutzerdefinierte Header-Links
2. (B) Benutzerdefinierte Header-Links

Ich meine, es gibt eine Theme-Komponente, die eine Seitenleiste basierend auf der Kategorie hinzufügt? Aber eine Seitenleiste würde nicht nur auf dem Desktop funktionieren. Daher wird eine obere Leiste benötigt.

[Heliosurge (Dan DeMontmorency)]

Ich weiß, dass ich aus einer ZIP-Datei exportieren und dann importieren kann, um den Code zu ändern. Aber ich bräuchte Anleitung, was ich ändern müsste, wenn ich diesen Weg gehe. Ich bin bereit, es zu versuchen.

[Heliosurge (Dan DeMontmorency)]

Jetzt ist es vielleicht einfacher, da ich an einer benutzerdefinierten Theme-Komponente arbeite, um dies, wie Sie erwähnten, durch einige einfache Elemente nach dem Header-Code zu vereinfachen, der die Kategorie mit einfachen Links anspricht, hier und da ein Bild für Hauptlinks verwendet, wobei ein Community-Link zu einem Beitrag oder einer veröffentlichten Seite führt?

Ich möchte Ihnen nochmals für Ihre Zeit und Ihr Wissen danken.

[Canapin (Coin-coin le Canapin)]

Hier ist ein praktisches Beispiel, das ich für Sie erstellt habe:

Hier ist das HTML, das ich in den Tab After Header eingefügt habe

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Hier sind einige Inhalte, die nur in der Kategorie <strong>Allgemein</strong> angezeigt werden</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Hier sind einige Inhalte, die nur in der Kategorie <strong>Website-Feedback</strong> angezeigt werden</h2>
</div>

Hier ist das SCSS, das ich in den Tab CSS eingefügt habe (Discourse verwendet SCSS, das CSS-Funktionen erweitert):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Hier ist das Ergebnis. Jedes Banner erscheint nur in seiner jeweiligen Kategorie.

Ich hoffe, das hilft weiter!

[Heliosurge (Dan DeMontmorency)]

Das ist absolut perfekt! Vielen Dank!

Mit diesem Basisschlüssel wird es immer noch angezeigt, wenn es sich in einer Unterkategorie des übergeordneten Elements befindet? Oder muss ich die Unterkategorien zur Bedingung hinzufügen?

Ich sollte wirklich kopieren und einfügen und mich bei Ihnen melden. Da Sie mit all der Zeit, die Sie mit mir geteilt haben, sehr nett waren.

[Canapin (Coin-coin le Canapin)]

@Heliosurge

Wird mit diesem Basisskript immer noch angezeigt, wenn es sich in einer Unterkategorie der übergeordneten Kategorie befindet? Oder muss ich die Unterkategorien zur Bedingung hinzufügen?

Unterkategorien haben ihre eigene Klasse im Body-Tag.

Zum Beispiel ist in WordPress - Discourse Meta Support > WordPress eine Unterkategorie von Support.

Die Kategorieklasse auf ist: category-support-wordpress.

Wenn das Banner auch in den Unterkategorien sowie in der übergeordneten Kategorie angezeigt werden soll, sollte der SCSS-Code anders lauten. Ich kann mir das morgen ansehen.

[Heliosurge (Dan DeMontmorency)]

Großartig! Vielen Dank nochmals, dass Sie Ihren Wissensschatz teilen und mir einen soliden Start ermöglichen.
Sie sind definitiv eine Bereicherung für Ihr Team!

[Heliosurge (Dan DeMontmorency)]

Entschuldigen Sie meine Unerfahrenheit. Aber kann ich mich noch einmal auf Sie verlassen?

<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul>
</span>
</div>

Wie kombiniere ich das mit Ihrem Beispiel? Und bekomme ich die Links auch von links nach rechts nebeneinander statt übereinander gestapelt?

[Canapin (Coin-coin le Canapin)]

Im Grunde würdest du diesen Code nehmen und ihn in meinen Code einfügen, um das <h2>-Tag und seinen Inhalt zu ersetzen. Aber ich würde vorschlagen, dass du diesen Code verfeinerst und an deine Bedürfnisse anpasst, anstatt ihn einfach zu kopieren und einzufügen.

Was die Anzeige der Elementliste nebeneinander statt untereinander betrifft, gibt es viele CSS-Möglichkeiten dafür… Viele davon sind ziemlich einfach, aber dann geraten wir ein wenig aus dem Rahmen der Hilfe, die wir hier anbieten. Siehe diese Erklärung:

About the Dev category

The category for all things Discourse Development. Building a customization for yourself or the community? Then this is the category for you! Questions and discussions about creating themes, theme components, plugins, help with submitting pull requests, configuring development environments, coding conventions, and so on and so forth are all welcome here. However, basic HTML and CSS questions are not in scope for support.

In solchen Fällen, die allgemeine, nicht direkt Discourse-bezogene HTML- und CSS-Themen betreffen, findest du hier Informationen: Making custom CSS changes on your site
Und so ziemlich überall im Internet. Zum Beispiel:

• Google Search

Davon abgesehen, welche Kenntnisse hast du derzeit in HTML und CSS?
Wenn ich etwas mehr darüber wüsste, könnte ich gezieltere Antworten geben.

[Heliosurge (Dan DeMontmorency)]

@Canapin

Cela dit, quelles sont vos compétences actuelles en HTML avec CSS ?
En savoir un peu plus à ce sujet aiderait à formuler des réponses plus personnalisées.

Wenn ich ehrlich zu mir selbst und zu den Menschen um mich herum bin. Ich bin ein begeisterter Anfänger. Ich hatte in der High School einige Programmiererfahrungen mit gwbasic und turbo pascal. Ich habe die Initiative ergriffen, eine App zu verwenden, um HTML und CSS zu lernen, und hatte einige Erfolge. Allerdings nichts auf hohem Niveau.

Zum Beispiel hat jemand ein Codebeispiel geteilt, um eine Kategorie aus dem Hamburger-Menü auszublenden. Es hat gut funktioniert, aber es war viel Code, um alle auszublenden, die ich wollte. Dies geschah vor der Theme-Komponente “Category Hider”, obwohl ich mit der Idee beigetragen habe, eine Option zum Ausblenden aller Unterkategorien zu haben, zu der ein Community-Mitglied einen Code von 1 oder 2 Zeilen geteilt hat, der alle Unterkategorien ausblendete. lol

Das war viel effizienter, als jede einzelne auszublenden.

Ich hatte jedoch jetzt mäßigen Erfolg beim Modifizieren des Welcome Link-Banners, indem ich die Einstellungen.yml mit den Modern Category Boxes verglichen habe, wenn ich mich recht erinnere, die Einstellungen.yml, indem ich die erste Einstellung mit einer ausgetauscht habe, die Kategorien auflistet, im Gegensatz zur Entdeckung. Es scheint jedoch, dass ich immer noch ein paar Dateien vergleichen muss, um zu sehen, wo die Einstellung wirksam wird. Da ich Kategorien zur ersten Einstellung hinzufügen kann, scheint es noch nicht ganz zu funktionieren.

Ich weiß, dass ich mehr lesen und eine bessere IDE als mein Handy verwenden muss, um mein Verständnis und Bewusstsein wirklich weiterzuentwickeln. Ich werde dorthin gelangen, ich brauche nur die Demut und den Fokus, um das zu tun.

Dafür bin ich wirklich dankbar, dass wir diese großartige und verständnisvolle Community haben, die mir oft, wenn ich gefragt habe, Anleitungen gegeben hat, die ich brauche, mit einem hohen Maß an Geduld, das viele nicht aufbringen würden.

Ich weiß, dass ich mit dem Studium von Code und dem Zeitaufwand dorthin gelangen werde. Ich bin zu stur, es nicht zu tun.

Ich benutze Linux und habe jetzt meinen Desktop so eingerichtet, dass er die Dinge besser ermöglicht. Außerdem muss ich sehen, wie die Desktop-Seite des Designs und die mobile Seite ein gut ausbalanciertes Design erstellen. Ich lerne ständig neue Dinge. Ich basiere den Kern auf dem Air Theme, da es ein großartiger Ausgangspunkt ist.