Универсальный bbcode-обертка для компонентов темы

Я добавил эту функцию некоторое время назад, но осознал, что не написал об этом. Теперь вы можете использовать специальный синтаксис в Markdown, чтобы контент был обработан и готов к использованию в компонентах темы без необходимости писать плагин.

// обернуто в div.d-wrap
[wrap=baz foo=bar]Content[/wrap]

// обернуто в div.d-wrap
[wrap=baz foo=bar]
Content
[/wrap]

// обернуто в div.d-wrap
[wrap=baz foo=bar]
[/wrap]

// этот случай будет отображен как span.d-wrap вместо div.d-wrap
a [wrap=baz]Content[/wrap] b

Имя компонента будет добавлено как атрибут data: data-wrap="baz", а все свойства также станут атрибутами data: data-foo="bar" для элемента.

Если вы хотите ознакомиться с реальным примером использования, см.

20 лайков

Привет, Жоффрей,

Спасибо за предложение этой функции в другой теме.

Я с энтузиазмом попробовал её использовать и проверить, подойдёт ли она для моего случая, однако столкнулся с проблемой.

Похоже, что она игнорирует имена атрибутов, содержащие несколько дефисов, и по умолчанию выбирает только символы после последнего дефиса.

Я использую версию v2.4.0.beta2 +33, приношу извинения, если это уже исправлено в более позднем коммите.

Примеры:

// Если несколько дефисов нет, всё работает корректно: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Content[/wrap]

// В этом случае из имени атрибута опускается "user", и результат data-id="1" вместо data-user-id="1".
[wrap=test2 user-id=1]Content[/wrap]

Следующий запрос необязателен: есть ли способ не оборачивать содержимое внутри div в тег

?

Спасибо за эту функцию, и надеюсь, что смогу использовать её для решения моей проблемы!

Я могу исправить первую проблему

1 лайк

Я только что применил исправление для этого. Небольшое отличие в том, что я не буду поддерживать foo-bar, а только fooBar. Теперь вы можете написать:

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

И получите:

<div data-wrap="foo" data-user-id="1">
</div>
5 лайков

Привет, @j.jaffeux!
Спасибо за эту функцию! Подскажите, пожалуйста, как лучше всего добавить поддержку таких элементов, как

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
  Добавить в корзину
</button>

в темы. И вообще — как добавить в белый список

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

Рабочий пример: https://codepen.io/thatfrankdev/pen/xxwRXQw

Вам нужно добавить декорирование вашего обертки в компонент темы, как мы делаем здесь, например: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

4 лайка

@j.jaffeux Спасибо за отличный совет!

Недавно мы расширили эту возможность для поддержки универсальных компонентов, используя:

```customblock param=1
```

Это будет преобразовано в:

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

Таким образом, как компонент, вы можете использовать data-code-wrap для определения специальной обработки, а подсветка синтаксиса отключена.

Мы использовали этот паттерн здесь:

Это официальный компонент темы Mermaid.

9 лайков