Está copiado en un 99% de la discusión y los ejemplos de código proporcionados por @LeoMcA, incluidos en esta conversación en Meta y en Namati User Card Profile Theme, pero pensé que sería útil extraerlo del hilo y hacerlo ligeramente más general.
Notas
Cualquier usuario que no incluya un valor para una entrada no verá el icono correspondiente en su tarjeta de perfil de usuario.
Los campos personalizados de usuario de Instagram y Twitter solo esperan los nombres de usuario (sin “@” incluido); el nombre se agrega a la URL base.
Recomiendo que los Campos Personalizados de Usuario que tendrán iconos NO se muestren en la Tarjeta de Usuario, ya que de lo contrario resultará un poco redundante tener tanto el texto como los iconos clickeables. Solo es mi opinión, el tema no los oculta automáticamente.
Configuraciones del sitio
Cada entrada de nombre de campo personalizado debe coincidir con el nombre que uses para el campo de usuario personalizado en tu instancia de Discourse. Por defecto, el componente del tema esperará los nombres como se muestra a continuación, pero puedes cambiarlos si lo deseas. Las cadenas distinguen mayúsculas de minúsculas.
instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'Perfil de LinkedIn'
¡Buen trabajo! El único problema que veo es que el distintivo del avatar se desplaza hacia abajo debido a esto. El icono del árbol debería superponerse a mi avatar.
¡Ah, gracias por probarlo y encontrar esto!
No creo que tenga ninguna insignia en mis comunidades.
Miré las tuyas y creo que es el tamaño de los iconos lo que hace que la tarjeta sea más grande. No soy un gurú del CSS, pero creo que tendré que aplicar un margen condicional al avatar para los usuarios que tengan iconos.
Hay una incompatibilidad con el plugin Follow: este TC funciona bien cuando estoy conectado, pero cuando accedo al sitio como usuario anónimo, las tarjetas de usuario y la página de perfil de usuario están rotas.
Actualización: esto no está relacionado con los enlaces de iconos sociales del TC. Lo informaré en el tema del plugin Follow.
En /logs veo:
NoMethodError (método id no definido para nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’
¡Me gusta esto! Mi único problema es que el nombre del campo y la URL aparecen en la tarjeta y en el perfil, además del icono. ¿Cómo puedo ocultar la parte del texto del campo/URL?
Gracias, sí, llegué a la misma conclusión. Todavía no he terminado de entender la aplicación de estilos condicionales, lo siento. Intentaré encontrar a alguien con más experiencia en estos temas.
Funciona a la perfección, pero veo que has codificado de forma rígida el uso de canales de YouTube. ¿Alguna vez has pensado en que algunas personas prefieran poner su nombre de usuario? (Algunos usuarios no tienen canales). Creo que funcionaría mejor si permitieras que la gente simplemente pegue un enlace de YouTube en lugar de un canal o nombre de usuario.
Otra idea sobre los campos de Instagram y Twitter: A pesar de añadir una nota indicando que solo se deben ingresar nombres de usuario en estos campos de perfil, mucha gente simplemente pega la URL completa; supongo que es una forma más común de hacerlo en muchos sitios. Esto me hizo pensar: ¿quizás podrías detectar la presencia de ‘https://’ en el valor y, en ese caso, no añadir la base de la URL? Eso haría el proceso un poco más tolerante y robusto.
Excelente, he añadido esa sugerencia ahora y debería funcionar para ambos tipos de entradas.
Lamentablemente, no estoy seguro de conocer la diferencia entre canales y perfiles de usuario en YouTube. ¿Qué sugieres que sea la URL base para YouTube? ¿Solo https://youtube.com/?
Creo que hay enlaces /c/ y /u/ para canales y usuarios, respectivamente. Honestamente, creo que el mejor enfoque aquí es simplemente permitir que las personas ingresen una URL y no preocuparse por hacerlo demasiado elegante.
Ah, cierto, eliminaré la función de URL base para los enlaces de YouTube, para que las personas puedan ingresar una completa, igual que con LinkedIn. Gracias por la sugerencia, ya actualicé.
Soy un novato en esto: intenté personalizar el CSS para cambiar el color de fuente de los iconos, ya que uso un tema oscuro, pero no logro que funcione.
Creo que la clase es iconic-user-fields. Intenté cambiar el color de esa clase y también con !important, pero no surtió efecto.
disculpa la respuesta extremadamente tardía; espero que hayas podido encontrar una solución mientras tanto.
He añadido una nueva opción que te permite seleccionar un color de icono en el panel de configuración del tema.
ahora puedes cambiarlo a blanco o a algún otro color más compatible con el tema oscuro. ¡ya debería estar disponible!
No sé si esto está relacionado con algún cambio reciente en el núcleo: si inicio sesión con mi cuenta, los enlaces aparecen en las tarjetas de usuario, pero si estoy desconectado (estoy probando con una pestaña anónima), se muestra un error en la consola porque en esta líneauserFields está indefinido. En este caso, la tarjeta de usuario solo muestra el avatar y el nombre de usuario, nada más.
Si verifico la presencia de userFields antes de su primer uso, como probé aquí, la tarjeta se muestra completa, pero no aparecen los enlaces de los iconos de redes sociales.
Lo habilité en mi comunidad y se ve genial.