Discourse Bars 🍻 🍸 (ein Sidebar-Framework)

[merefield (Robert)]

Übersicht

Eine Theme-Komponente, mit der Sie Komponenten^[1] auf oberen und seitlichen Leisten anordnen können.

• Geben Sie eine Reihe von „Widgets“ eindeutig für Route und Position an.
• Unterstützt Setups für jede der folgenden Optionen: Entdeckung^[2], Thema, Tag^[3], Kategorie^[3:1], Kategorien^[3:2] ODER Tag-Schnittmenge^[4]
• „Leisten“ können entweder sein: oben, links, rechts ODER alternative rechte Position.
• Jede Leiste kann eingeklappt oder geschlossen werden (Browser aktualisieren, um das Schließen zurückzusetzen). Sie können standardmäßig minimiert werden.
• Behandelt die offizielle Seitenleiste. Wenn Sie jedoch eine Seitenleiste mit linker Leiste verwenden möchten, wird der Dropdown-Modus der offiziellen Seitenleiste empfohlen.
• Es enthält vorhandene Beispiel-Einstellungen, die einige große Buchstaben zeigen, teilweise als Demo und teilweise, damit Sie Beispiel-Einstellungen sehen können. Löschen Sie diese und ersetzen Sie sie durch Ihre eigenen Komponentennamen.
• Wird mit einer Komponente geliefert: bars-custom-html (siehe voreingestellte Beispiel-Einstellungen) – aber Komponenten aus vielen vorhandenen Theme-Komponenten & Plugins sind kompatibel.
• Mobile Unterstützung ist noch nicht implementiert.

Schnelle Links

Code erhalten	https://github.com/merefield/discourse-tc-bars
Code ansehen	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
Installationsanleitung	Installing a theme or theme component

Gefällt Ihnen diese Theme-Komponente? Bitte sie auf GitHub !

Kostenloses Beispiel:

Beim ersten Laden:

Einige wichtige Dinge, die Sie über diese TC beachten sollten!

• Diese Theme-Komponente richtet sich hauptsächlich an Entwickler und Administratoren mit technischem Verständnis der Theme-Entwicklung. Wenn Sie nicht ausreichend technisch versiert sind und Hilfe bei der Implementierung von Seitenleisten mit Leisten benötigen, können Sie mich oder einen Entwickler unter Marketplace engagieren.

• Diese Theme-Komponente soll ein Framework zur Unterstützung von Seitenleisten bieten. Sie bietet nicht und soll keine endgültige visuelle Ausarbeitung bieten, die Sie in Ihrem Theme mit zusätzlichem CSS hinzufügen müssen. Sie leistet jedoch viel Arbeit für Sie und gibt Ihnen weniger Dinge, über die Sie nachdenken müssen, und vielleicht sogar die Möglichkeit, Dinge zu tun, zu denen Sie vorher keine Möglichkeit hatten …

Komponentenüberlegungen

• Sie müssen einen Komponentennamen angeben. Der Komponentename ist tatsächlich derselbe wie der Dateiname im Verzeichnis component des Themes, TC oder Plugins ohne die Endung.

  • Der Komponentename ist nicht der Name der Theme-Komponente (die viele Ember Glimmer-Komponenten enthalten könnte), sondern der Name der tatsächlichen Ember-Komponentendatei , also z. B.:
  

  also layouts-tag-list

• Sie können aus einer vorhandenen Theme-Komponente oder einem Plugin stammen. Vorhandene Komponenten funktionieren möglicherweise. Beispiele sind:

  • 🏷️ Bars Tag List Component
  • Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
  • Discourse AI Topic Summary 🤖 … und möglicherweise sogar:
  • Das Leaderboard-Widget: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (lassen Sie es mich unten wissen, wenn Sie es ausprobieren!)

• Es erfordert einige Fachkenntnisse, um Komponenten zu erstellen

  • Aber versuchen Sie, Ihre eigene Komponente in einer anderen Theme-Komponente zu erstellen, und stellen Sie sicher, dass beide in demselben Theme aktiv sind.

• Komponenten müssen ihre eigenen Daten beziehen (sie können keine Plugin-Outlet-Pass-Through-Modelle verwenden, leider aufgrund der spezifischen Plugin-Outlets, die verwendet werden müssen, um Dinge auf diese Weise anzuordnen)

  • Out-of-the-Box können Sie nur vorhandene JSON-API-Daten von z. B. Discourse Core oder von einem vorhandenen Plugin verwenden. Wenn Sie spezielle Daten benötigen, die Sie nicht aus aktuellen APIs beziehen können, können Sie mich oder jemanden unter Marketplace engagieren, um Ihnen zu helfen.

• Möglicherweise müssen Sie die Seitenleiste und die Komponentengrenzen nach Geschmack gestalten. (Auch hier gilt: Wenn Sie Hilfe benötigen, erwägen Sie die Beauftragung eines Entwicklers).

  • Strategischer Einsatz von Schatten und Rahmen kann Dinge wirklich gut aussehen lassen – seien Sie künstlerisch!

Warum

• Mit der Aktualisierung von Discourse Core auf Ember 5 funktionierte der Trick Pavilion’s Plugin Layouts, um das Discourse-Layout hervorragend zu manipulieren, nicht mehr. Es gab nun keine einfache Möglichkeit mehr, eine Seitenleiste auf einer Themenroute über eine relativ einfache Benutzeroberfläche für Endbenutzer anzuzeigen.

• Darüber hinaus führte Ember Glimmer-Komponenten ein, mit denen sich viel besser arbeiten ließ. (Layouts verwendeten die Widgets API, die zugunsten von Glimmer-Komponenten veraltet ist).

• Schließlich stellte das Discourse Core-Team einen neuen JSON-Editor für Theme-Komponenten-Einstellungen bereit, der die Bereitstellung komplexerer Einstellungen ermöglichte

• Anstatt das Layout-Plugin zu reparieren (TCs gab es damals, als Layouts entwickelt wurden, noch nicht), war es sinnvoll, es als Theme-Komponente neu zu erstellen, da wir die meisten Dinge, die wir brauchen, nur im Frontend erreichen können.

• Treten Sie ein in „Bars“ Prost!!

Bekannte Probleme

• Die obere Leiste klebt nicht (ich werde die entsprechende Einstellung möglicherweise entfernen, wenn ich sie nicht lösen kann).

Credits

• Geistiger Nachfolger des jetzt defekten Layouts Plugin, erstellt von @angus (Prost!), das uns viele Jahre gute Dienste geleistet hat.
• Verwendet das Parametersystem von Right Side Blocks (danke @pmusaraj!)

---

1. Der Begriff „Entdeckung“ (Route) bezieht sich auf die Hauptseiten der Themenliste (z. B. „Neueste“, „Neu“), auf denen Sie verfügbare Themen durchsuchen können, bevor Sie auf ein bestimmtes Thema klicken und sich damit befassen. ↩︎

2. Technisch gesehen auch eine „Entdeckungs“-Route, aber wir trennen diese in unterschiedliche Namen, damit Sie sie unterschiedlich behandeln können, wenn Sie möchten. ↩︎

3. Siehe hier für weitere Details. Damit dies optional bleibt (nicht alle Installateure von Bars möchten eine benutzerdefinierte Homepage), fügt Bars den erforderlichen Modifikator nicht in about.json hinzu. Sie müssen diesen daher im übergeordneten Theme oder einer anderen TC hinzufügen, um ihn zu aktivieren. ↩︎ ↩︎ ↩︎

4. Siehe das Tag Intersection Plugin ↩︎

[Lilly (Lillian Louis)]

Wow, das ist cool! Gute Arbeit, Robert. Danke, dass du das gemacht und verfügbar gemacht hast!

Gegabelt!

[thoka (Thomas Kalka)]

Ich stehe noch ganz am Anfang, was das Hinzufügen von benutzerdefinierten Widgets angeht, aber: Ich würde mir eine Option wünschen, Widgets in einer nicht scrollenden Fußzeile in der mobilen Ansicht hinzuzufügen.
Wäre dies mit einer zukünftigen Version dieser Komponente möglich?

[merefield (Robert)]

Derzeit sind keine zusätzlichen „Bars“ geplant, aber vielleicht, sobald sich die Dinge beruhigt haben und der TC eindeutig stabil ist …

… PR oder Sponsoring sind ebenfalls immer willkommen

[denvergeeks]

Das sieht fantastisch aus – Danke! Könnten Sie bitte ein Beispiel dafür geben, wie die Einstellungen für die Einbindung des Tag-Listen-Widgets in eine der Seitenleisten aussehen?

Zum Beispiel, laut der Anleitung sollte dies funktionieren…

Aber die linke Seitenleiste zeigt immer noch nur das große A…

[merefield (Robert)]

Zwei Dinge:

Erstens, hier sind ähnliche Einstellungen von StarZen:

Der Komponentenname ist tatsächlich derselbe wie der Dateiname in der Komponente (ich werde das zum OP hinzufügen)

https://starzen.space

Zweitens, es ist wirklich albern, aber man muss auf Speichern klicken und auf das Häkchen tippen, nachdem man auf Speichern geklickt hat.

Es ist ein doppeltes Speichern!

Das ist die Natur der aktuellen Theme-Einstellungen von Core, nicht von Bars. Ich werde vielleicht eine Notiz dazu im OP hinzufügen.

[denvergeeks]

@merefield

Zweitens, es ist wirklich albern, aber Sie müssen auf Speichern klicken und auf das Häkchen tippen, nachdem Sie auf Speichern geklickt haben.

Es ist ein doppeltes Speichern!

Ja, ich habe das doppelte Speichern gemacht

Trotzdem muss ich etwas übersehen, denn das Ergebnis ist dasselbe. Gibt es noch etwas, das ich zur Verfügung stellen kann, um zu helfen?

[merefield (Robert)]

Teile deine Einstellungen-JSON (Schaltfläche unten in TC).

[denvergeeks]

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Ihr component_name ist immer noch falsch, siehe mein Beispiel und Sie möchten vielleicht den Rest löschen.

[denvergeeks]

Hmm… OK, ich habe alle bis auf die erste gelöscht und den Namen so geändert, dass er mit Ihrem übereinstimmt (obwohl der Komponentenname vom TC kommt GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - wo finde ich, dass der richtige Komponentenname layouts-tag-list ist?)

Das Ändern des Komponentennamens im Modal scheint ihn jedoch nicht in den Einstellungen-JSON zu ändern oder die restlichen Elemente zu entfernen, selbst nach einem doppelten Speichern…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Wie ich oben erklärt habe (und nun im OP näher erläutert habe), ist der Komponentenname nicht der Name der Theme Component (die viele Ember Glimmer Components enthalten könnte), sondern der Name der tatsächlichen Ember Component:

also layouts-tag-list

Dies ist ein nützliches Missverständnis, ich werde es im OP weiter verdeutlichen, indem ich dieses Beispiel verwende.

Ich bin mir nicht sicher, warum Ihre Einstellung hartnäckig ist

Versuchen Sie, die Theme Component zu löschen und erneut hinzuzufügen und den gleichen Vorgang durchzuführen.

Oder aktualisieren Sie einfach Ihren Browser?

[ckshen]

Danke für die Arbeit @merefield!

Wie unterscheiden sich Discourse Bars funktional von „Right Sidebar Blocks“ mit benutzerdefiniertem HTML, abgesehen davon, dass der Standort nicht nur rechts sein muss?

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[merefield (Robert)]

Bars ist der spirituelle Nachfolger von Pavilions Layouts, das vor RSB kam.

Aber im Vergleich zu RSB, hauptsächlich Multi-Route- und Multi-Position-Unterstützung (Bars zielt darauf ab, die Nützlichkeit und Flexibilität von Layouts zu reproduzieren), ist die entscheidende Ergänzung die Unterstützung von Topic-Routen. Außerdem unterstütze ich derzeit keine params … Ich bin noch auf keinen Anwendungsfall gestoßen. Ich bündele auch keine Komponenten außer den großen Demo-Buchstaben – das ist beabsichtigt und soll eher ein Admin/Entwickler-Framework sein (ähnlich wie Layouts).

Die Roadmap könnte auch ehrgeiziger sein – wenn ich eine Finanzierung erhalte, füge ich möglicherweise die mobile Funktionalität hinzu, die Layouts hatte – jeder kann mich kontaktieren, um diese Arbeit zu sponsern.

[denvergeeks]

OK, ich habe sowohl die Bars TC als auch die Layouts-Tag-Liste TC gelöscht und neu installiert (ich habe versucht, sie einzeln und zusammen zu entfernen und wieder hinzuzufügen), aber die Ergebnisse sind alle gleich. Und ich habe jedes Mal aktualisiert, wie ich es zuvor auch getan habe. Ich habe auch meinen Browser-Cache gelöscht.

[merefield (Robert)]

Ich kann Ihr Problem mit festsitzenden Einstellungen nicht reproduzieren. Ich habe gerade eine linke Seitenleiste hinzugefügt und entfernt.

Ich wäre an weiteren Berichten über dasselbe interessiert.

[denvergeeks]

Vielen Dank für Ihre investierte Zeit – ich werde es später heute auf einigen meiner anderen Discourse-Instanzen versuchen und mich erneut melden.

[denvergeeks]

Ich habe jetzt auch alle Plugins entfernt, neu erstellt (und keine anderen TCs oder Themes installiert), und es ist eine frische Installation von letzter Nacht.

Falls es hilfreich ist, habe ich festgestellt, dass bei denselben Einstellungen wie oben die linke Seitenleiste zwar nirgendwo sonst angezeigt wird, aber auf der /latest-Route erscheint (wenn auch nur der Titel „Tags“, ohne Tags anzuzeigen).

---

---

---

---

Und hier ist die Einstellungs-JSON…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Sie müssen das selbst debuggen – überprüfen Sie Ihre Konsole, das Theme-CSS usw.

Bei mir funktioniert es:

Ich kann mich nicht erinnern, ob Layouts Tag List Tag Groups benötigt … könnte sein!

[denvergeeks]

@merefield

Ich kann mich nicht erinnern, ob die Layouts-Tag-Liste Tag-Gruppen benötigt…

Ja, das Aktivieren von Tag-Gruppen in den Einstellungen (und das anschließende Erstellen einiger Tag-Gruppen) hat die Tags erscheinen lassen.

Das Festlegen der Route für das Komponentenelement auf discovery zeigt jedoch immer noch nur die linke Leiste auf den Listen /latest, /new und /top an.

Könnten Sie so freundlich sein und mir eine Liste aller verfügbaren „Routen“ zeigen, die hier verwendet werden können?

Vielen Dank nochmals!