¿Cuáles son las diferentes formas de personalizar el contenido dentro de una publicación (atributos personalizados y similares)?

Hasta ahora conozco dos formas de hacerlo:

  1. <span>some text</span>

    CSS:

    [data-theme-custom] {
        color: pink;
    }
    
  2. [wrap="indent"]some text[/wrap]
    Creará un div o un span (si hay otro contenido en la misma línea), que contendrá los siguientes atributos: class="d-wrap" y data-wrap="custom"

    CSS

     [data-wrap="custom"] {
         color: pink;
     }
    

¿Hay otras formas de personalizar contenido elegido en una publicación de las que no estoy al tanto?
Además, ¿hay alguna forma de añadir una clase personalizada a un elemento? No encontré nada en la búsqueda. Supongo que esto no es posible?

2 Me gusta

¿Puedo subir esto descaradamente?

No pude encontrar ningún tema que enumerara todas las formas de personalizar el contenido HTML de una publicación utilizando el editor inherente de Discourse.

Si hay otras además de las dos que mencioné, que son muy similares, ¿quizás un howto podría ser útil?

1 me gusta

También me gustaría saber qué etiquetas HTML funcionan en el editor. Creo que lo vi en algún sitio antes, pero no pude encontrarlo hoy.

Por ejemplo, intenté añadir un <button class="success">Click me</button> al editor; se mostró en la vista previa, pero falló cuando lo publiqué. Creo que algunas etiquetas HTML funcionan, solo que no estoy seguro de cuáles.

Supongo que estas son las etiquetas y atributos HTML permitidos por defecto:

Podemos ver que el atributo data-* está permitido.


Este archivo contiene también la forma [wrap=*] texto [/wrap] para personalizar un elemento, que añade el atributo data-wrap con el valor *

Aún no he encontrado nada más.

1 me gusta

Es posible usar algunas clases HTML en Discourse, sin embargo, la mayor parte del HTML en una publicación se desinfecta por razones de seguridad, y solo se permite HTML muy estricto en la lista blanca en markdown. Para agregar clases a la lista blanca, debe usar un plugin, la desinfección ocurre tanto en el lado del servidor como en el del cliente. Consulte Etiquetas / atributos HTML en lista blanca para obtener detalles sobre dónde agregar los atributos en lista blanca, y creo que se vería similar a algo como esto: Lista blanca de HTML de Discourse. y como ha mencionado @RGJ, tenga en cuenta que la función whiteList() está obsoleta y hoy en día se llama allowList().

Con respecto a otras formas en que podría personalizar el contenido, las publicaciones son widgets, y los temas de Discourse tienen la capacidad de decorar widgets, por lo que podría aprovechar eso.

¡Espero que esto ayude!

7 Me gusta

¡Gracias por tu respuesta!

Me encontré con tu primer enlace esta tarde.
Los archivos del enlace de GitHub tienen 7 años, ¿así que supongo que el código podría estar desactualizado?

De todos modos, usé esto:

export function setup(helper) {
    if (!helper.markdownIt) { return; }
  
    helper.registerOptions((opts, siteSettings) => {
      opts.features.nolinkify = siteSettings.no_linkify_enabled;
    });
  
    helper.allowList(["span.nolinkify"]);
}

Que tomé prestado de GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

Solo hay unas pocas líneas de código en mi plugin y realmente no sé qué hace ni si todo es necesario, pero al menos puedo agregar spans con una clase nolinkify.

En mi caso, el propósito era “desenlazar” fácilmente palabras en publicaciones con Auto-Linkify Words (solo acepta etiquetas y clases para evitar la creación de enlaces), y especialmente palabras en etiquetas de título mientras se usa DiscoTOC - automatic table of contents

También probé una solución basada en sintaxis bbcode como esta:

    helper.registerPlugin(md => {
      md.inline.bbcode.ruler.push("nolinkify",{
        tag: "nolinkify",
  
        replace: function(state, tagInfo, content) {
          const token = state.push("html_raw", '', 0);
          const escaped = state.md.utils.escapeHtml(content);
          token.content = `<span="nolinkify ">${escaped}</span>`;
          return true;
        }
      });
    });

Así que probé ambas soluciones para mi problema de etiquetas de título con la tabla de contenido.
Esto no funciona:

## [nolinkify]test[/nolinkify]

Pero esto funciona:

## <span class="nolinkify">test</span>

Hubiera preferido la primera sintaxis, pero supongo que es incompatible con la tabla de contenido debido al orden de ejecución de los scripts.

3 Me gusta

Ese código ya no funciona. Es mejor eliminarlo de tu publicación.

La respuesta está en el tema enlazado, como ya descubrió @canapin.

Tenga en cuenta que la función whiteList() está obsoleta y ahora se llama allowList() aquí.

3 Me gusta

Ah, sí, incluso se mencionó en la consola :+1:

3 Me gusta

Gracias por confirmarlo, la publicación original se ha actualizado para mayor precisión.

2 Me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.