Welche verschiedenen Möglichkeiten gibt es, Inhalte innerhalb eines Beitrags anzupassen (benutzerdefinierte Attribute und dergleichen)

Unterstützung
1

Bisher sind mir zwei Möglichkeiten bekannt, dies zu tun:

  1. <span>some text</span>

    CSS:

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

  2. [wrap="indent"]some text[/wrap]
    Dies erstellt entweder ein div oder ein span (wenn sich anderer Inhalt in derselben Zeile befindet), das die folgenden Attribute enthält: class="d-wrap" und data-wrap="custom"

    CSS

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

Gibt es andere Möglichkeiten, ausgewählten Inhalt in einem Beitrag anzupassen, die mir nicht bekannt sind?
Gibt es außerdem eine Möglichkeit, einem Element eine benutzerdefinierte Klasse hinzuzufügen? Konnte nichts in der Suche finden. Ich schätze, das ist nicht möglich?

2 „Gefällt mir“
2

Darf ich unverschämt darauf hinweisen?

Ich konnte kein Thema finden, das alle Möglichkeiten auflistet, den HTML-Inhalt eines Beitrags mit dem integrierten Composer von Discourse anzupassen.

Wenn es andere gibt als die beiden, die ich erwähnt habe – die sich sehr ähneln –, wäre vielleicht eine #howto-Anleitung nützlich?

1 „Gefällt mir“
3

Ich wäre auch neugierig, welche HTML-Tags im Composer funktionieren. Ich glaube, ich habe es schon einmal irgendwo gesehen, konnte es aber heute Morgen nicht finden.\n\nZum Beispiel habe ich versucht, einen \u003cbutton class=\"success\"\u003eKlick mich\u003c/button\u003e zum Composer hinzuzufügen, er wurde in der Vorschau angezeigt, schlug aber fehl, als ich ihn postete. Ich glaube, einige HTML-Tags funktionieren, bin mir nur nicht sicher, welche.

4

Ich schätze, dies sind die standardmäßig erlaubten HTML-Tags und Attribute:

Wir können sehen, dass das Attribut data-* erlaubt ist.

Diese Datei enthält auch die [wrap=*] text [/wrap]-Methode zur Anpassung eines Elements, die das Attribut data-wrap mit dem Wert * hinzufügt…

Ich konnte bisher nichts weiter finden.

1 „Gefällt mir“
5

Es ist möglich, einige HTML-Klassen in Discourse zu verwenden. Die meisten HTML-Elemente in einem Beitrag werden jedoch aus Sicherheitsgründen bereinigt, und nur sehr streng weißgelistete HTML-Elemente sind in Markdown erlaubt. Um Klassen zur Weißliste hinzuzufügen, müssen Sie ein Plugin verwenden. Die Bereinigung erfolgt sowohl auf der Serverseite als auch auf der Clientseite. Weitere Details zum Hinzufügen von weißgelisteten Attributen finden Sie unter HTML-Tags/Attribute weißlisten. Ich glaube, es würde ähnlich aussehen wie hier: Discourse HTML Whitelist. Und wie @RGJ erwähnt hat, beachten Sie bitte, dass die Funktion whiteList() veraltet ist und heutzutage allowList() heißt.

Bezüglich anderer Möglichkeiten zur Anpassung von Inhalten sind Beiträge Widgets, und Discourse-Themes können Widgets dekorieren, sodass Sie dies nutzen könnten.

Ich hoffe, das hilft!

7 „Gefällt mir“
6

Danke für deine Antwort!

Ich bin heute Nachmittag auf deinen ersten Link gestoßen.
Die GitHub-Link-Dateien sind 7 Jahre alt, daher nehme ich an, dass der Code veraltet sein könnte?
Ich habe das hier verwendet:

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

Das habe ich von GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse übernommen.
In meinem Plugin gibt es nur ein paar Codezeilen und ich weiß nicht wirklich, was es tut und ob alles benötigt wird, aber zumindest kann ich Spans mit der Klasse nolinkify hinzufügen.
In meinem Fall war der Zweck, Wörter in Beiträgen einfach “entlinkbar” zu machen mit Auto-Linkify Words (es akzeptiert nur Tags und Klassen, um Linkifizierung zu verhindern) und insbesondere Wörter in HTML-Tags von Titeln bei Verwendung von DiscoTOC - automatic table of contents.
Ich habe auch eine BBCode-Syntax-basierte Lösung ausprobiert, wie diese:

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

Also habe ich beide Lösungen für mein Problem mit den Titel-Tags im Inhaltsverzeichnis ausprobiert.
Das funktioniert nicht:

## [nolinkify]test[/nolinkify]

Aber das funktioniert:

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

Ich hätte die erste Syntax bevorzugt, aber ich schätze, sie ist wegen der Ausführungsreihenfolge der Skripte mit dem Inhaltsverzeichnis inkompatibel.

3 „Gefällt mir“
7

Dieser Code funktioniert nicht mehr. Es ist besser, ihn aus deinem Beitrag zu entfernen.

Die Antwort ist im verlinkten Thema zu finden, wie @canapin bereits herausgefunden hat.

Bitte beachte, dass die Funktion whiteList() veraltet ist und heutzutage allowList() heißt und aufgerufen wird.

3 „Gefällt mir“
8

Ah, ja, es wurde sogar in der Konsole erwähnt :+1:

3 „Gefällt mir“
9

Vielen Dank für die Bestätigung, der ursprüngliche Beitrag wurde zur Korrektheit aktualisiert.

2 „Gefällt mir“
10

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