Esta guía explica cómo configurar la opción ‘selectores de incrustación permitidos’ en Discourse. Esta opción es crucial al publicar publicaciones desde un sitio externo en Discourse o al incrustar comentarios de Discourse en un sitio externo usando JavaScript.
Nivel de usuario requerido: Administrador
Se requieren conocimientos básicos de CSS para usos más avanzados
Al publicar publicaciones en Discourse desde un sitio externo o al incrustar comentarios de Discourse en un sitio externo, es posible que encuentres problemas con el botón “Mostrar publicación completa” al no extraer el contenido correcto. Esta guía te ayudará a configurar la opción ‘selectores de incrustación permitidos’ para resolver este problema.
Entendiendo el problema
Cuando los usuarios hacen clic en el botón “Mostrar publicación completa”, es posible que Discourse no extraiga el contenido correcto de la publicación desde tu sitio externo. Aquí es donde entra en juego la opción ‘selectores de incrustación permitidos’.
Ubicando la opción
Puedes encontrar la opción ‘selectores de incrustación permitidos’ en dos lugares:
- Busca “selectores de incrustación permitidos” en la página de configuración de tu sitio.
- Navega a Administración > Personalizar > Incrustación y luego selecciona la pestaña Crawlers.
Identificando los selectores CSS correctos
Para encontrar los selectores CSS adecuados:
- Ve a una publicación en tu sitio externo que hayas publicado en Discourse.
- Abre la herramienta de inspección web de tu navegador y examina la estructura HTML de la publicación.
- Identifica los elementos HTML que rodean inmediatamente el contenido principal de la publicación.
Por ejemplo, en una publicación típica de WordPress, el contenido suele estar en un div .entry-content dentro de etiquetas article. En este caso, podrías usar article .entry-content como tu selector CSS.
Configurando la opción
Para extraer varios tipos de contenido desde tu sitio externo, es posible que necesites agregar múltiples selectores. Por ejemplo:
article .entry-content img, article .entry-content p, article .entry-content ul
Este ejemplo apunta a imágenes, párrafos y listas no ordenadas dentro del contenido de entrada del artículo.
Pruebas y resolución de problemas
Encontrar los selectores correctos puede requerir algo de prueba y error. Ten en cuenta lo siguiente:
- Discourse almacena en caché el contenido de las publicaciones externas durante 10 minutos, por lo que los cambios podrían no ser visibles de inmediato.
- Para evitar esto, prueba con varias publicaciones o borra la caché en un sitio de desarrollo usando
Rails.cache.clearen la consola de Rails.
Manejo de imágenes
Si tienes problemas para extraer imágenes desde tu sitio web, asegúrate de que tus selectores CSS incluyan los elementos de imagen apropiados. Por ejemplo:
article .entry-content img
Este selector apunta a las imágenes dentro del contenido de entrada del artículo.
Consideraciones adicionales
- La opción ‘selectores de incrustación permitidos’ se aplica tanto a publicaciones publicadas mediante la API como a publicaciones extraídas con el script de incrustación de Discourse.
- Es posible que necesites ajustar los selectores según la estructura y los tipos de contenido específicos de tu sitio web.
- Recuerda guardar tus cambios después de actualizar la opción.
