Utilizzo della nuova funzione personalizzazione della homepage

[manuel (Manuel Kostka)]

Sto provando la nuova funzionalità di homepage personalizzata: https://github.com/discourse/discourse/pull/26291

@pmusaraj Mi chiedo quale sia il miglior approccio per aggiungere componenti?

1. L’aggiunta del modificatore custom-homepage abilita la route discovery.custom e mostra un avviso informativo predefinito, renderizzato sull’outlet custom-homepage:

   

2. Aggiungo un componente all’outlet e questo viene renderizzato al suo posto:

   
   

3. Tuttavia, quando aggiungo più di un componente, ricevo un errore:

   
   

4. Posso aggiungere altri componenti ad altri outlet. Ecco una vista con gli outlet dei plugin visibili:

   
   

Quindi mi chiedo come dovrebbe funzionare il nuovo outlet:

• In un certo senso, non avrei bisogno dell’outlet. Posso semplicemente usare gli altri disponibili e limitare i componenti alla route discovery.custom.
• Anche se sembra che debba mettere almeno un componente sull’outlet, altrimenti viene renderizzato l’avviso predefinito? Mettere un template vuoto lì non funziona.
• D’altra parte, se potessi aggiungere più componenti all’outlet, non avrei bisogno di alcuna logica di route. I componenti verrebbero visualizzati solo sulla homepage perché l’outlet non sarebbe disponibile su altre route?

[merefield (Robert)]

@manuel

Tuttavia, quando aggiungo più di un componente, ricevo un errore:

Non c’è da stupirsi?

Metti un singolo file di template qui e usalo per fare riferimento ai tuoi Componenti nella cartella Componenti (di cui puoi averne molti)

<MyFirstComponent />
<MySecondComponent />
<MyThirdComponent />

O quello che vuoi… attieniti a un solo template in questa cartella?

[manuel (Manuel Kostka)]

@merefield

Non è sorprendente?

Pensavo fosse perché funziona con altri punti vendita? Come nello screenshot qui sopra..

[merefield (Robert)]

Oh scusa, hai ragione, sembra legale su Outlets (di solito) pubblicare più di un file di template in un singolo Componente Tema (ero consapevole che gestiva conflitti tra Componenti Tema e plugin, quindi tutti ottengono il rendering). Curioso.

Immagino però: perché vorresti farlo? Avrai meno controllo sul layout?

Un template ti costringe a comporre l’intero layout in una sola volta con tutti i sotto-componenti che desideri?

Il comportamento sembra però incoerente…

[manuel (Manuel Kostka)]

Se costruissi una homepage personalizzata, vorrei poter renderizzare più componenti esistenti su di essa. E come menzionato, questo funziona già quando si utilizzano altri outlet disponibili e si limitano i componenti al percorso della homepage personalizzata.

Se posso aggiungere solo un componente all’outlet specifico della homepage personalizzata, e devo anche aggiungerne uno per disabilitare il yield predefinito, questo in realtà limita il mio controllo sul layout.

[merefield (Robert)]

Ma perché non puoi fare riferimento a tutti quei componenti in un unico template?

Oh perché provengono da diversi Componenti del tema?

Penso che qui stessimo parlando di cose diverse.

Quando dico di mettere tutti i tuoi Componenti (Ember) nella cartella Componenti, intendo esattamente questo, ma in un unico Componente del tema.

Penso che il punto cruciale sia semplicemente: “perché questo outlet si comporta diversamente?”. Capisco che stai cercando di combinare diversi Componenti del tema.

[manuel (Manuel Kostka)]

@merefield

Oh perché provengono da diversi componenti del tema?

Sì, questa è l’idea. Ho appena usato i semplici template di testo sopra come illustrazione. Ad esempio, uso Featured Lists. E posso renderizzarlo sull’outlet con queste impostazioni:

Ma quando voglio renderne un altro allo stesso modo, ottengo l’errore del connettore multiplo.

@merefield

Penso che il punto cruciale di questo sia semplicemente: “perché questo outlet si comporta in modo diverso?”

[pmusaraj (Penar Musaraj)]

Grazie per aver testato questo @manuel e per le domande.

@merefield

Penso che il nocciolo della questione sia semplicemente: “perché questo outlet si comporta in modo diverso?”

Non lo sapevo nemmeno io, ma ho cercato e ho capito approssimativamente perché. Recentemente abbiamo introdotto una distinzione tra gli outlet dei plugin classici e gli outlet dei plugin wrapper, in questa PR dell’anno scorso: DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub

Gli outlet dei plugin wrapper sono quelli che consentono un solo connettore, gli altri consentono più connettori. Per illustrare, il codice attuale dell’outlet del plugin principale è questo:

<PluginOutlet @name="custom-homepage">
  {{#if this.currentUser.admin}}
    <p class="alert alert-info">
      {{i18n "custom_homepage.admin_message"}}
    </p>
  {{/if}}
</PluginOutlet>

e consente un solo connettore. Ma se cambio il codice dell’outlet principale in:

<PluginOutlet @name="custom-homepage" />

Permetterà a più template di connettori di funzionare correttamente. Potremmo apportare questa modifica al core per questo particolare outlet, ma questa differenza è più generale. Sembra un po’ opaco per gli sviluppatori, però, capisco il tuo punto.

Nota anche che più connettori hanno un problema di ordinamento, per quanto ne so non abbiamo un meccanismo per decidere l’ordinamento.

Penso che l’approccio migliore qui, in ogni caso, sia quello suggerito da @merefield: usare un template e poi fare riferimento ai componenti Ember da esso.

@manuel

Anche se sembra che debba mettere almeno un componente sull’outlet, altrimenti viene visualizzato l’avviso predefinito?

L’avviso predefinito viene mostrato solo agli amministratori, per tua informazione.

[manuel (Manuel Kostka)]

Grazie per le spiegazioni!

Giocando ancora un po’ con questo… è davvero nuovo e un piacere da usare!

Ho usato tre componenti esistenti per quel layout ed è quello che mi aspetterei essere un approccio comune quando si costruisce una homepage personalizzata. Ho potuto aggiungere solo uno di questi all’outlet del wrapper, ecco perché penso che avere un outlet semplice qui sarebbe più utile.

[manuel (Manuel Kostka)]

Un’altra osservazione: ho inserito un link nella barra laterale usando l’URL /custom:

Non viene evidenziato quando si è nel percorso personalizzato.

Se ho capito bene la logica con le evidenziazioni della barra laterale, dovrebbe essere evidenziato anche quando si è nell’URL principale /.

[pmusaraj (Penar Musaraj)]

Ho visto più chiaramente il tuo problema dopo aver dato una rapida occhiata al componente Featured Lists. Un’opzione è rifattorizzare quel componente e farlo produrre tutti gli elenchi in un unico componente Ember. Quindi potresti aggiungere quel componente a un outlet wrapper di plugin.

Un’altra opzione è aggiungere un secondo plugin outlet al modello della homepage personalizzata, qualcosa come <PluginOutlet @name="below-custom-homepage"/>.

Potrei aggrapparmi a questo outlet custom-homepage con un messaggio per gli amministratori senza un buon motivo, ad essere onesti. Quell’avviso non è poi così utile…

@manuel

Non viene evidenziato quando si è sulla rotta personalizzata.

Sì, può essere complicato. Nel mio test locale proprio ora, /custom non funziona correttamente. È meglio usare /, che instrada correttamente. Ma non viene ancora evidenziato.

[manuel (Manuel Kostka)]

@pmusaraj

Sì, può essere complicato. Nel mio test locale proprio ora, /custom non funziona correttamente. È meglio usare /, che instrada correttamente. Ma non evidenzia ancora.

Sembra essere un problema comune. Se uso /, anche le altre route impostate come landing page non vengono evidenziate.

@pmusaraj

Potrei aggrapparmi a questo outlet custom-homepage con un messaggio per gli amministratori senza un buon motivo, ad essere onesti. Quel avviso non è poi così utile…

Sì, potrei anche immaginare che l’avviso venga visualizzato in modo diverso. Il vantaggio principale degli outlet wrapper sembra essere che posso cedere condizionalmente codice principale o renderizzare codice personalizzato. Ma questo probabilmente non sarebbe mai un caso per quel messaggio informativo.

@pmusaraj

Vedo il tuo problema più chiaramente dopo aver dato una rapida occhiata al componente Featured Lists . Un’opzione è rifattorizzare quel componente e farlo emettere tutte le liste in un unico componente Ember. Quindi potresti aggiungere quel componente a un outlet wrapper di plugin.

Ci deve essere un malinteso. Il componente racchiude già tutte le liste in un unico componente wrapper e lo renderizza su qualsiasi outlet dato:

Quindi posso aggiungere il componente senza problemi all’attuale outlet wrapper sulla homepage personalizzata.
Quello che non posso fare è usare quell’outlet per renderizzare più di un componente standalone sulla homepage personalizzata. Componenti che avrei installato come componenti tema, come questi tre:

La mia ipotesi è che fare un tale uso di diversi componenti tema standalone per costruire una homepage personalizzata sarebbe l’approccio comune. Piuttosto che costruirlo tutto da zero in un unico tema.

@pmusaraj

Un’altra opzione è aggiungere un secondo outlet plugin al template della homepage personalizzata, qualcosa come <PluginOutlet @name="below-custom-homepage" />.

Se prendi in considerazione l’aggiunta di un altro outlet o la modifica della configurazione dell’outlet, potrei fornire ulteriori feedback sull’uso finora. Anche se avvolgerò quella tana di coniglio nei dettagli

Quindi mi sono reso conto che l’outlet viene renderizzato all’interno dell’elemento main-outlet. La struttura generale di questi elementi è quindi:

• wrapper main-outlet
  • sidebar-wrapper
  • main-outlet
    • outlet custom-homepage

Come designer, non sono poi così flessibile nell’organizzare gli elementi su una homepage personalizzata usando questo outlet. Per il design condiviso sopra, ho preferito usare l’outlet before-main-outlet, non solo perché posso inserire più di un componente, ma anche perché non annida i componenti all’interno dell’elemento main-outlet.
La struttura come condivisa nello screenshot sopra appare così:

• wrapper main-outlet
  • sidebar-wrapper
  • componente: banner di ricerca
  • componente: argomenti in primo piano
  • componente: liste in primo piano
  • main-outlet

Il vantaggio è che posso disporre gli elementi attraverso l’intera larghezza del wrapper main-outlet e non solo all’interno dell’elemento main-outlet. Per illustrare il punto, se renderizzassi uno dei componenti sull’attuale outlet custom-homepage, verrebbe renderizzato annidato all’interno dell’elemento main-outlet in questo modo:

La massima flessibilità per i design personalizzati, a mio parere, sarebbe offerta da un outlet plugin che è posizionato

• come figlio diretto del wrapper main-outlet (simile all’outlet before-main-outlet)
• all’interno di un div wrapper

Quel div wrapper raggrupperebbe tutti i componenti aggiunti ad esso e consentirebbe un facile ordinamento. Una tale struttura apparirebbe quindi così:

• wrapper main-outlet
  • sidebar-wrapper
  • wrapper custom-homepage
    • componente: banner di ricerca
    • componente: argomenti in primo piano
    • componente: liste in primo piano
  • main-outlet

Quindi questo è il mio feedback come designer. Suppongo che spetti a te decidere quanto questo si allinei con quello che considereresti un’applicazione comune per la funzionalità della homepage personalizzata.

[merefield (Robert)]

Presumibilmente questa pagina è “superficiale” nel senso che apparirà all’utente ma non a “Googlebot” e quindi non verrà indicizzata?

[pmusaraj (Penar Musaraj)]

Corretto, sì, per la visualizzazione del crawler ho scelto di visualizzare solo il menu principale. Non posso sapere dall’app Rails cosa un tema produrrà in questo percorso.

@manuel

Se prendi in considerazione l’aggiunta di un’altra uscita o la modifica della configurazione dell’uscita, potrei darti ulteriori feedback da quanto ho usato finora.

Sto pensando ai suggerimenti qui @manuel, mi prenderò del tempo a breve per testare alcune modifiche. Ti prego di con me.

[merefield (Robert)]

Ho aggiunto il supporto per questa funzionalità in Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield

[manuel (Manuel Kostka)]

Un problema che ho riscontrato: volevo visualizzare il componente Homepage Feature sulla homepage personalizzata. Ma poi gli argomenti non vengono filtrati su questo percorso. Il componente mostra semplicemente qualsiasi argomento recente che abbia un’immagine.

Il codice nel componente è:

    const topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: {
        tags: [`${settings.featured_tag}`],
        order: sortOrder,
      }

E sembra che i parametri non vengano applicati sulla homepage personalizzata. Altrimenti funziona bene. Non sono sicuro del perché succeda?

Modifica: uso lo stesso metodo sul componente Featured Lists. Quando si utilizza questo componente sulla homepage personalizzata, anche il filtro non viene applicato. Ma solo sulla prima lista… quando ce ne sono altre, le liste successive vengono tutte filtrate correttamente.

[pmusaraj (Penar Musaraj)]

Interessante, non sono sicuro del perché, forse c’è una logica nello store topicList legata ai percorsi di discovery? La homepage personalizzata non è un percorso di discovery.

Sono curioso, lo stesso componente con i parametri funziona bene in un percorso di amministrazione? O in un percorso del profilo utente? Hai per caso modo di controllare?

@tynaut ha riscontrato un problema simile, quindi è probabile che ci sia qualcosa da affrontare qui.

[manuel (Manuel Kostka)]

Ho provato con il componente Featured Lists, ha già un’impostazione per mostrare il componente ovunque. Questo non include le route di amministrazione, ma ho provato su tutte le altre (pagine statiche, profili utente,..) e sembra funzionare ovunque tranne che sulla homepage personalizzata.

L’altra cosa strana è che, come menzionato, filtra solo la prima lista. Ad esempio, qui filtro due liste, una per il tag “featured”, una per la categoria “General”, ed è così che le liste vengono visualizzate su tutte le altre route:

Solo sulla route della homepage personalizzata, vengono visualizzate così:

Quindi la prima lista non filtra più per il tag, ma la seconda lista filtra per la categoria. E quando inverto l’ordine delle liste, la prima lista non filtra per categoria, ma la seconda filtra per il tag:

[pmusaraj (Penar Musaraj)]

Ho trovato un po’ complicato riprodurre correttamente questo con il componente Featured Homepage, mescola troppe altre condizioni.

Posso facilmente riprodurlo con un componente semplificato. L’ho inserito in un repository di esempio qui: GitHub - pmusaraj/discourse-sample-custom-homepage

Il componente sample-list lì dovrebbe recuperare solo gli argomenti con il tag featured, ma non lo fa (recupera i primi 3 argomenti per me). Se rimuovo il modificatore custom_homepage dal file about.json di quel tema, allora vengono recuperati gli argomenti giusti.

Troverò qualcuno più esperto del servizio store per dare un’occhiata. Grazie!

[pinder99 (Pushpender Singh)]

Ciao

Puoi per favore spiegare come aggiungere un componente (banner di ricerca o un componente personalizzato già installato sul forum) all’interno del file home.hbs per farlo visualizzare sulla nuova homepage personalizzata?

Grazie