Als Neueinsteiger bei Discourse versuche ich zu verstehen, was anpassbar ist und wie. Ich weiß, dass es verschiedene Themes und Theme-Komponenten gibt, und ich verstehe auch, dass man theoretisch HTML, CSS und JavaScript bearbeiten kann, wenn man zu Admin → Anpassen → Themes → [auf das ausgewählte Theme klicken] → CSS/HTML bearbeiten geht.
Ich versuche herauszufinden, wie man das Dashboard verwendet, das beim Klicken auf „CSS/HTML bearbeiten
Ja, werfen Sie einen Blick auf den Entwicklerleitfaden für Discourse-Themen.
Danke. Ich habe das schon gesehen, aber mich nicht getraut, weil der Fokus scheinbar darauf lag, ein Theme zu erstellen, und nicht einfach mein einzelnes Forum zu bearbeiten.
Ich sehe zwar, dass es dort einige Anleitungen gibt, wie man das Dashboard „CSS/HTML bearbeiten
Richtig!
Ich würde dir unbedingt empfehlen, auch diesen Leitfaden durchzugehen. Lass dich nicht vom Thema „Theme
Der von Simon bereitgestellte Link erklärt alles, ist aber recht lang zum Lesen.
Im Wesentlichen gibt es mehrere Möglichkeiten, Discourse-HTML zu bearbeiten:
</body>, Footer.Danke für diese guten Informationen. Ich kann mir gut vorstellen, wie man HTML in einen offenen Bereich einfügt und auch bestehendes HTML mit CSS ausblendet (z. B. display: none auf die entsprechende div-Klasse anwenden, die ich vermutlich einfach mit dem Inspector finde).
Aber wie würde man HTML überschreiben, etwa indem man eine Komponente verschiebt? Hättest du ein kurzes Beispiel?
Ich zitiere teilweise den von Simon geposteten Link:
Kurzes Beispiel zum Füllen eines Auslasses mit einem großen roten Quadrat; Hier befindet sich der Auslass oberhalb der Beitragsliste in einer Themenansicht:
<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
<div style="height: 200px; width: 200px;background: red"></div>
</script>
Beachte das Attribut data-template-name.
Kurzes Beispiel zum Überschreiben der Navigationsleisten-Vorlage:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">Ich habe diesen Block in die Navigationsleisten-Vorlage eingefügt</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- Dies geschieht, um ein DIV in der UL zu vermeiden; ursprünglich {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Auch hier: Beachte das Attribut data-template-name.
Hier ist die Liste der Vorlagen: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates
Und eine nützliche Theme-Komponente, die alle Auslass-Standorte hervorhebt: (deprecated) Plugin outlet locations theme component
Ok. Jetzt fange ich an, es zu verstehen. Das ist wirklich hilfreich.
1. Woher kommt: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name? (Also, wie weiß ich, was ich dort eintragen muss?)
Und mit dem Code-Beispiel, das du gegeben hast, um eine Vorlage zu überschreiben, kann ich langsam sehen, wie das möglich ist, denn ich kann den Vorlagen-Code nehmen, verschieben, löschen, erweitern usw.
2. Also hole ich den Vorlagen-Code über den GitHub-Link, den du bereitgestellt hast? Wenn ja, ergibt das Sinn, aber es scheint schwierig, den richtigen Code zu finden. Zum Beispiel: Welche Vorlage gehört zur Startseite?
3. Dann füge ich den relevanten Code in das Dashboard unter „CSS/HTML bearbeiten
Um den Namen und den Speicherort eines „Outlets
Vielen Dank. Im Vergleich zu WordPress ist aus meiner Sicht jedoch ein großer Vorteil, dass Discourse Ruby und JavaScript anstelle von PHP verwendet.
