Possibilità di inserire campi personalizzati nell'intestazione del post?

Supporto
1

I have a use case where I would like to add the content from a custom user field next to my username in the post header:

image
image.png1711×342 43.9 KB

not sure the best way to go about this?

very new to discourse and all its wonders

2

You can do a lot with the methods found in plugin-api.js.es6. To add content before or after the poster name widget, use the decorateWidget method. Use 'poster-name:after' as the name/type parameter.

Checking the result of the console.log statement from the following code will tell you what attributes are available:

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        console.log('attrs', helper.attrs);
    });
</script>

What you’ll see is that custom user fields are not available. To get access to them, you need to add the name of the user custom field to the public user custom fields Site Setting. Finding the name of the field can be tricky. One way to find the name is to go to /admin/customize/user_fields.json and look at the JSON for the page. You’ll see something like this:

{
"user_fields": [
{
"id": 1,
"name": "Terms of Service",
"description": "<a href=\"http://localhost:3000/tos\">I have read the tos</a>",
"field_type": "confirm",
"editable": true,
"required": false,
"show_on_profile": false,
"show_on_user_card": false,
"position": 1
},
{
"id": 4,
"name": "city",
"description": "your city",
"field_type": "text",
"editable": true,
"required": true,
"show_on_profile": false,
"show_on_user_card": false,
"position": 3
}
]
}

You can get the name of the field by appending “user_field_” to the field’s ID. So the “city” field on my site has the name “user_field_4”. Add the name to the public user custom fields Site Setting so that it is available in helper.attrs.

37%20PM
37%20PM771×117 8.09 KB

The following code will add the city field after the poster-name widget for users who have set that custom field. The field is wrapped in <span class="poster-user-field"></span> tags, so it can be styled with CSS.

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        const attrs = helper.attrs;
        if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {
            return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);
        }
    });
</script>

44%20PM
44%20PM797×173 13.4 KB

9 Mi Piace
3

Grazie per questa spiegazione, è proprio quello che stavo cercando. Direi che ciò che manca in questa spiegazione è come inserire il frammento JavaScript e dove farlo. È necessario creare un plugin separato per farlo?

1 Mi Piace
4

Il codice che ho pubblicato sopra, con l’istruzione console.log che restituisce gli attributi del post, è destinato a essere inserito in un tema o in un componente del tema. Per una panoramica generale sullo sviluppo dei temi di Discourse, consulta la Guida per sviluppatori ai temi di Discourse. Per i dettagli sull’utilizzo dei metodi della Plugin API in un tema anziché in un plugin, vedi https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281.

3 Mi Piace
5

Qualcuno sa come farlo tramite i temi?

È esattamente quello che sto cercando.

Voglio poterlo vedere esattamente come fa LinkedIn (mostra il titolo del lavoro):

image

Proprio come in questa conversazione qui:

6

Ciao a tutti! Sono nuovo a Discourse e ho trovato questa discussione che sembra ESATTAMENTE quello che sto cercando di fare. Ho un campo personalizzato che vorrei fosse visualizzato subito dopo il Nome completo di un utente su un post.

Non sono completamente inesperto nel creare plugin per altre web app che ho usato in passato, quindi penso che con abbastanza pazienza e tentativi ed errori potrei capire come far funzionare un Componente Tematico o qualcosa di simile. Al momento sto seguendo il tutorial di Sviluppo Tematico.

PENSO di aver capito il nome del campo da aggiungere all’impostazione “campi personalizzati utente pubblici” (penso che l’id sia 2, quindi l’ho impostato su user_field_2).

Ho effettuato l’accesso al mio sito Discourse e ho creato un nuovo Componente Tematico. L’ho abilitato per tutti i temi che ho installato. Sono andato su JS e ho copiato il codice da sopra (cambiando user_field_4 in user_field_2). Non sembrava fare nulla, quindi sono sicuro di aver fatto qualcosa di sbagliato. C’è qualche altro posto dove avrei dovuto incollarlo? O sono completamente fuori strada?

So che questo post è un po’ datato, quindi il codice potrebbe essere obsoleto. C’è qualche possibilità che qualcuno possa aiutarmi? Farò del mio meglio per rispondere a qualsiasi domanda o fornire i dettagli necessari. GRAZIE!

7

Hai ragione, questo codice è ormai obsoleto perché abbiamo sostituito il sistema di widget. Ecco alcune informazioni in merito risalenti all’anno scorso: Upcoming post stream changes - How to prepare themes and plugins .

È ancora possibile farlo funzionare, ma dovrai utilizzare un Componente Glimmer. Potrebbe assomigliare a questo:

import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";

class UserFieldBadge extends Component {
  static shouldRender(args) {
    return !!args.post?.user_custom_fields?.user_field_4;
  }

  <template>
    <span class="poster-user-field">
      {{@post.user_custom_fields.user_field_4}}
    </span>
  </template>
}

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet("post-meta-data-poster-name", UserFieldBadge);
});

Ricorda che dovrai far corrispondere user_field_4 in questo codice al campo effettivo che desideri visualizzare.

Lascerò agli altri il compito di modificarlo in modo che possa mostrare TUTTI i campi personalizzati utente pubblici. :wink:

1 Mi Piace