Какие существуют способы кастомизации контента внутри поста (кастомные атрибуты и т.д.)

Поддержка
1

Насколько мне известно, есть два способа сделать это:

  1. <span data-theme-custom>какой-то текст</span>

    CSS:

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

  2. [wrap="indent"]какой-то текст[/wrap]
    Это создаст либо div, либо span (если на той же строке есть другой контент), содержащий следующие атрибуты: class="d-wrap" и data-wrap="custom".

    CSS

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

Есть ли другие способы кастомизировать выбранное содержимое в посте, о которых я не знаю?
Также есть ли способ добавить класс к элементу? В поиске ничего не нашёл. Думаю, это невозможно?

2

Могу ли я бесстыдно поднять эту тему?

Я не смог найти тему, в которой перечислены все способы кастомизации HTML-содержимого поста с помощью встроенного редактора Discourse.

Если есть способы, отличные от двух упомянутых мной (которые очень похожи), возможно, будет полезно создать хештег howto?

3

Мне тоже было бы интересно узнать, какие HTML-теги работают в редакторе. Мне кажется, я где-то это уже видел, но сегодня утром не смог найти.

Например, я пытался добавить <button class="success">Нажми меня</button> в редактор: в предпросмотре он отображался, но при публикации не сработал. Похоже, что некоторые HTML-теги работают, но точно неясно, какие именно.

4

Думаю, вот список HTML-тегов и атрибутов, разрешённых по умолчанию:

Как видно, атрибут data-* разрешён.

Этот файл также содержит способ [wrap=*] текст [/wrap] для кастомизации элемента, который добавляет атрибут data-wrap со значением *…

Пока больше ничего найти не удалось.

5

В Discourse можно использовать некоторые HTML-классы, однако из соображений безопасности большинство HTML-тегов в постах подвергается санитизации, и в Markdown разрешены только строго ограниченные белые списки HTML. Чтобы добавить классы в белый список, необходимо использовать плагин, поскольку санитизация выполняется как на стороне сервера, так и на стороне клиента. Подробнее о том, где добавлять разрешённые атрибуты, см. статью Whitelisting HTML tags / attributes. И, как я полагаю, это должно выглядеть примерно так: Discourse HTML Whitelist. Также, как отметил @RGJ, обратите внимание, что функция whiteList() устарела, и теперь она называется allowList() (см. реализацию).

Что касается других способов кастомизации контента: посты представляют собой виджеты, а темы Discourse позволяют декорировать виджеты, поэтому вы можете использовать эту возможность.

Надеюсь, это поможет!

6

Спасибо за ваш ответ!

Сегодня днём я наткнулся на вашу первую ссылку.

Файлы на GitHub датированы 7-летней давности, так что, полагаю, код может быть устаревшим?

В любом случае, я использовал это:

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

Что я позаимствовал из GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub

В моём плагине всего несколько строк кода, и я не совсем понимаю, что именно он делает и нужно ли всё это, но, по крайней мере, я могу добавлять span-элементы с классом nolinkify.

В моём случае цель заключалась в том, чтобы легко «отключать» ссылки на слова в постах с помощью Auto-Linkify Words (этот метод принимает только теги и классы для предотвращения создания ссылок), и особенно слова в заголовках HTML-тегов при использовании DiscoTOC - automatic table of contents

Я также попробовал решение на основе синтаксиса bbcode, например:

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

Итак, я попробовал оба решения для моей проблемы с заголовками и оглавлением.
Это не работает:

## [nolinkify]test[/nolinkify]

Но это работает:

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

Я бы предпочел первый синтаксис, но, думаю, он несовместим с оглавлением из-за порядка выполнения скриптов…

7

Этот код больше не работает. Лучше удалить его из вашего сообщения.

Ответ находится в связанной теме, как уже заметил @canapin.

Обратите внимание, что функция whiteList() устарела, и сейчас она называется allowList() вот здесь.

8

Ах да, это даже упоминалось в консоли :+1:

9

Спасибо за подтверждение, оригинальный пост был обновлен для обеспечения точности.