¿No puedes agregar una nueva clase a los elementos de la página de temas usando jQuery?

Desarrollador
1

Estoy teniendo dificultades para aprender más sobre cómo funciona Discourse y sigo confundido después de leer esto. Estoy intentando agregar un título dinámico al nombre de usuario del administrador en la página de publicaciones usando jQuery, pero no funciona.

Sin embargo, si apunto, por ejemplo, a la etiqueta body y agrego una clase, sí funciona.
¿Podría alguien explicarme por qué no funciona?
Por cierto, el código está insertado en la pestaña de encabezado.

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

¿Necesito inyectar esto en un outlet de plugin o algo así?

2

Probablemente porque, en este caso, jQuery no se lleva bien con la tubería de renderizado de Ember y Widget.

Verás que en este script no tienes control sobre cuándo se dispara ni en relación con dónde ha llegado la aplicación de JavaScript mientras dibuja la pantalla.

Sin embargo, existe un método de la API de JavaScript para esto; consulta más información aquí:

decorateWidget()

Y este widget específico:

No obstante, antes de adentrarte en ese laberinto, retrocedamos un poco: ¿solo quieres que se muestre un título?

Por ejemplo, en los mensajes de Jeff:

image
image367×114 7.42 KB

Él tiene el título: “co-founder”

Simplemente crea un nuevo grupo, añade a los administradores, ve a Gestionar => Membresía y edita el Título predeterminado.

Ahora pueden seleccionar este título en la configuración de su cuenta en Preferencias (o puedes hacerlo por ellos).

image
image994×551 14.4 KB

También puedes usar esto para mostrar un distintivo especial de avatar (también demostrado en la captura de pantalla anterior).

Obviamente, si no quieres que esto sea tan “fijo”, tendrás que explorar la vía de la programación, pero esto, estoy seguro de que estarás de acuerdo, requiere mucho menos esfuerzo.

5 Me gusta
3

Gracias por tu ayuda. No es el título del foro que estoy buscando, sino para mostrar un título al pasar el cursor sobre este pequeño icono de corona que he creado (visible solo para administradores):

image
image450×178 72.4 KB

Por cierto, el código CSS para esto es:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
4

Bien.

Parece que podrías considerar la ruta del widget.

También considera este método de la API:

api.reopenWidget("nombre-del-poster", {

      html() {
          << tu-código-aquí-pero-considera-usar-el-original-como-plantilla>>
      }
}

Te recomiendo que leas: A tour of how the Widget (Virtual DOM) code in Discourse works

Hacer este tipo de cosas en Discourse requiere significativamente más esfuerzo porque es una aplicación web mágicamente automática, pero una vez que lo haces correctamente, la solución puede ser muy robusta.

5 Me gusta
5

¡Genial, muchas gracias! Lo revisaré y publicaré la solución si tengo éxito. A primera vista, Discourse parece intimidante cuando se trata de personalizarlo, y yo pensaba que WordPress era difícil :smile:. Pero, seguro que una vez que me familiarice con todo lo de los plugins y plantillas, creo que se volverá más fácil.

6

De hecho, boom, podría haber una solución aún más sencilla:

Considere este método de la API para reemplazar el escudo de moderador normal:

 api.replaceIcon('shield-alt', 'crown');

y luego cambie el texto del mensaje emergente aquí:

image
image1152×402 10.7 KB

En ese momento, su CSS original podría ser redundante (aunque puede volver a colorear el icono)

3 Me gusta
7

Pero esto eliminará el icono de escudo para los moderadores, ¿verdad? Porque no quiero eso. Necesito agregar solo el icono de corona y el texto emergente para los administradores, ya que no tienen ninguno en la página de publicaciones.

1 me gusta
8

Ah, sí, estoy demasiado acostumbrado a mis sitios donde soy tanto moderador como administrador. Si separas estos roles, eso no funcionará (es decir, los administradores nunca son moderadores). Tendrías que dar a los administradores derechos de moderador.

Así que explora las otras opciones.

1 me gusta
9

Prueba esto:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    }
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

y

image
image1129×388 10.3 KB

funciona para mí:

image
image736×305 14.6 KB

En este caso, el primer usuario es tanto administrador como moderador, y el segundo solo es administrador. Puedes mejorar esa lógica; haz que la corona tenga prioridad cambiando el orden de las sentencias if.

1 me gusta
10

Suena como una solución, pero como dije, soy nuevo en la personalización de Discourse… ¿podrías explicarme exactamente dónde debo pegar tu código, ya que aún no he probado ningún método de API?

11

… dame un segundo, lo haré bien para ti

12

Ok, ahora esto es un componente de tema:

(Installing a theme or theme component)

El rol de administrador tiene prioridad: por defecto, se mostrará una corona para un administrador que también tenga el rol de moderador.

Ahora puedes configurar el icono por tipo de personal.

image
image569×174 3.2 KB

Asegúrate de agregar los nombres de los iconos a la configuración del subconjunto de iconos SVG (de lo contrario, no se mostrarán):

image
image1141×242 9.07 KB

Personaliza tu texto de título aquí:

image
image1129×388 10.3 KB

De manera similar para el moderador.

5 Me gusta
13

¡Genial :slightly_smiling_face:. ¡Muchas gracias por tu ayuda!

14

¡Qué placer (esa fue bastante divertida)!

2 Me gusta
15

He actualizado el TC para que ahora también cambie los iconos del personal en la tarjeta de usuario (y posiblemente en otros lugares, ya que he modificado el helper).

Los iconos ahora son configurables tanto para el administrador como para el moderador, aunque la corona es la predeterminada para el administrador, mientras que el escudo estándar es la predeterminada para el moderador.

He cambiado el nombre del TC.

Seguramente habrá lugares donde los iconos no se hayan convertido; quizás encuentre más en el futuro.

3 Me gusta
16

¡Muchas gracias! Esto me ayudó con lo que quería hacer para mi foro. Creo que tu comentario debería fijarse para otros usuarios que tengan problemas con un icono que se muestra junto a su nombre como administrador. Utilicé tu función para mostrar el icono del escudo que se muestra públicamente en el perfil de los moderadores para los administradores. Ahora, puedo tener el icono del escudo sin tener permisos de moderador y tiene la información sobre herramientas de administrador correcta cuando solo tengo los permisos de administrador. ¡Muchas gracias por tu tiempo para crear este increíble componente para los foros de las personas!

Edición: No se muestra públicamente en su perfil. Actualmente, solo funciona en las publicaciones.

1 me gusta
17

De nada. ¡Siéntete libre de hacer fork, extender y enviar PR!

2 Me gusta