Hola a todos,
Estoy diseñando una comunidad donde cada usuario necesita pedir permiso para entrar a un grupo y cada grupo controla el acceso a una categoría.
Me gustaría añadir un mensaje de bienvenida / explicación en formato HTML a la página de los grupos ( https://community.horbitercafe.com/g ).
¿Cuál es la forma más sencilla de lograrlo?
Gracias,
F.
No estoy seguro de si este es el lugar correcto para plugins, pero puedes probar esto
En Personalizar > </head>
Agrega esto
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
aquí tu HTML
</script>
¿Cómo puedo limitar esto solo a la página /g?
Sí, eso efectivamente permite “inyectar” HTML encima del nombre del grupo y otra información en páginas como, por ejemplo, https://discourse.example.org/g/foo. Gracias por compartirlo.
@Fausto_Dassenno, ¿estás buscando algo para la página principal de listado de grupos, pero no para la página de detalles de cada grupo individual?
Correcto, quiero añadir HTML solo en la página principal de listado de grupos.
Agrega una clase a tu código HTML, como gr-horbiter
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
<div class="gr-horbiter">
tu código HTML
</div>
</script>
Y agrega este CSS en common
.gr-horbiter {
display: none;
}
body.groups-page .gr-horbiter {
display: block;
}
No he probado el código, pero debería funcionar
Gracias @Steven, ¿va la parte del script en la sección HTML de un componente? ¿O necesito editar el HTML directamente?
Lo siento, no estoy seguro de entender la pregunta. El inglés no es mi idioma nativo, así que puedo malinterpretar algunas cosas.
Copias el script y el HTML en la sección <head> y agregas tu mensaje de bienvenida, con algún div o span si deseas personalizarlo, y debería funcionar bien.
Gracias @Steven, ya lo tenía funcionando.
El único problema es que necesito que esto se añada en la página de índice del grupo y no en la página de detalles del grupo.
Al menos ahora entiendo la lógica detrás de esto. Investigaré más.
No puedo encontrar ningún conector en la página de índice del grupo.
Debería haberlo probado, ahora veo cuál es el problema 
El outlet del plugin no funciona para la página principal del grupo.
Aún tengo una forma de agregar un banner, pero probablemente no sea la más limpia posible; es posible que el personal de Discourse tenga una mejor manera de hacerlo.
Este código CSS te permitirá agregar algo de texto y estilo, pero solo tendrás esta clase y no creo que haya una manera de agregar un enlace en el banner de texto.
body.groups-page .groups-header::before {
content: "Tu texto";
width: 100%;
margin: 0 0 15px 0;
}
Puedes agregar fondo, borde, etc., para personalizar el banner en esta clase y crear el banner.
Gracias,
No puedo alcanzar mi objetivo con esto. Lo que intentaba hacer era crear una página de destino para grupos para que los nuevos usuarios pudieran solicitar acceso a los grupos que deseaban. Para lograrlo, quería incluir algunas explicaciones con HTML.
¿Qué tan difícil es solicitar un nuevo nombre de grupo en la página de índice de grupos?
Si todo lo que quieres es algo como esto, es fácil
.welcome-message {
display:none;
}
.groups-page .welcome-message {
display:block;
margin: 20px;
}
Luego agrega esto a la sección Después del Encabezado
<div class="welcome-message">Pon aquí tu información de bienvenida e instrucciones</div>
Sí, esa es con diferencia la mejor solución
A veces me complico las cosas
¡Genial, esto funciona!
¿Qué pasa si quiero hacer lo mismo pero que se muestre solo en la página de inicio? ¿Qué debería reemplazar a .groups-page?
Mira la clase utilizada en body en tu página de inicio HTML.
Por ejemplo, aquí en meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">
La clase utilizada es navigation-topics.
O si prefieres algo más sofisticado, prueba
Interesante, en mi página de inicio tengo esto
¿Qué página es tu página de inicio?
¿Es esto lo que preguntas?
Veo cuál es el problema con tu clase de cuerpo vacía.
En lugar de inspeccionar el código fuente de la página, presiona F12 para abrir las herramientas de desarrollo de Chrome/Firefox/Edge y ve a la pestaña “Elemento”.
Busca el código HTML allí y tu <body> mostrará las clases correctas.