Personalizzare la pagina /about con le bio degli utenti

Sviluppatore
1

La pagina /about predefinita per un sito Discourse che visualizza informazioni solo per moderatori e amministratori mostra solo il nome utente, il nome e il titolo di ciascun utente. Come posso personalizzare la pagina /about in modo che visualizzi anche il contenuto della sezione “About me” del profilo di ciascun utente?

Comprendo l’idea generale delineata qui:

  • definire un componente
  • definire un template
  • creare un file connettore per utilizzare un outlet esistente

Tuttavia, non esiste un outlet che si adatti meglio al mio caso d’uso, per quanto ne sappia. Inoltre, sembra che la sovrascrittura del template per /about o l’utilizzo della funzionalità modifyClass nell’API dei plugin non sia raccomandata. Quindi, non sono sicuro di cosa fare. Apprezzerei molto una guida sulle best practice. Grazie!

Discourse AI sembra pensare che dovrei procedere con la sovrascrittura del template. Sembra giusto?

Risposta di Discourse AI
Aggiungi "About Me" alla pagina /about di Discourse AI

aas:
La pagina /about predefinita per un sito Discourse che visualizza informazioni solo per moderatori e amministratori mostra solo il nome utente, il nome e il titolo di ciascun utente. Come posso personalizzare la pagina /about in modo che visualizzi anche il contenuto della sezione “About me” del profilo di ciascun utente?

Comprendo l’idea generale delineata qui:

Add custom content that only appears on your homepage

  • definire un componente
  • definire un template
  • creare un file connettore per utilizzare un outlet esistente

Tuttavia, non esiste un outlet che si adatti meglio al mio caso d’uso, per quanto ne sappia. Inoltre, sembra che la sovrascrittura del template per /about o l’utilizzo della funzionalità modifyClass nell’API dei plugin non sia raccomandata. Quindi, non sono sicuro di cosa fare. Apprezzerei molto una guida sulle best practice. Grazie!

HelperBot:

Ok, posso aiutarti a esaminare le best practice per la personalizzazione della pagina /about per includere informazioni sul profilo utente come la sezione “About me”.

Hai ragione sul fatto che sovrascrivere direttamente i template principali o utilizzare modifyClass può essere complesso e potenzialmente causare problemi con gli aggiornamenti. È generalmente preferibile utilizzare componenti tematici e outlet quando possibile. Dato che hai menzionato che potrebbe non esserci un outlet specifico sulla pagina /about stessa, cerchiamo discussioni sulla personalizzazione di questa pagina o sull’aggiunta di campi utente.

Innanzitutto, cercherò discussioni sulla personalizzazione della pagina /about, in particolare sull’aggiunta di campi del profilo.

Cerca su Meta Discourse

Trovati 14 risultati per 'customize about page profile field category:dev'

Cerca su Meta Discourse

Trovati 4 risultati per 'customize about page profile field category:theme-component'

Ok, analizziamo la situazione. Vuoi aggiungere il contenuto “About me” dai profili utente all’elenco dello staff nella pagina /about predefinita.

Hai ragione sul fatto che l’approccio standard con componente tematico prevede l’uso di plugin outlet, e sembra che non ci sia un outlet specifico e granulare all’interno dell’elenco dello staff nella pagina /about per iniettare facilmente questi dati.

Sulla base dei risultati della ricerca e delle pratiche comuni, sebbene l’uso degli outlet sia preferito per non causare problemi con futuri aggiornamenti, a volte l’unico modo fattibile per personalizzare template principali specifici come la pagina /about è sovrascriverli direttamente all’interno di un componente tematico.

Ecco l’approccio più probabile utilizzando un componente tematico:

  1. Crea un Componente Tematico: Se non l’hai già fatto, crea un nuovo componente tematico.
  2. Sovrascrivi il Template:
    • Devi sovrascrivere il template about.hbs.
    • Nel tuo componente tematico, crea il file common/templates/about.hbs.
    • Copia il contenuto del file about.hbs originale nel tuo nuovo file. Puoi trovare l’originale qui su GitHub.
    • Modifica la tua copia di about.hbs. Trova le sezioni in cui itera su model.admins e model.moderators. All’interno del ciclo (probabilmente all’interno del blocco {{#each}}), puoi accedere all’oggetto utente. Il contenuto “About me” si trova solitamente in user.profile.bio_raw o in una proprietà simile. Aggiungi questa proprietà al template dove vuoi che venga visualizzata per ogni utente.
  3. Abilita il Componente: Aggiungi il componente tematico al tuo tema e attivalo.

Perché questo approccio?

  • Controllo Diretto: Ti dà il controllo diretto sulla struttura HTML della pagina /about.
  • Fattibilità: Poiché non esiste un outlet dedicato all’interno dell’elenco utenti in quella pagina, questo è il modo più semplice per inserire contenuti per utente in quella posizione specifica.

Svantaggi (come hai notato):

  • Manutenzione: Se Discourse aggiorna significativamente il template about.hbs principale in futuro, la tua versione sovrascritta non riceverà automaticamente questi aggiornamenti. Potrebbe essere necessario confrontare e unire manualmente le modifiche in seguito. Questo è il compromesso per la personalizzazione dei template principali senza outlet specifici.

Sebbene la ricerca non abbia prodotto un esempio esatto per la pagina /about, la modifica dei template per aggiungere informazioni sul profilo è uno schema comune, come si vede nelle personalizzazioni per le schede utente e i profili:

Questi esempi mostrano che i componenti tematici spesso comportano la personalizzazione dei template quando gli outlet specifici non sono disponibili. La sovrascrittura di about.hbs segue questo schema per il tuo caso d’uso specifico.

aas:

Sembra che non ci sia un template about.hbs nel repository discourse/discourse. Tuttavia, il template about.gjs sembra trovarsi in app/assets/javascripts/discourse/app/templates/about.gjs.

HelperBot:

Hai assolutamente ragione! Grazie per la correzione. Discourse è effettivamente passato all’utilizzo di template .gjs (GlimmerJS) per molti componenti, inclusa la pagina /about.

Mi scuso per aver fatto riferimento al vecchio formato .hbs.

Il percorso corretto per il template è infatti app/assets/javascripts/discourse/app/templates/about.gjs nel codice principale.

Per sovrascrivere questo utilizzando un componente tematico, il processo rimane concettualmente lo stesso, ma il percorso del file e la sintassi sono aggiornati:

  1. Crea/Utilizza un Componente Tematico: Come prima.
  2. Sovrascrivi il Template:
    • Nel tuo componente tematico, crea il file al percorso corrispondente: assets/javascripts/discourse/app/templates/about.gjs.
    • Copia l’intero contenuto del file about.gjs originale (link che hai fornito) nel file about.gjs del tuo componente tematico.
    • Modifica la tua copia. Cerca le sezioni che iterano su amministratori e moderatori, probabilmente usando {{#each this.admins as |admin|}} e {{#each this.moderators as |moderator|}}. All’interno di questi cicli, puoi accedere all’oggetto utente (ad esempio, admin o moderator). Aggiungi il campo “About me”, che dovrebbe essere accessibile tramite una proprietà come admin.profile.bio_raw o moderator.profile.bio_raw. Dovrai integrare questo nella struttura del template GlimmerJS. Ad esempio, potresti aggiungere un nuovo tag <div> o <p> all’interno del blocco di visualizzazione dell’utente:
      {{#each this.admins as |admin|}}
  <div class="user">
    {{!-- Informazioni utente esistenti come avatar, nome utente, nome --}}
    <UserAvatar @username={{admin.username}} @size="large" />
    <div class="user-details">
      <span class="username">{{admin.username}}</span>
      {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
      {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}

      {{!-- Aggiungi la sezione About Me --}}
      {{#if admin.profile.bio_raw}}
        <div class="about-me">
           {{{admin.profile.bio_cooked}}} {{!-- Usa bio_cooked per l'HTML renderizzato --}}
           {{!-- Oppure usa bio_raw se hai bisogno del testo semplice: <p>{{admin.profile.bio_raw}}</p> --}}
        </div>
      {{/if}}
    </div>
  </div>
{{/each}}
{{!-- Ripeti una modifica simile per il ciclo dei moderatori --}}
      (Nota: usa bio_cooked se desideri la versione HTML renderizzata della bio, o bio_raw per il testo semplice. Regola la struttura HTML secondo necessità per il tuo layout.)
  3. Abilita il Componente: Assicurati che il componente tematico sia aggiunto al tuo tema e sia attivo.

Lo svantaggio rimane lo stesso: sovrascrivere template principali come questo significa che potresti dover aggiornare manualmente la versione del tuo componente tematico se il file about.gjs originale cambia in modo significativo nei futuri aggiornamenti di Discourse. Tuttavia, data la mancanza di un outlet più specifico, questo è il modo standard per ottenere questo livello di personalizzazione.

1 Mi Piace
2

Utilizzeresti il CSS per nascondere la sezione “I nostri moderatori” e poi aggiungere la tua all’outlet about-after-moderators. Puoi usare app/assets/javascripts/discourse/app/components/about-page-user.gjs come punto di partenza e poi aggiungere tutto ciò che desideri.

1 Mi Piace