Discourse Bars :birra: 🍸 (un framework per la barra laterale)

[merefield (Robert)]

Panoramica

Un componente tema che ti consente di disporre i componenti^[1] nelle barre superiore e laterale.

• Specifica un set di “widget” distinti per Percorso e Posizione.
• Supporta configurazioni per ciascuno di: discovery^[2], topic, tag^[3], category^[3:1], categories^[3:2] o tags-intersection^[4]
• Le “Barre” possono essere: superiore, sinistra, destra o posizione destra alternativa.
• Ogni barra può essere compressa o chiusa (aggiorna il browser per reimpostare la chiusura). Possono essere ridotte al minimo per impostazione predefinita.
• Gestisce la barra laterale ufficiale, ma se intendi utilizzare una barra laterale sinistra, si consiglia la modalità a discesa della barra laterale ufficiale.
• Viene fornito con impostazioni di esempio esistenti che mostrano alcune lettere maiuscole, in parte come demo e in parte in modo che tu possa vedere le impostazioni di esempio. Eliminale e sostituiscile con i nomi dei tuoi componenti.
• Fornisce un componente: bars-custom-html (vedi impostazioni di esempio precompilate) - ma i componenti di molti componenti tema e plugin esistenti sono compatibili.
• Il supporto mobile non è ancora implementato.

Link rapidi

Ottieni il codice	https://github.com/merefield/discourse-tc-bars
Vedi il codice	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
Guida all’installazione	Installing a theme or theme component

Ti piace questo componente tema? Per favore, metti su GitHub !

Esempio gratuito:

Al primo caricamento:

Alcune cose importanti da notare su questo TC!

• Questo componente tema è principalmente destinato a sviluppatori e amministratori che hanno una certa comprensione tecnica dello sviluppo di temi. Se non sei sufficientemente tecnico e hai bisogno di aiuto per implementare barre laterali utilizzando le barre, puoi assumere me o uno sviluppatore in Marketplace

• Questo componente tema è destinato a fornire un framework per il supporto delle barre laterali. Non fornisce e non è destinato a fornire una finitura visiva finale che dovrai aggiungere nel tuo tema con CSS aggiuntivo. Tuttavia, fa molto lavoro per te e ti dà meno cose a cui pensare e forse anche la capacità di fare cose che non potevi fare prima …

Considerazioni sui componenti

• Devi specificare un nome di componente. Il nome del componente è infatti lo stesso del nome del file nella directory del tema, tc o plugin component senza il suffisso.

  • il nome del componente non è il nome del componente tema (che potrebbe contenere molti componenti Glimmer Ember), è il nome del file del componente Ember effettivo , quindi, ad esempio:
  

  quindi layouts-tag-list

• Possono provenire da un componente tema o plugin esistente. I componenti esistenti potrebbero funzionare. Gli esempi sono:

  • 🏷️ Bars Tag List Component
  • Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
  • Discourse AI Topic Summary 🤖 … e forse anche:
  • Il widget Classifica: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (fammi sapere se lo provi qui sotto!)

• Richiede una certa competenza per creare componenti

  • Ma prova a creare il tuo componente in un altro componente tema e assicurati che entrambi siano attivi nello stesso tema.

• I componenti devono recuperare i propri dati (non possono utilizzare i modelli di passaggio dei plugin outlet purtroppo a causa degli specifici plugin outlet richiesti per disporre le cose in questo modo)

  • Pronto all’uso, puoi utilizzare solo i dati JSON API esistenti da, ad esempio, Discourse core o quelli forniti da un plugin esistente. Se hai bisogno di dati personalizzati che non puoi recuperare dalle API correnti, puoi assumere me o qualcuno in Marketplace per aiutarti.

• Potrebbe essere necessario personalizzare la barra laterale e i confini dei componenti a proprio piacimento. (di nuovo, se hai bisogno di aiuto, considera di assumere uno sviluppatore).

  • L’uso strategico di ombreggiature e bordi può rendere le cose molto belle - sii artistico!

Perché

• Con l’aggiornamento di Discourse core a Ember 5, il trucco utilizzato dal plugin Layouts di Pavilion per fornire un eccellente modo per manipolare il layout di Discourse ha smesso di funzionare. Non c’era più un modo semplice per mostrare una barra laterale su un percorso di argomento tramite un’interfaccia utente relativamente semplice per l’utente finale.

• Inoltre, Ember ha introdotto i componenti Glimmer che erano molto più piacevoli da usare. (Layouts utilizzava l’API Widgets che è deprecata a favore dei componenti Glimmer).

• Infine, il team principale di Discourse ha fornito un nuovo editor JSON per le impostazioni dei componenti tema, che ha reso possibile la distribuzione di impostazioni più complesse

• Piuttosto che correggere il plugin Layouts (i TC non esistevano ai tempi di Layouts), aveva senso ricostruire come componente tema, perché possiamo ottenere la maggior parte delle cose di cui abbiamo bisogno solo nel front-end.

• Entra in “Bars” Saluti!!

Problemi noti

• La barra superiore non rimane fissa (potrei rimuovere l’impostazione corrispondente se non riesco a risolverla).

Crediti

• Successore spirituale del Plugin Layouts ora rotto, costruito da @angus (Saluti!) che ci è servito bene per molti anni.
• Utilizza il sistema di parametri di Right Side Blocks (grazie @pmusaraj!)

---

1. il termine ‘discovery’ (percorso) si riferisce alle pagine principali dell’elenco degli argomenti (ad esempio, “Ultimi”, “Nuovi”) che consentono di sfogliare gli argomenti disponibili prima di fare clic e approfondire uno specifico. ↩︎

2. tecnicamente anche un percorso “discovery”, ma li stiamo separando in nomi distinti in modo che tu possa trattarli in modo diverso se lo desideri. ↩︎

3. Vedi qui per maggiori dettagli. Affinché ciò rimanga opzionale (non tutti gli installatori di Bars vorranno una homepage personalizzata), Bars non aggiunge il modificatore richiesto in about.json, quindi devi aggiungerlo nel tema padre o in un altro TC per attivarlo. ↩︎ ↩︎ ↩︎

4. Vedi il Plugin Tag Intersection ↩︎

[Lilly (Lillian Louis)]

Wow, questo è fantastico! Bel lavoro Robert. Grazie per averlo fatto e reso disponibile!

forked!

[thoka (Thomas Kalka)]

Sono proprio all’inizio dell’apprendimento di come aggiungere widget personalizzati, ma: mi piacerebbe un’opzione per aggiungere widget in un piè di pagina non scorrevole nella visualizzazione mobile. Sarebbe possibile con una versione futura di questo componente?

[merefield (Robert)]

Nessun piano per aggiungere ulteriori “bar” in questa fase, ma forse una volta che le cose si saranno stabilizzate e il TC sarà chiaramente stabile…

… PR o sponsorizzazioni sono sempre benvenuti

[denvergeeks]

Sembra fantastico, grazie! Potresti fornire un esempio di come sono le impostazioni per includere il widget Elenco Tag in una delle barre laterali?

Ad esempio, dalle istruzioni sembra che questo dovrebbe funzionare…

Ma la barra laterale sinistra mostra ancora solo la ‘a’ grande…

[merefield (Robert)]

Due cose:

Innanzitutto, ecco impostazioni simili da StarZen:

Il nome del componente è di fatto lo stesso del nome del file nel Componente (lo aggiungerò all’OP)

https://starzen.space

In secondo luogo, è davvero sciocco, ma devi premere Salva e fare clic sulla spunta dopo aver premuto Salva.

È un doppio Salva!

Questa è la natura dell’attuale impostazione del tema di core, non di bars. Potrei aggiungere una nota a riguardo nell’OP.

[denvergeeks]

@merefield

In secondo luogo, è davvero sciocco, ma devi premere Salva e toccare il segno di spunta dopo aver premuto Salva.

È un doppio Salva!

Sì, ho fatto il doppio Salva

Ancora, devo perdermi qualcosa perché il risultato è lo stesso. C’è qualcos’altro che posso fornire per aiutare?

[merefield (Robert)]

Condividi il tuo json delle impostazioni (pulsante in basso su 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)]

Il tuo component_name è ancora sbagliato, vedi il mio esempio e potresti voler cancellare il resto.

[denvergeeks]

Hmm… OK ho eliminato tutto tranne il primo e ho cambiato il nome per farlo corrispondere al tuo (anche se il nome del componente proviene da TC 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. - dove troverei che il nome corretto del componente è layouts-tag-list?)

Tuttavia, cambiare il nome del componente nella finestra modale non sembra cambiarlo nel JSON delle impostazioni, né rimuovere gli altri elementi, anche dopo un doppio salvataggio…

[
	{
		"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)]

Come ho spiegato sopra (e ho ora elaborato nell’OP), il nome del componente non è il nome del Componente Tema (che potrebbe contenere molti Componenti Ember Glimmer), è il nome del reale Componente Ember:

quindi layouts-tag-list

Questo è un utile malinteso, chiarirò ulteriormente nell’OP, usando questo esempio.

Non sono sicuro del perché la tua impostazione sia “appiccicosa”

Prova a eliminare il Componente Tema e a riaggiungerlo, seguendo lo stesso processo.

O semplicemente aggiorna il tuo browser?

[ckshen]

Grazie per il lavoro @merefield!

Funzionalmente, in cosa differiscono le Discourse Bars dai blocchi della barra laterale destra con HTML personalizzato, oltre al fatto che la posizione non deve essere necessariamente solo a destra?

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 è il successore spirituale di Layout del Paviglione che è venuto prima di RSB.

Ma rispetto a RSB, il supporto multi-route e multi-posizione principalmente (l’obiettivo di Bar è riprodurre l’utilità e la flessibilità dei Layout), l’aggiunta critica è il supporto delle route degli argomenti. Inoltre, al momento non supporto params… non ho ancora incontrato un caso d’uso. Inoltre, non includo alcun componente oltre alle lettere grandi dimostrative - questo è deliberato e inteso più come un framework per amministratori/sviluppatori (molto simile a Layout).

La roadmap potrebbe essere più ambiziosa - se ottengo finanziamenti potrei aggiungere la funzionalità mobile che Layout aveva - chiunque è libero di contattarmi per sponsorizzare quel lavoro.

[denvergeeks]

OK, ho disinstallato e reinstallato sia i TC delle barre che i TC dell’elenco dei tag dei layout (ho provato a rimuoverli e riaggiungerli sia singolarmente che insieme), ma i risultati sono sempre gli stessi. E ho anche aggiornato ogni volta come avevo fatto prima. Ho anche svuotato la cache del mio browser.

[merefield (Robert)]

Non riesco a riprodurre il tuo problema con le impostazioni bloccate. Ho appena aggiunto e rimosso una barra laterale sinistra.

Sarei interessato ad altri resoconti dello stesso problema.

[denvergeeks]

Grazie per il tempo che hai dedicato ai tentativi: ci riproverò più tardi oggi su alcune delle mie altre istanze di Discourse e ti farò sapere di nuovo.

[denvergeeks]

Ho anche rimosso tutti i plugin, ricostruito (e non ho altri TC o temi installati), ed è un’installazione pulita da ieri sera.

Nel caso fosse utile, ho scoperto che, con le stesse impostazioni di cui sopra, mentre la barra laterale sinistra non appare da nessun’altra parte, viene visualizzata sul percorso /latest (sebbene solo il titolo “Tags”, senza mostrare alcun tag.)

---

---

---

---

Ed ecco il json delle impostazioni…

[
	{
		"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)]

Dovrai fare il debug da solo: controlla la console, il CSS del tema, ecc.

Funziona per me:

Non ricordo se l’elenco dei tag di Layout richiede gruppi di tag… potrebbe essere necessario!

[denvergeeks]

@merefield

Non ricordo se Layouts Tag List richiede Tag Groups…

Sì, abilitare i Gruppi di Tag nelle impostazioni (e poi crearne alcuni) ha fatto apparire i tag.

Tuttavia, impostare il percorso per l’elemento del componente su discovery mostra ancora solo la barra sinistra negli elenchi /latest, /new e /top.

Potresti avere la gentilezza di indicarmi un elenco di tutti i “percorsi” disponibili che possono essere utilizzati qui?

Grazie ancora!