Abbiamo appena rilasciato una seconda iterazione della nostra ricostruzione del tema. Mentre il primo aggiornamento era un restyling visivo basato sul precedente tema Meta Branded, questa versione è sostanzialmente un nuovo tema ricostruito da zero. Il nuovo linguaggio del brand è stato già introdotto con la release precedente, quindi non ci sono grandi cambiamenti visibili da quel punto di vista. Ciò che è cambiato significativamente con questo aggiornamento è l’implementazione del tema stesso e ciò che essa rivela sulla direzione che stiamo prendendo per la personalizzazione di Discourse in generale.
Vi guiderò attraverso alcuni dettagli implementativi, partendo dagli elementi più piccoli:
Icone Lucide
Lucide è una raccolta open-source di icone moderne a tratto, e la stiamo adottando in diversi progetti di personalizzazione. Con questa iterazione l’abbiamo inclusa anche nel tema Meta Branded. Non ci sono piani per sostituire Font Awesome nel core di Discourse, ma il piano gratuito di Font Awesome offre solo una selezione limitata di icone a tratto, non sufficiente a formare un sistema coerente di icone a tratto. Il componente del tema è disponibile su Discourse Lucide Icons.
Modificatore del tema per limitare le palette di colori
Abbiamo aggiunto un nuovo modificatore del tema only_theme_color_schemes che limita le palette di colori disponibili per un determinato tema, sia per gli amministratori che per gli utenti nelle preferenze dell’interfaccia. Meta dispone di più palette selezionabili dagli utenti che entrerebbero in conflitto con l’identità visiva del tema Meta Branded. Con questo modificatore, vengono proposte come opzioni solo le palette incluse nel tema.
PR: FEATURE: add modifier to restrict theme color schemes
Layout a larghezza intera
Stiamo anche sperimentando alcune modifiche al componente Discourse Full-width per centrare meglio il contenuto principale nella pagina. Ci sono molti elementi dinamici nell’intestazione che complicano la configurazione e finora questa è una funzionalità sperimentale disponibile solo su un ramo del componente.
Trasformatore di valore per controllare la visibilità del Banner di Benvenuto
Abbiamo utilizzato un nuovo trasformatore di valore welcome-banner-display-for-route per controllare programmaticamente su quali route appare il Banner di Benvenuto core. Lo usiamo per garantire che il banner appaia solo sulla homepage personalizzata predefinita e non sulle pagine che un utente potrebbe aver impostato come propria pagina di atterraggio personale.
PR: DEV: Add welcome-banner-display-for-route value transformer
Questo ci porta ai due cambiamenti più significativi:
Homepage personalizzata tramite modificatore del tema
Il modificatore del tema custom_homepage è disponibile da quasi due anni, ma questa è la prima volta che lo utilizziamo per plasmare l’esperienza della homepage su Meta stessa. Stiamo introducendo una landing page personalizzata popolata con componenti in evidenza. Per il lancio iniziale, questo include categorie in evidenza selezionate e un’anteprima degli ultimi argomenti di discussione.
Abbiamo costruito questi componenti in evidenza utilizzando la nostra nuova API sperimentale Blocks, che ci porta al cambiamento più importante:
API Blocks: Primo utilizzo in produzione
L’API Blocks è un nuovo framework per creare layout modulari e componibili in Discourse. Consente agli sviluppatori di temi di assemblare pagine partendo da componenti autonomi e riutilizzabili che possono essere inseriti in aree di layout definite. Il tema Meta è la nostra prima implementazione in produzione di questo framework.
Il framework offre un ricco set di strumenti per gli sviluppatori: abilitando gli strumenti di sviluppo, è possibile ispezionare la struttura dei blocchi di qualsiasi pagina con un overlay integrato che visualizza tutte le aree di layout attive e i loro componenti.
Oltre alla homepage, stiamo utilizzando i blocchi anche per renderizzare banner personalizzati per le categorie che mostrano le sottocategorie di ciascuna categoria:
Questa è ancora una preview iniziale del sistema in un contesto di produzione. Prevediamo di pubblicare documentazione e altri esempi a breve.
PR: DEV: Add Block API for declarative, validated UI extension points














