Generischer BBCode-Wrapper für Theme-Komponenten

Ich habe diese Funktion vor einiger Zeit hinzugefügt und gemerkt, dass ich nichts darüber veröffentlicht habe. Sie können nun eine spezielle Syntax in Markdown verwenden, um sie in Theme-Komponenten zu verarbeiten und nutzbar zu machen, ohne ein Plugin schreiben zu müssen.

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]Inhalt[/wrap]

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]
Inhalt
[/wrap]

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]
[/wrap]

// dieser wird als span.d-wrap statt als div.d-wrap gerendert
a [wrap=baz]Inhalt[/wrap] b

Der Name der Komponente wird als Datenattribut hinzugefügt: data-wrap="baz", und jede Eigenschaft wird ebenfalls als Datenattribut auf dem Element hinzugefügt: data-foo="bar".

Wenn Sie ein reales Anwendungsbeispiel lesen möchten, sehen Sie hier nach:

20 „Gefällt mir“

Hallo Joffrey,

vielen Dank für den Vorschlag zu dieser Funktion im anderen Thema.

Ich hatte große Lust, es auszuprobieren und zu sehen, ob es in meinem Fall funktioniert. Allerdings bin ich auf ein Problem gestoßen.

Es scheint Attributnamen zu ignorieren, die mehrere Bindestriche enthalten, und wählt standardmäßig nur die Zeichen nach dem letzten Bindestrich aus.

Ich verwende v2.4.0.beta2 +33. Es tut mir leid, falls dies in einem neueren Commit bereits behoben wurde.

Beispiele:

// Ohne mehrere Bindestriche funktioniert das einwandfrei: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Inhalt[/wrap]

// Auf diese Weise wird „user

Ich kann das erste Problem beheben

1 „Gefällt mir“

Ich habe gerade eine Korrektur dafür veröffentlicht. Der kleine Unterschied besteht darin, dass ich foo-bar nicht unterstütze, sondern fooBar. Du kannst also jetzt schreiben:

[wrap=foo userId=1]
[/wrap]

Und du erhältst:

<div data-wrap="foo" data-user-id="1">
</div>
5 „Gefällt mir“

Hallo @j.jaffeux,
danke für dieses Feature! Weißt du, wie man am besten eine Funktion für Dinge wie

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
  In den Warenkorb
</button>

in Themen hinzufügt? Und allgemein – wie man

class="snipcart-add-item" data-item-id="product-1"

auf die Whitelist setzt.
Funktionsfähiges Beispiel – https://codepen.io/thatfrankdev/pen/xxwRXQw

Du musst dein Wrap in einem Theme-Komponenten-Modul dekorieren, wie wir es hier beispielsweise tun: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

4 „Gefällt mir“

@j.jaffeux Danke für den tollen Rat!

Kürzlich haben wir dies erweitert, um generische Komponenten zu unterstützen, indem wir Folgendes verwenden:

```customblock param=1
```

Dies wird übersetzt zu:

<pre data-code-param="1" data-code-wrap="customblock"><code></code></pre>

Somit können Sie als Komponente data-code-wrap verwenden, um spezielle Handhabung zu bestimmen, und die Syntaxhervorhebung ist deaktiviert.

Wir haben dieses Muster hier verwendet:

Dies ist eine offizielle Mermaid-Theme-Komponente.

9 „Gefällt mir“