Blocchi della homepage

Componente del tema
1
:information_source: Riepilogo Crea una homepage personalizzata con componenti a blocchi configurabili
:hammer_and_wrench: Repository Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Guida all’installazione Come installare un tema o un componente del tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

← Compila "repoName" e "repoURL" per il pulsante di installazione automatica →

Installa questo componente del tema

← Descrivi questo tema/componente in una o due frasi →
Questo componente combina le funzionalità di Right Sidebar Blocks e del percorso della homepage personalizzata. Inizializza il percorso e ti consente di organizzare i blocchi di contenuto sulla homepage, offrendo flessibilità nel layout e nella presentazione dei contenuti.

Di seguito sono riportate due viste di esempio: la prima mostra una homepage con blocchi di base impilati uno sull’altro, mentre la seconda dimostra lo stesso layout con stili personalizzati applicati:

Screenshot 2025-01-14 at 10-40-23 Homepage Blocks
Screenshot 2025-01-14 at 10-40-23 Homepage Blocks1486×1654 215 KB

Screenshot 2025-01-14 at 10-41-01 Homepage Blocks
Screenshot 2025-01-14 at 10-41-01 Homepage Blocks1486×2797 321 KB

Modifica dei blocchi

Puoi personalizzare i blocchi tramite le impostazioni del componente. Ogni blocco viene aggiunto specificando il nome del suo componente Ember:

Uno screenshot di un'interfaccia con menu a discesa multipli e campi di immissione del nome etichettati come block-banner, block-top-tags e block-upcoming-events, tra gli altri. (Didascalia dell'IA)
Uno screenshot di un'interfaccia con menu a discesa multipli e campi di immissione del nome etichettati come block-banner, block-top-tags e block-upcoming-events, tra gli altri. (Didascalia dell'IA)726×1152 46.5 KB

Dopo aver aggiunto un blocco, puoi regolarne le proprietà utilizzando i parametri disponibili:

L'immagine mostra un'interfaccia utente con campi di testo per un banner di blocco, comprese le opzioni di titolo, sottotitolo e classe. (Didascalia dell'IA)
L'immagine mostra un'interfaccia utente con campi di testo per un banner di blocco, comprese le opzioni di titolo, sottotitolo e classe. (Didascalia dell'IA)726×753 28.9 KB

Blocchi disponibili

Puoi aggiungere qualsiasi componente Ember utilizzando il suo nome. Inoltre, ho una raccolta di blocchi disponibili su Blocks · GitLab. Si tratta principalmente di variazioni di Right Sidebar Blocks.

Per informazioni dettagliate su ciascun blocco, come il nome del componente, i parametri disponibili e il layout del modello, fai riferimento al suo file README.

Una pagina di documentazione per il componente blocco Featured List, che descrive i parametri e il codice del modello per la creazione di un elenco in primo piano con più filtri. (Didascalia dell'IA)
Una pagina di documentazione per il componente blocco Featured List, che descrive i parametri e il codice del modello per la creazione di un elenco in primo piano con più filtri. (Didascalia dell'IA)964×1114 57.8 KB

23 Mi Piace
2

Questo è davvero fantastico, Manuel, buon lavoro! :+1:

4 Mi Piace
3

@nolo si potrebbe usare anche per creare pagine personalizzate e aggiungerle alla navigazione laterale?

4

Questa è una soluzione di layout per il percorso della homepage personalizzata. Naturalmente puoi usare qualcosa di simile su altri percorsi personalizzati. Ma aggiungere e integrare questi percorsi nella tua app è un’altra attività.

1 Mi Piace
7

Errore: Tentativo di risolvere un componente dinamico con una definizione stringa, block-banner in un template in modalità strict. In modalità strict, è vietato utilizzare stringhe per risolvere le definizioni dei componenti. È possibile invece importare la definizione del componente e utilizzarla direttamente.
Mi compare questo errore.

1 Mi Piace
8

Grazie per la segnalazione @xin_wei. Anche se non riesco a riprodurlo, nella versione Discourse 3.6.0.beta1-dev e utilizzando il mio componente a blocchi da Manuel Kostka / Discourse / Blocks / Banner · GitLab.