Quelles sont les différentes manières de personnaliser le contenu d'un article (attributs personnalisés, etc.)

Soutien
1

J’ai connaissance de deux façons de le faire jusqu’à présent :

  1. <span>some text</span>

    CSS :

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

  2. [wrap="indent"]some text[/wrap]
    Cela créera soit une div, soit un span (s’il y a d’autres contenus sur la même ligne), contenant les attributs suivants : class="d-wrap" et data-wrap="custom"

    CSS

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

Existe-t-il d’autres moyens de personnaliser un contenu choisi dans un message dont je ne suis pas au courant ?
Existe-t-il également un moyen d’ajouter une classe personnalisée à un élément ? Je n’ai rien trouvé dans la recherche. Je suppose que ce n’est pas possible ?

2 « J'aime »
2

Puis-je remonter ce sujet sans vergogne ?

Je n’ai trouvé aucun sujet répertoriant toutes les façons de personnaliser le contenu HTML d’une publication à l’aide de l’éditeur intégré de Discourse.

S’il en existe d’autres que les deux que j’ai mentionnés - qui sont très similaires -, peut-être qu’un howto pourrait être utile ?

1 « J'aime »
3

Je serais également curieux de voir quelles balises HTML fonctionnent dans le compositeur. Je pense l’avoir vu quelque part auparavant, mais je n’ai pas pu le trouver plus tôt aujourd’hui.

Par exemple, j’essayais d’ajouter un <button class="success">Click me</button> au compositeur, il s’affichait dans l’aperçu mais échouait lorsque je le publiais. Je pense que certaines balises HTML fonctionnent, mais je ne suis pas sûr desquelles.

4

Je suppose que ce sont les balises et attributs HTML autorisés par défaut :

Nous pouvons voir que l’attribut data-* est autorisé.

Ce fichier contient également la méthode [wrap=*] texte [/wrap] pour personnaliser un élément, qui ajoute l’attribut data-wrap avec la valeur *…

Je n’ai rien trouvé de plus pour le moment.

1 « J'aime »
5

Il est possible d’utiliser certaines classes HTML dans Discourse, cependant, la plupart du HTML dans un message est assaini pour des raisons de sécurité, et seul un HTML très strictement approuvé est autorisé dans le markdown. Pour ajouter des classes à la liste d’autorisation, vous devez utiliser un plugin, l’assainissement se produit côté serveur ainsi que côté client. Consultez Approbation des balises / attributs HTML pour plus de détails sur où ajouter les attributs approuvés, et je crois que cela ressemblerait à quelque chose comme ceci : Liste d’autorisation HTML de Discourse. et comme @RGJ l’a mentionné, veuillez noter que la fonction whiteList() est obsolète et s’appelle désormais allowList().

Concernant d’autres façons de personnaliser le contenu, les messages sont des widgets, et les thèmes Discourse ont la capacité de décorer les widgets, vous pourriez donc en tirer parti.

J’espère que cela vous aide !

7 « J'aime »
6

Merci pour votre réponse !

J’ai découvert votre premier lien cet après-midi.

Les fichiers du lien GitHub ont 7 ans, donc je suppose que le code pourrait être obsolète ?

Quoi qu’il en soit, j’ai utilisé ceci :

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

Que j’ai emprunté à GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

Il n’y a que quelques lignes de code dans mon plugin et je ne sais pas vraiment ce qu’il fait ni si tout est nécessaire, mais au moins je peux ajouter des spans avec une classe nolinkify.

Dans mon cas, le but était de facilement “dé-lier” des mots dans les posts avec Auto-Linkify Words (il n’accepte que les balises et les classes pour empêcher la création de liens), et en particulier des mots dans les balises HTML de titre lors de l’utilisation de DiscoTOC - automatic table of contents

J’ai également essayé une solution basée sur la syntaxe bbcode comme celle-ci :

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

J’ai donc essayé les deux solutions pour mon problème de balises de titre avec la table des matières.
Cela ne fonctionne pas :

## [nolinkify]test[/nolinkify]

Mais cela fonctionne :

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

J’aurais préféré la première syntaxe, mais je suppose qu’elle est incompatible avec la table des matières en raison de l’ordre d’exécution des scripts…

3 « J'aime »
7

Ce code ne fonctionne plus. Il est préférable de le supprimer de votre publication.

La réponse se trouve dans le sujet lié, comme @canapin l’a déjà découvert.

Veuillez noter que la fonction whiteList() est obsolète et qu’elle est appelée allowList() de nos jours.

3 « J'aime »
8

Ah oui, c’était même mentionné dans la console :+1:

3 « J'aime »
9

Merci de votre confirmation, le message original a été mis à jour pour plus d’exactitude.

2 « J'aime »
10

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