Иконка Discourse

:discourse2: Краткое описание Discourse Icon позволяет использовать иконки из вашего набора SVG-икон в постах.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-icon
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Использование:

[wrap=icon id=square][/wrap]

Пример:
Это иконка и иконка .

Это иконка [wrap=icon id=far-square][/wrap] и иконка [wrap=icon id=pencil][/wrap].

Примечание: если иконка не отображается, значит она отсутствует в вашем наборе. Если вы администратор, вы можете добавить её в настройках сайта: svg icon subset.


:discourse2: Размещено нами? Компоненты тем доступны для использования в наших тарифах Standard, Business и Enterprise.

31 лайк

Отлично! Это легендарно!

(у meta очень много тем, но, к счастью, благодаря @kris.kotlarek у нас есть кнопка «Добавить ко всем темам»… нужно навести там порядок, потому что на применение магии уходит довольно много времени)

13 лайков

Да, пока не хотел добавлять ко всем, так как только закончил кодировать :grin:, но сейчас сделаю.

Редактирование: о, уже сделано.

10 лайков

Спасибо, это очень весело! :sunglasses:

Я никогда не работал с BB-тегами и не кодировал вручную FontAwesome, поэтому использование пары пустых тегов всегда казалось мне странным. Это общепринятая практика или есть какая-то причина в веб-разработке для использования пар тегов? Также, могут ли они содержать что-то между собой, влияет ли это на текст?

3 лайка

Здесь есть несколько причин.

Во-первых, когда я реализовывал функцию обёртки BBCode, @sam прямо попросил меня поддерживать три формата:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

Это сделано для согласованности с нашим текущим использованием BBCode в Discourse.

Я мог бы использовать более удобный синтаксис, например [icon=times], но тогда это должно было бы быть плагином, а не компонентом темы.

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

Ещё одна идея — добавить API для вставки символов автодополнения в редактор, как это уже сделано для пользователей, категорий и эмодзи. Однако я опасаюсь, что это превратится в кошмар, если несколько компонентов будут выбирать свои собственные символы…

5 лайков

О! Мне нужно добавить поддержку ещё одного bbcode-тега, и я думал, что использую это как отправную точку, но вы говорите, что обёртка обрабатывается в ядре, что объясняет, почему я не могу найти, как это делается в вашем компоненте темы.

Моё текущее решение — использовать компонент связанных слов и ужасный регулярное выражение, но я всё ещё борюсь с добавлением необходимых классов к ссылкам.

3 лайка

Да, прочитайте эту тему, чтобы узнать больше:

4 лайка

Ладно, я уже разглядывал это с десяток раз. Распечатал код вашего компонента и часами смотрел на него, пытаясь понять, что именно я не понимаю — степень использования JavaScript или Ember. Неужели я не могу добавить тег [foo] без плагина? Или я каким-то образом могу заменить в вашем коде wrap на foo, чтобы поддержать мой новый bbcode?

1 лайк

Нет, вы не можете. Это связано с тем, что часть функционала реализуется на стороне сервера. Если вы хотите создать собственный BBCode, вам потребуется написать плагин. В качестве примера можно посмотреть, как реализован тег wrap:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5 лайков

Спасибо! Начинает иметь смысл. У меня не было таких трудностей при изучении нового языка с тех пор, как C++ и Objective Pascal в 1990 году.

Мой текущий хак с регулярными выражениями почти работает. Мне нужно будет решить, пойти ли по пути плагина или остаться с этим хаком (и понять, как добавить классы).

По крайней мере, теперь я понимаю, почему не могу найти этот обёртывающий элемент в компоненте темы!

3 лайка

Я могу придумать несколько возможных вариантов синтаксиса для добавления в плагин wrap:

[wrap=foo /]
[wrap/=foo]

(имитируя самозакрывающиеся теги XML), но оба варианта выглядят довольно некрасиво :confused:

У кого-нибудь есть отличные идеи для чего-то, что выглядит нормально?

3 лайка

Я не очень люблю такие штуки :confused:

6 лайков

Я обнаружил серьёзную ошибку…

Если использовать обёртку для иконки, а затем выделить и процитировать текст, результирующее изображение становится неестественно увеличенным:

  • Используйте обёртку для иконки в предложении поста. Например: Это иконка [wrap=icon id=far-check-square][/wrap]
  • Выделите соответствующий текст и выберите «Цитировать»
  • В цитате иконка становится чрезмерно большой

Вот как выглядит синтаксис при цитировании с выделением:

[quote="JammyDodger, post:1, topic:294, full:true"]
Это иконка ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

Это ответ, где она становится огромной

Однако цитирование через значок речевого пузыря в панели форматирования работает корректно.

4 лайка

Как вы можете выделить иконку цитаты? На моём тестовом сайте иконка пропускается.

Я не уверен? Я просто использую мышь.

Какой браузер вы используете?

Я протестировал с помощью мыши Chrome и Firefox, но не смог выбрать иконку. :thinking:


РЕДАКТИРОВАНИЕ:

Если вы обернёте иконку, недоступную в текущем наборе, будет создана SVG-изображение.
Затем вы сможете процитировать её.

2 лайка

Можете привести пример? На вашем скриншоте показан отмеченный флажок, и у меня нет проблем с его выбором в тестовом экземпляре (а также с другими иконками, которые, вероятно, не используются в Discourse, например, x-ray).

2 лайка

Я вижу проблему. Компонент ищет наличие обёртки с классом d-wrap; но если предоставленная иконка не входит в подмножество, обёртки нет. Вместо этого создаётся изображение в формате SVG.

Например:

SVG, иконка из подмножества

Изображение как SVG, иконка не из подмножества

Если вы процитируете изображения, компонент ничего не сделает, так как обёртки нет (а изображение преобразуется в Markdown, в результате чего получится изображение без каких-либо классов).

1 лайк

Это означает, что мне нужно иметь поле svg_icons в файле settings.yml, доступном в моей теме? Или я могу использовать любое поле svg_icons, доступное из любого включенного компонента темы? И если это так, имеет ли смысл добавлять это поле в этот компонент темы?

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

Потому что, исходя из моего опыта, SVG-значки преобразуются в теги <img />, и они не наследуют currentColor при изменении цветовой схемы:

Пожалуйста, сравните абзац Пример:

2 лайка

Можно ли улучшить отображение в тёмной теме?

Хотелось бы, чтобы цвета были такими же, как в интерфейсе:

3 лайка