Quali sono i diversi modi per personalizzare i contenuti all'interno di un post (attributi personalizzati e simili)

Supporto
1

Finora sono a conoscenza di due modi per farlo:

  1. <span>some text</span>

    CSS:

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

  2. [wrap="indent"]some text[/wrap]
    Creerà un div o uno span (se c’è altro contenuto sulla stessa riga), contenente i seguenti attributi: class="d-wrap" e data-wrap="custom"

    CSS

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

Ci sono altri modi per personalizzare alcuni contenuti scelti in un post di cui non sono a conoscenza?
Inoltre, c’è un modo per aggiungere una classe personalizzata a un elemento? Non ho trovato nulla nella ricerca. Immagino che non sia possibile?

2 Mi Piace
2

Posso shamelessmente fare un “bump” a questo post?

Non sono riuscito a trovare alcun argomento che elenchi tutti i modi per personalizzare il contenuto HTML di un post utilizzando il composer intrinseco di Discourse.

Se ce ne sono altri oltre ai due che ho menzionato - che sono molto simili -, forse un howto potrebbe essere utile?

1 Mi Piace
3

Sarei curioso di vedere anche quali tag HTML funzionano nell’editor. Credo di averlo visto da qualche parte prima, ma non sono riuscito a trovarlo oggi.

Ad esempio, stavo cercando di aggiungere un <button class="success">Click me</button> all’editor, è apparso nell’anteprima ma è fallito quando l’ho pubblicato. Penso che alcuni tag HTML funzionino, solo non sono sicuro di quali.

4

Sembra che questi siano i tag e gli attributi HTML consentiti di default:

Possiamo vedere che l’attributo data-* è consentito.

Questo file contiene anche il modo [wrap=*] testo [/wrap] per personalizzare un elemento, che aggiunge l’attributo data-wrap con il valore *…

Non ho ancora trovato altro.

1 Mi Piace
5

È possibile utilizzare alcune classi HTML in Discourse, tuttavia, la maggior parte dell’HTML in un post viene sanificata per motivi di sicurezza, e solo un HTML molto rigorosamente in whitelist è consentito nel markdown. Per aggiungere classi alla whitelist è necessario utilizzare un plugin, la sanificazione avviene sia lato server che lato client. Dai un’occhiata a Whitelist di tag/attributi HTML per alcuni dettagli su dove aggiungere gli attributi in whitelist, e credo che assomiglierebbe a qualcosa del genere: Whitelist HTML di Discourse. e come ha menzionato @RGJ, si prega di notare che la funzione whiteList() è deprecata e oggi viene chiamata allowList().

Per quanto riguarda altri modi per personalizzare i contenuti, i post sono widget, e i temi di Discourse hanno la capacità di decorare i widget in modo da poterne sfruttare la funzionalità.

Spero che questo aiuti!

7 Mi Piace
6

Grazie per la tua risposta!

Mi sono imbattuto nel tuo primo link questo pomeriggio.

I file del link di GitHub hanno 7 anni, quindi suppongo che il codice possa essere obsoleto?

Comunque, ho usato questo:

export function setup(helper) {
    if (!helper.markdownIt) { return; }

    helper.registerOptions((opts, siteSettings) => {
      opts.features.nolinkify = siteSettings.no_linkify_enabled;
    });

    helper.allowList(["span.nolinkify"]);
}

Che ho preso da GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

Ci sono solo poche righe di codice nel mio plugin e non so bene cosa faccia e se tutto sia necessario, ma almeno posso aggiungere span con una classe nolinkify.

Nel mio caso, lo scopo era quello di “unlinkify” facilmente parole nei post con Auto-Linkify Words (accetta solo tag e classi per prevenire la linkificazione), e in particolare parole nei tag HTML dei titoli quando si usa DiscoTOC - automatic table of contents

Ho anche provato una soluzione basata sulla sintassi bbcode come questa:

    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;
        }
      });
    });

Quindi, ho provato entrambe le soluzioni per il mio problema dei tag del titolo con la tabella dei contenuti.
Questo non funziona:

## [nolinkify]test[/nolinkify]

Ma questo funziona:

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

Avrei preferito la prima sintassi, ma immagino che sia incompatibile con la tabella dei contenuti a causa dell’ordine di esecuzione degli script.

3 Mi Piace
7

Quel codice non funziona più. È meglio rimuoverlo dal tuo post.

La risposta si trova nell’argomento collegato, come ha già scoperto @canapin.

Si prega di notare che la funzione whiteList() è deprecata e viene chiamata allowList() d’ora in poi.

3 Mi Piace
8

Ah, sì, era persino menzionato nella console :+1:

3 Mi Piace
9

Grazie per la conferma, il post originale è stato aggiornato per accuratezza.

2 Mi Piace
10

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