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:
not sure the best way to go about this?
very new to discourse and all its wonders
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.
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>
9 Me gusta
Gracias por esta explicación, es algo que yo también estaba buscando. Diría que lo que falta en esta explicación es cómo insertar el fragmento de JavaScript y dónde hacerlo. ¿Necesitas crear un plugin separado para ello?
1 me gusta
El código que publiqué arriba, con la sentencia console.log que devuelve los atributos de la publicación, debe colocarse en un tema o en un componente de tema. Para una visión general del desarrollo de temas de Discourse, consulta la Guía del desarrollador para temas de Discourse. Para obtener detalles sobre el uso de los métodos de la API de plugins en un tema en lugar de en un plugin, consulta https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281.
3 Me gusta
¿Alguien sabe cómo hacerlo mediante temas?
Esto es exactamente lo que estoy buscando.
Quiero poder verlo tal como lo hace LinkedIn (muestra el título del puesto):
Tal como en esta conversación aquí:
¡Hola a todos! Soy nuevo en Discourse y encontré este hilo que parece EXACTAMENTE lo que estoy intentando hacer. Tengo un campo personalizado que me gustaría que se mostrara justo después del Nombre Completo de un usuario en una publicación.
No tengo ninguna experiencia en la creación de plugins para otras aplicaciones web que he utilizado en el pasado, así que creo que con suficiente paciencia y prueba y error podría averiguar cómo hacer que un Componente de Tema o algo similar funcione. Actualmente estoy revisando el tutorial de Desarrollo de Temas.
CREO que descubrí el nombre del campo para agregar a la configuración de “campos personalizados públicos del usuario” (creo que el id es 2, así que lo establecí en user_field_2).
Inicié sesión en mi sitio de Discourse y creé un nuevo Componente de Tema. Lo habilité para todos los temas que tengo instalados. Fui a JS y copié el código de arriba (cambiando user_field_4 a user_field_2). No pareció hacer nada, así que estoy seguro de que hice algo mal. ¿Hay algún otro lugar donde necesite pegar esto? ¿O estoy completamente equivocado?
Sé que esta publicación es algo antigua, por lo que el código puede estar desactualizado. ¿Hay alguna posibilidad de que alguien pueda ayudarme? Haré todo lo posible para responder cualquier pregunta o proporcionar los detalles necesarios. ¡GRACIAS!
Tiene razón en que este código ya está obsoleto porque reemplazamos el sistema de widget. Aquí hay algo de información sobre eso del año pasado: Upcoming post stream changes - How to prepare themes and plugins.
Aún es posible hacer que esto funcione, pero tendrá que usar un Componente Glimmer. Podría verse algo así:
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);
});
Recuerde que deberá hacer coincidir user_field_4 en este código con el campo real que desea mostrar.
Dejaré que otros modifiquen esto para que pueda mostrar TODOS los campos personalizados de usuario públicos. 
1 me gusta