Компонент викифицированных постов

Простое описание

Этот компонент темы позволяет сделать посты в Вики (и посты «Общие правки») более заметными.

Вики и «Общие правки» — мощная функция Discourse, но многие пользователи не знакомы с этой концепцией и считают интерфейс слишком ненавязчивым. Этот компонент делает всё предельно ясным, объединяя материалы с Change the style of a wiki post.

Скриншоты

Подробное описание

Установка этого компонента позволяет вам управлять цветом фона постов Вики и добавлять текст к значку истории/редактирования в правом верхнем углу поста.

Это форк discourse-wikified-post-background-color от @pacharanero, в который включены материалы с Change the style of a wiki post и повторно использован код с Personal Message Bubbles от @Rhidian.

Настройки

Цвет фона постов Вики

Цвет фона постов Вики можно установить на любой понравившийся вам. По умолчанию используется значение ‘highlight’, но вы можете выбрать любой из следующих вариантов:

  1. Лучше всего работает, когда выбран цвет схемы (например, primary, secondary, tertiary и т. д.), так как они адаптируются к автоматическому тёмному режиму.
  2. Именованный цвет, распознаваемый в CSS (например, blue, red, yellow, black и т. д.)
  3. HTML-код цвета (например, #effbfb и т. д.)

Цвет фона постов «Общие правки»

Вы можете выбрать один из тех же вариантов цвета для постов «Общие правки» (см. плагин «Общие правки»)

Добавляемый текст для постов Вики

Это добавляет небольшой зелёный текст (по умолчанию Wiki Post) в правом верхнем углу поста:

image

Это динамический элемент: он меняет цвет вместе со значком истории, если недавно были внесены правки (это непреднамеренный, но приятный бонус):

image

Если вы не хотите, чтобы там отображался текст, просто удалите текст в настройке и сохраните её.

Добавляемый текст для постов «Общие правки»

Текст, отображаемый для постов «Общие правки». Он использует цвет Danger из вашей палитры.

image

Дорожная карта

  1. Автоматическая разметка тем тегом ‘wiki’

Пожалуйста, предлагайте свои идеи в ответе на этот пост.

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

26 лайков

Прекрасная работа, @nathank!
Я собираюсь заархивировать старый репозиторий с цветом фона для постов в вики-формате в пользу вашей новой версии, которая предлагает гораздо больше возможностей.

4 лайка

У кого-то ещё возникает эта ошибка?

Ошибка: Неопределённая переменная: "$Shared-edits-hide". В строке 42 файла common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

Мне не удалось воспроизвести проблему, и в коде я не вижу никаких очевидных ошибок. Можете ли вы предоставить нам дополнительную информацию?

1 лайк

Это произошло потому, что у меня было установлено значение Нет для параметра «Скрыть общие правки». Ошибка появлялась в настройках TC. После установки значения Да ошибка исчезла.

Я не понимаю, как это работает ни с «Нет», ни с «Да» в последней бета-версии Discourse. Вы используете старую версию Discourse? Извините, я вообще не добавлял контроль версий в это.

1 лайк

Извините, моя вина — немного устарело, да. Забыл протестировать снова после последнего обновления, пока вы не упомянули об этом. Спасибо. :slight_smile:

1 лайк

Только что обновил компонент для лучшей поддержки постов Shared Edits.

Это включает его адаптацию под изменения в Shared Edits, о которых говорится здесь:

2 лайка

Внёс небольшую правку в цвета фона по умолчанию, так как упоминания @ было сложно различить.

Также цвет фона для «Общих правок» теперь по умолчанию установлен как tertiary-very-low.

1 лайк

Отличный компонент. Однако он улучшает видимость только на странице темы. Можно ли изменить его так, чтобы значок вики отображался на странице категории, в списках тем «недавние», «непрочитанные» и т. д.?

Отличное предложение, и я уверен, что это возможно (приветствуется PR!).

Я решаю эту задачу, просто помечая посты тегом Wiki на своих инстансах. Конечно, это полуручной процесс — вы можете находить посты/темы вики с помощью расширенного поиска. Это также имеет дополнительный плюс: их легко обнаружить через навигацию в боковой панели.

Мне казалось, что было бы здорово добавить автоматическое тегирование постов вики как часть этого компонента каким-то образом (или сделать так, как вы предлагаете), но, боюсь, это не вызвало у меня достаточно проблем, чтобы выделить время на реализацию этой идеи.

2 лайка

Я задавал этот вопрос в 2021 году здесь: Add an icon in front of wikis in the topic list?

Ответ был следующим:

#запрос на добавление функции:

1 лайк

Ищу совета, как адаптировать фоновые цвета для автоматического тёмного режима.

В настоящее время выбранные мной светлые яркие цвета для фона делают сообщения нечитаемыми в тёмном режиме.

Возможно ли расширить цветовую палитру и выполнить расчёт цветов, чтобы определить фоновые цвета для вики-страниц и блокнотов?

Вы можете использовать теги для маркировки тем в стиле «вики».
К тегами, насколько я помню, можно применять стили CSS.
Также вы получите дополнительное преимущество в виде списка или возможности детального просмотра для них.

Кроме того, с помощью плагина можно автоматически добавлять тег «вики» к темам, содержащим вики-контент.

Вот почему я рекомендую использовать цвет схемы:

Если вы хотите отойти от стандартных цветов, вам нужно найти умный способ решения проблемы с тёмным режимом.

Хорошей функцией было бы добавить возможность указания цвета для тёмного режима. Я займусь этим, когда у меня появится свободное время.

1 лайк

Конечно. Но эти цвета слишком доминируют для фона.
Поэтому я мечтал о чём-то вроде 10% цвета схемы, смешанного с 90% фона. Предполагаю, что SASS (или что-то подобное) недоступен на фронтенде.
Но сработает ли какая-нибудь CSS-магия подобная этой?

Обновление: rgba(0, 255, 0, 0.1) работает довольно хорошо как в тёмном, так и в светлом режимах.

Функции SASS доступны в разделе настройки темы; они компилируются при сохранении ваших изменений. Однако вы не можете использовать функции SASS с переменными темы или CSS.
Если вы хотите применить функцию SASS к цвету из вашей цветовой схемы, необходимо использовать соответствующую переменную SASS.

Сработает :white_check_mark:

body {
    background: darken($secondary, 10%);
}

Не сработает :x:

body {
    background: darken($my_theme_variable, 10%);
}

Не сработает :x:

body {
    background: darken(var(--secondary), 10%);
}

И теоретически, думаю, то, что описано по вашей ссылке, должно сработать. :slight_smile:

3 лайка

Возможно, стоит попробовать. Вот руководство (для моей собственной справки) по использованию функции mix() в SASS:

https://subscription.packtpub.com/book/web-development/9781849694544/4/ch04lvl1sec45/the-mix-function