Gibt es eine thematische „Karte"? (Ein einfacher Weg, um Plugin-Ausgänge usw. zu finden)

[AstonJ]

Ich habe die brillanten Leitfäden für Plugin- und Theme-Komponenten durchgearbeitet, bin aber immer noch etwas verwirrt, wo ich schnell die benötigten Templates, Komponenten, Widgets oder Plugin-Outlets finde.

Ich dachte, ich beginne mit drei einfachen Änderungen – wenn mir jemand die richtige Richtung weisen kann, wäre das eine große Hilfe

Welches Template, welche Komponente oder welcher Plugin-Outlet muss ich ändern, um Folgendes anzupassen?

1. Die -Tags im des HTML der „Topic anzeigen“-Seite (also beim Anzeigen eines Topics). Die Änderung muss sowohl für Bots als auch für Menschen sichtbar sein.
2. Das Markup der Kategorien-Boxen, wo immer diese angezeigt werden. (Diese: AdminCP > Einstellungen > Kategorienschema.)
3. Über-Seite (wo man den Inhalt in den Admin- und Moderator-Blöcken ändert)

---

Beim Theming bei anderer Forensoftware hat man normalerweise ein übergeordnetes Template, das Verweise auf alles enthält, was die Seite ausmacht, sodass man schnell die zu bearbeitenden Templates findet. Beispielsweise gäbe es eine forumdisplay-Datei/ein Template (entspricht „Kategorie anzeigen“ in Discourse), das das Haupt-HTML enthält und auf alle anderen Templates verweist. Ein weiteres für die showthread-Seite (also die „Topic anzeigen“-Seite in Discourse), eines für die Mitgliederprofilseite usw. Diese würden wie eine Liste oder Karte fungieren, die angibt, wo man findet, was man braucht. Wenn man also beispielsweise das zugrunde liegende Markup der Beiträge ändern möchte, würde man zur showthread-Datei (also „Topic anzeigen“) oder zum entsprechenden Template gehen, es durchsuchen und feststellen, dass man das postbit-Template bearbeiten oder darin nachschauen muss.

Gibt es so etwas bei uns? Falls nicht, würde das Team bitte erwägen, etwas Ähnliches hinzuzufügen? Das wäre eine enorme Hilfe

[merefield (Robert)]

(deprecated) Plugin outlet locations theme component

the ability to debug plugin outlets is now included in core. Check out this topic for more details Original theme component info

[AstonJ]

Ich habe das gesehen (Entschuldigung, hätte ich erwähnen sollen!) und es ist sehr hilfreich für sichtbare Plugin-Ausgänge, aber was ist mit Templates/Komponenten/Widgets usw.? Wie findest du sie schnell und einfach, Robert? Hast du eine Ahnung, wo die im ersten Beitrag erwähnten sind?

[merefield (Robert)]

Mein Rat lautet immer: Fangen Sie einfach an. Bearbeiten Sie zunächst eine einfache Anforderung und erarbeiten Sie, wie sie umgesetzt wird. Gehen Sie dann zum nächsten Schritt über.

Was das Thema-Gestalten betrifft, würde ich sagen, dass der Großteil davon Änderungen am CSS umfasst. Nutzen Sie die üblichen Ressourcen. Wo dies nicht ausreicht, müssen Sie gegebenenfalls Vorlagen mit jQuery anpassen oder im Notfall Vorlagen überschreiben. Entwickeln Sie für neuartige Anwendungsfälle eigene Komponenten oder Widgets und binden Sie diese ein.

Der Quellcode ist immer Ihr Verbündeter. Schauen Sie sich im GitHub-Verzeichnis von discourse/discourse um, und Sie werden die verschiedenen Teile der App strukturiert vorfinden. Die Vorlagen sind meiner Meinung nach der einfachere Teil zum Verstehen. Wenn Sie mit der Ember-Verzeichnisstruktur noch nicht vertraut sind, ist jetzt der richtige Zeitpunkt, sich damit vertraut zu machen.

[awesomerobot (Kris)]

@merefield

Der Quellcode ist immer dein Freund. Durchsuche das GitHub-Verzeichnis für discourse/discourse, und du wirst die verschiedenen Teile der App strukturiert vorfinden.

Ja, definitiv. Ich baue seit fast so langer Zeit Themes, wie Discourse existiert, und beziehe mich ständig in einem separaten Fenster auf den Quellcode.

Für Templates solltest du im Allgemeinen hier suchen: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

und für Widgets hier: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

Manchmal ist nicht sofort klar, wo sich ein Template befindet, weil es vielleicht eine Komponente ist, die in einem anderen Template verschachtelt wird. Wenn ich es nicht mehr weiß, suche ich im Quellcode nach einem bestimmten Markup-Teil.

Wenn ich zum Beispiel etwas zur „Über uns“-Seite hinzufügen möchte, sehe ich, dass der Körper der „Über uns“-Seite eine eindeutige Klasse about-page hat. Ich beginne also mit der Suche nach about und body-page (was eine weitere Klasse auf der Seite ist).

Um einige deiner Fragen zu beantworten:

@AstonJ

Die -Tags im des HTML der „Thema anzeigen“-Seite (also beim Anzeigen eines Themas). Ich brauche eine Änderung, die sowohl für Bots als auch für Menschen sichtbar ist.

Ich glaube, das erfordert ein Plugin, was außerhalb meines Fachgebiets liegt … vielleicht kann jemand anderes besser helfen.

@AstonJ

Das Markup der Kategorien-Boxen, wo immer sie angezeigt werden.

Es gibt verschiedene Templates für die verschiedenen Seitenlayouts, aber angenommen, du sprichst über eines der „Boxen mit …“-Layouts:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@AstonJ

Über uns-Seite (wo man den Inhalt in den Abschnitten „Administrator“ und „Moderator“ ändert)

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

[AstonJ]

Danke für die Antworten, ihr beiden

@merefield

Mein Rat ist immer, einfach anzufangen. Bearbeite zunächst eine einfache Anforderung und finde heraus, wie man sie umsetzt. Gehe dann zum nächsten Schritt über.

Genau das habe ich versucht (man kann kaum einfacher anfangen als mit dem Bearbeiten der Title-Tags). Bei anderer Forum-Software würde ich einfach die Datei/Vorlage für die ‘showthread’-Seite öffnen und bearbeiten; das würde buchstäblich weniger als eine Minute dauern. Ich würde es lieben, wenn das Theming in Discourse genauso einfach wäre (obwohl es möglich ist, dass ich mich gerade nur deshalb verloren fühle, weil ich mit dem Discourse-Theming noch nicht vertraut bin).

@merefield

Was das Theming angeht, würde ich sagen, dass der Großteil davon Änderungen am CSS erfordert. Nutze die üblichen Ressourcen. Wo das nicht reicht, musst du Vorlagen mit jQuery anpassen oder im Notfall Vorlagen überschreiben. Baue deine eigenen Komponenten oder Widgets für neue Anwendungsfälle und füge sie hinzu.

Das ist genau das, was ich für alle Punkte im ersten Beitrag brauche, da sie bestehenden Inhalt ändern müssen (und nicht an einer bestimmten Stelle anfügen oder voranstellen, wofür die Plugin-Outlets scheinbar ausgelegt sind).

@merefield

Der Quellcode ist immer dein Freund. Durchsuche das GitHub-Verzeichnis von discourse/discourse, und du wirst die verschiedenen Teile der App strukturiert vorfinden. Die Vorlagen sind meiner Meinung nach der einfachere Teil zum Verstehen. Wenn du mit der Ember-Verzeichnisstruktur nicht vertraut bist, ist jetzt der richtige Zeitpunkt, dich damit vertraut zu machen.

Ich denke, das ist hier sehr wahrscheinlich das Problem. Ich kenne Ember nicht, und vielleicht ist das der Grund, warum sich alles etwas fremd anfühlt. Ich würde mir wünschen, es gäbe etwas wie (deprecated) Plugin outlet locations theme component, aber für Vorlagen und alles andere, was angepasst werden kann – das wäre eine riesige Hilfe.

@awesomerobot

Ja, definitiv. Ich baue seit fast so langer Zeit Themen wie Discourse existiert, und ich beziehe mich ständig in einem separaten Fenster auf den Quellcode.

Wie findest du das, was du brauchst, Kris?

@awesomerobot

Manchmal ist nicht sofort klar, wo sich eine Vorlage befindet, weil sie vielleicht eine Komponente ist, die in einer anderen Vorlage verschachtelt wird… Wenn ich es nicht mehr weiß, suche ich im Quellcode nach einem bestimmten Markup-Teil…

Zum Beispiel, wenn ich etwas zur ‘About’-Seite hinzufügen möchte: Ich sehe, dass der Körper der ‘About’-Seite eine eindeutige Klasse about-page hat, also suche ich nach about und body-page (was eine weitere Klasse auf der Seite ist).

Ah, danke, das ist wirklich guter Rat!

@awesomerobot

Ich denke, das erfordert ein Plugin, was außerhalb meines Fachgebiets liegt… Vielleicht kann jemand anderes besser helfen.

Bist du dir sicher, Kris? Ich dachte, Plugins (oder Plugin-Outlets) erlauben nur, etwas an der Stelle eines bestimmten Outlets hinzuzufügen. Um das Format der Title-Tags zu ändern, müsste ich wahrscheinlich die bestehende Vorlage (oder Komponente oder Widget) öffnen und kopieren/bearbeiten. Das ist zumindest mein Verständnis nach dem Lesen der beiden Guides zu Plugins und Theming.

@awesomerobot

Es gibt verschiedene Vorlagen für die unterschiedlichen Seitenlayouts, aber angenommen, du sprichst über eines der Layouts „Boxen mit…"

discourse/categories-boxes.hbs at master · discourse/discourse · GitHub

Danke! Das sieht nach der Vorlage aus, die ich brauche

@awesomerobot

discourse/about.hbs at master · discourse/discourse · GitHub

Nochmals danke, haha! Beide scheinen jetzt aufgrund ihrer Benennung und weil du sie genannt hast, relativ einfach zu finden zu sein. Ich denke, dass ich bei der Änderung der Title-Tags feststeckte, war vielleicht ein Faktor

Im Moment habe ich das Gefühl, mir fehlt etwas, und wie @merefield bereits anmerkte, könnte es meine Unkenntnis von Ember sein. Weiß jemand von YouTube-Videos, die einen schnell durch das Thema führen? Vielleicht könntest du oder @merefield so eines erstellen?

[merefield (Robert)]

Ember lohnt sich wirklich zu lernen. Es ist sehr leistungsstark, erweiterbar und schnell.

Das Lesen dieser Anleitung hilft dir, den Quellcode besser zu verstehen:

Ember.js Guides - Guides and Tutorials - Ember Guides

Informiere dich über Templates, Computed Properties, Router und Components.

Discourse ist nicht ganz dasselbe wie eine Vanilla-Ember-App, aber die Anleitungen helfen trotzdem in jedem Fall.

Noch ein WICHTIGER Tipp: Suche nach einem bestehenden (guten) Plugin, das Ähnliches erreicht wie dein Vorhaben. Schau dir den Code an und kopiere den Ansatz.

[AstonJ]

Danke, Robert! Es wird gesagt, dass diese Version der Anleitungen veraltet ist – nutzt Discourse diese Version oder sollte ich die neuesten, 3.15er Anleitungen lesen?

[merefield (Robert)]

Lies für den Moment 3.10. Das ist die Version, die Discourse derzeit verwendet. Wenn du die JavaScript-Konsole öffnest, siehst du die Version von Ember und jQuery, die eine Instanz ausführt.

Sei dir außerdem bewusst, dass es verschiedene „Stile

[AstonJ]

@awesomerobot

Es gibt verschiedene Vorlagen für die unterschiedlichen Seitenlayouts, aber angenommen, du meinst eines der Layouts mit „Boxen mit…"

discourse/categories-boxes.hbs im Master-Branch · discourse/discourse · GitHub

Leider ist das nicht der richtige Ansatz :–(

Ich habe auch diese ausprobiert:

• categories-boxes-topic.hbs
• categories-boxes-with-topics.hbs
• categories-boxes.hbs

Ich habe eine Theme-Komponente erstellt und Folgendes hinzugefügt:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Das Ändern des data-template-name mit all diesen Namen hat jedoch keine Wirkung. (Wenn ich ihn auf components/topic-list ändere, funktioniert es.)

Habt ihr eine Idee, wo sich diese Vorlage befindet?

Das möchte ich bearbeiten (wenn das box-Format angezeigt wird, über AdminCP > Einstellungen > Kategoriestil):

Jede Hilfe wird sehr geschätzt.

[AstonJ]

Es sieht also so aus, als wäre das mit Theme-Komponenten nicht möglich, da es dafür anscheinend keine Vorlagen/Komponenten gibt

Anscheinend injiziert dieses Ruby-Modul Inline-Styles: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

Sollte das nur eine vorübergehende Maßnahme sein? Falls nicht, denkst du, es wäre möglich, uns die Angabe benutzerdefinierter Styles zu erlauben, bitte @sam?

Das könnte an die bestehende Option none gekoppelt werden, wobei wir im Admin-Einstellungsbereich zwei Felder hätten, in die wir unsere Styles für jeweils einen Fall einfügen könnten (wenn keine Styles eingefügt werden, verhält es sich genau wie die Option none aktuell):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

und

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Eine Kategorie, die nur Mitgliedern mit Vertrauensstufe 3 und höher vorbehalten ist."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

Aus diesem Ausschnitt:

Wir bräuchten nur Zugriff auf die Variablen für Hintergrundfarbe und Textfarbe von der üblichen Kategorie-Bearbeitungsseite.

Oder gibt es eine andere Möglichkeit, dies zu bearbeiten, Sam? Ich möchte einfach nur die Hintergrundfarbe entfernen und einen Rahmen hinzufügen, der die gleiche Farbe wie der Text hat (wie in der üblichen Kategorie-Bearbeitungsseite festgelegt).

Jede Hilfe wäre sehr willkommen.

Edit: Es scheint doch nicht diese Ruby-Datei zu sein (ich habe sie in meiner Dev-Installation bearbeitet, aber es hat sich nichts geändert) … bei weiterer Recherche scheint es diese hier zu sein: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub Gibt es eine Möglichkeit, ein Plugin zu erstellen, um es zu modifizieren?

[merefield (Robert)]

Es gibt wahrscheinlich mehrere Möglichkeiten, dies zu tun.

Versuchen Sie Folgendes:

• Überschreiben Sie die Vorlage, die diesen Helper aufruft
• Ersetzen Sie ihn durch einen eigenen Helper

Die betreffende Vorlage: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

Das Überschreiben einer Vorlage so tief in der Hierarchie ist relativ unbedenklich.

Eine weitere Möglichkeit wäre die Verwendung von jQuery innerhalb einer Überschreibung der Komponente topic-list-item, um die erforderlichen Änderungen vorzunehmen.