Quais são as diferentes maneiras de personalizar o conteúdo dentro de uma postagem (atributos personalizados e afins)

Suporte
1

Até agora, estou ciente de duas maneiras de fazer isso:

  1. <span>some text</span>

    CSS:

    [data-theme-custom] {
    color: pink;
}

  2. [wrap="indent"]some text[/wrap]
    Isso criará um div ou um span (se houver outro conteúdo na mesma linha), contendo os seguintes atributos: class="d-wrap" e data-wrap="custom"

    CSS

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

Existem outras maneiras de personalizar algum conteúdo escolhido em uma postagem que eu não conheça?
Além disso, existe uma maneira de adicionar uma classe personalizada a um elemento? Não encontrei nada na pesquisa. Acho que isso não é possível?

2 curtidas
2

Posso dar um “up” descaradamente?\n\nNão consegui encontrar nenhum tópico listando todas as maneiras de personalizar o conteúdo HTML de uma postagem usando o editor inerente do Discourse.\n\nSe houver outras além das duas que mencionei - que são muito semelhantes -, talvez um howto pudesse ser útil?

1 curtida
3

Eu também gostaria de saber quais tags HTML funcionam no composer. Acho que já vi isso em algum lugar antes, mas não consegui encontrar hoje mais cedo.

Por exemplo, eu estava tentando adicionar um <button class="success">Click me</button> ao composer, ele apareceu na prévia, mas falhou quando postei. Acho que algumas tags HTML funcionam, só não tenho certeza quais.

4

Acho que estas são as tags e atributos HTML permitidos por padrão:

Podemos ver que o atributo data-* é permitido.

Este arquivo contém também a forma [wrap=*] texto [/wrap] para personalizar um elemento, que adiciona o atributo data-wrap com o valor *…

Ainda não encontrei mais nada.

1 curtida
5

É possível usar algumas classes HTML no Discourse, no entanto, a maior parte do HTML em uma postagem é higienizada por motivos de segurança, e apenas HTML estritamente permitido é permitido em markdown. Para adicionar classes à lista de permissões, você deve usar um plugin, a higienização ocorre tanto no lado do servidor quanto no lado do cliente. Confira Permitindo tags/atributos HTML para obter detalhes sobre onde adicionar os atributos permitidos, e acredito que seria semelhante a algo como isto: Discourse HTML Whitelist. e, como @RGJ mencionou, observe que a função whiteList() está obsoleta e hoje é chamada de allowList().

Em relação a outras maneiras de personalizar o conteúdo, as postagens são widgets, e os temas do Discourse têm a capacidade de decorar widgets, então você poderia aproveitar isso.

Espero que isso ajude!

7 curtidas
6

Obrigado pela sua resposta!

Encontrei seu primeiro link esta tarde.

Os arquivos do link do GitHub têm 7 anos, então suponho que o código possa estar desatualizado?

De qualquer forma, usei isto:

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

Que peguei de GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

Existem apenas algumas linhas de código no meu plugin e eu realmente não sei o que ele está fazendo e se tudo é necessário, mas pelo menos posso adicionar spans com uma classe nolinkify.

No meu caso, o objetivo era facilmente “deslinkificar” palavras em posts com Auto-Linkify Words (ele só aceita tags e classes para evitar linkificação), e especialmente palavras em tags de título HTML ao usar DiscoTOC - automatic table of contents

Também tentei uma solução baseada em sintaxe 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;
        }
      });
    });

Então, tentei ambas as soluções para o meu problema de tags de título com a tabela de conteúdo.
Isso não funciona:

## [nolinkify]test[/nolinkify]

Mas isso funciona:

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

Eu teria preferido a primeira sintaxe, mas acho que é incompatível com a tabela de conteúdo por causa da ordem de execução dos scripts.

3 curtidas
7

Esse código não funciona mais. É melhor removê-lo da sua postagem.

A resposta está no tópico vinculado, como @canapin já descobriu.

Observe que a função whiteList() está obsoleta e é chamada de allowList() atualmente.

3 curtidas
8

Ah, sim, foi até mencionado no console :+1:

3 curtidas
9

Obrigado por confirmar, a postagem original foi atualizada para precisão.

2 curtidas
10

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