Nel primo post c’è un link a Github con commenti che spiegano la funzionalità. Credo che questa sia ancora una funzionalità sperimentale e per provarla è necessario utilizzare e Installare l’app console Discourse Theme CLI per aiutarti a creare temi.
1 Mi Piace
grazie per la risposta manuel, sto già usando la cli, i documenti git mostrano come aggiungere l’html personalizzato, non il componente effettivo, voglio aggiungere il banner di ricerca che è già installato sul forum, posso chiamarlo in home.hbs o devo creare un nuovo banner di ricerca html da usare
Che ne dici di mostrarlo sulla homepage allora?
1 Mi Piace
sì questo è il problema, devo aggiungerlo alla homepage, ne ho aggiunto uno personalizzato ora ne ho 2, ne rimuovo uno dal tema grazie ancora, molto apprezzato
1 Mi Piace
Come accennato, quando ci sono più iterazioni funziona nelle successive e solo la prima volta il filtro non viene applicato. Quindi funzionerebbe quando aggiungo un’esecuzione iniziale a secco allo store:
Non so come eseguire correttamente il debug di questo problema, ma forse aiuta a restringere il campo del problema.
3 Mi Piace
Sembra una cache che ha bisogno di essere riscaldata.
2 Mi Piace
Sì, ha a che fare con il modo in cui precarichiamo i dati. Ho una PR pronta con una potenziale soluzione: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
La unirò all’inizio della prossima settimana.
5 Mi Piace
La PR qui précède a maintenant été fusionnée @manuel, elle devrait résoudre le problème pour vous. Merci encore pour le rapport !
2 Mi Piace
Ho notato oggi che l’aggiunta di un componente a una route tramite il nuovo metodo consigliato non funziona quando si utilizza questo modificatore di tema.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
L’unico modo in cui funziona è javascripts/connectors/custom-homepage/welcome-banner.hbs
4 Mi Piace
Sembra funzionare per me.. Stai già renderizzando un altro componente? Penso che ci fosse il problema che funziona solo con uno. O è perché lo sto usando solo su stabile in questo momento.
3 Mi Piace
Dovrò testare ancora un po’, non sono sicuro del perché questo non funzioni per me al momento.
2 Mi Piace
Lo sto usando molto, insieme al mio componente Homepage Blocks. Due suggerimenti:
Classi predefinite
Ho modificato il componente in modo che aggiunga sempre una classe homepage al body e una classe active a un link della barra laterale con href=\"/custom\". Queste funzionalità potrebbero probabilmente essere predefinite per il modificatore?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(Inizialmente volevo aggiungere il link della barra laterale per impostazione predefinita, ma non poter modificare tale link dall’interfaccia mi sembra un vero svantaggio, vedi How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Snappy First Paint
Non saprei come affrontare tecnicamente questo aspetto. Ma mi chiedo, se atterriamo su una homepage personalizzata, che tipicamente mostra una selezione limitata di contenuti, potremmo migliorare la FCP (First Contentful Paint) per la homepage e renderla già mentre il resto dell’app è in caricamento? Forse sto fraintendendo la natura dell’architettura single-app qui… sembra solo un po’ deludente essere presentati prima all’animazione di caricamento, per poi atterrare su una pagina piuttosto semplice, che di per sé potrebbe essere lì quasi istantaneamente.
4 Mi Piace
Forse… non sono sicuro. È relativamente facile aggiungere questa classe ora a qualsiasi modello di componente, basta usare l’helper bodyClass. Ad esempio, in un tema separato facciamo questo:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Raggiunge lo stesso risultato dell’hook onPageChange, ma è più affidabile. Imposterà quella classe solo al corpo mentre il componente viene renderizzato.
Se il componente ha già tutti i dati di cui ha bisogno, allora sì, non c’è motivo per cui non possa essere renderizzato con il resto dell’app. Nella maggior parte dei casi, tuttavia, il componente dovrà effettuare una richiesta per ottenere dati aggiuntivi, il che attiverà l’indicatore di caricamento. Non riesco a pensare a un modo semplice per velocizzare quel caricamento, ad essere sinceri.
Già che ci siamo, abbiamo apportato un ulteriore miglioramento a questa funzionalità. Fino a pochissimo tempo fa, la vista crawler della homepage personalizzata non era personalizzabile. Ora lo è, tramite un outlet HTML lato server: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 Mi Piace
Modificavo il mio tema utilizzando l’interfaccia di amministrazione, ma poiché ora ricevo un avviso di deprecazione, sto invece esaminando l’opzione custom-homepage.
Ho migrato il mio \u003chead\u003e e il css seguendo questo esempio. Il mio tentativo è qui. Fin qui tutto bene.
Il problema ora è come inserire la barra di ricerca e il componente ‘Who’s Online’.
Nel mio precedente \u003chead\u003e ho semplicemente aggiunto {{whos-online}} e {{search-menu}} dove li volevo nel codice, ma questo non funziona qui - non riesco a trovare come inserirli correttamente.
Qualcuno potrebbe indicarmi la giusta direzione o conoscere la sintassi corretta?
Il risultato finale dovrebbe assomigliare a questo (attualmente ho ripristinato il mio precedente codice, presto obsoleto).
Ho dato una rapida occhiata localmente e ho riscontrato un problema con il componente WhosOnline. Ma dopo aver riavviato il server, ha funzionato bene. Il codice che ho usato nel componente della homepage era:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Tieni presente, tuttavia, che SearchMenu è sempre presente, poiché fa parte del core, mentre <WhosOnline /> proviene da un plugin ed è registrato solo se il plugin è abilitato.
3 Mi Piace
That solved the Who’s Online and Search Menu! Awesome. Now I just need to figure out the syntax for getting the feed I’m currently seeing here.
Currently it is being shown by just hiding everything else on the page except the feed, inserting the hero, whos online, search menu and links, and then positioning the feed relative to these by overriding the css. Not great.
I’m close to being able to do a custom homepage layout where I can place all the pieces in their proper places, but am missing how to grab the feed. I’ve tried inspecting the current page with Ember and checked out the discourse app components for how to import it but no success.
Any clues?
Utilizzerei un componente come Featured Lists per mostrare un elenco di argomenti con un numero limitato di argomenti sulla homepage. Credo che se inserisci l’elenco principale, ottieni un elenco infinito che si carica in modo incrementale. Forse è quello che vuoi? Anche se, perché preoccuparsi allora di aggiungere una homepage separata, piuttosto che costruire la tua landing page direttamente su quella vista dell’elenco di argomenti?
Potresti anche dare un’occhiata al mio componente Homepage Blocks per organizzare il layout della tua homepage. Puoi aggiungere componenti e organizzarne l’ordine tramite un editor. Il componente aggiunge anche una classe del corpo homepage e un elemento wrapper aggiuntivo homepage-blocks che puoi utilizzare per una migliore stilizzazione reattiva. Ad esempio, potresti definire una griglia sul wrapper e regolare il tuo layout a seconda della larghezza, in modo da avere un layout con una barra laterale e contenuto principale su schermi larghi e un layout a riga singola con tutto il tuo contenuto impilato su viste più strette. Al momento gli elementi della tua barra laterale si riducono semplicemente, il che potrebbe non apparire ideale su alcune larghezze.
Questo sarebbe un semplice esempio di una griglia della homepage che cambia layout a seconda della larghezza: https://forum.zolidar.com.
1 Mi Piace