Добавляем популярные функции в Discourse: поиск в заголовке, баннер приветствия и иконки категорий / эмодзи

[lindsey (Lindsey Fogle)]

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

Поиск в заголовке

Функция поиска в заголовке перемещает поиск из значка лупы в правом верхнем углу в более заметное поле ввода в заголовке сайта.

Когда требуется больше места в заголовке (например, при прокрутке темы), поиск вернется к значку лупы, чтобы сэкономить место.

Чтобы включить поиск в заголовке…

1. В административной панели перейдите в раздел Темы и компоненты.
2. Нажмите кнопку Редактировать для вашей активной темы.
3. Найдите настройку Опыт поиска.
4. Измените эту настройку на «Поле поиска в заголовке сайта».
5. Нажмите зеленую галочку, чтобы сохранить.

Функция поиска в заголовке против компонента Расширенный поиск в заголовке

Поиск в заголовке был вдохновлен компонентом тем «Поиск в заголовке», который мы переименовали в Расширенный поиск в заголовке, чтобы отличить его от основной функции.

Вам следует использовать компонент «Расширенный поиск в заголовке», когда вам нужна поддержка внешних поисков (т. е. поисков вне вашего сообщества Discourse). В противном случае вы можете использовать функцию поиска в заголовке, которая теперь является частью ядра Discourse.

Приветственный баннер

Приветственный баннер приветствует участников и посетителей и добавляет заметную строку поиска в ваши списки тем.

Функции приветственного баннера и поиска в заголовке совместимы друг с другом, поэтому поиск в заголовке будет скрыт, пока виден приветственный баннер.

Чтобы включить приветственный баннер…

1. В административной панели перейдите в раздел Темы и компоненты.
2. Нажмите кнопку Редактировать для вашей активной темы.
3. Найдите настройку Включить приветственный баннер.
4. Включите эту настройку.
5. Нажмите зеленую галочку, чтобы сохранить.

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

Приветственный баннер против компонента Расширенный поисковый баннер

Приветственный баннер был вдохновлен компонентом «Поисковый баннер», который мы переименовали в Расширенный поисковый баннер, чтобы отличить его от основной функции.

Вам следует использовать компонент «Расширенный поисковый баннер», если вы хотите использовать пользовательские фоновые изображения для баннера, вводить несколько строк текста в баннере или изменить, кто может видеть баннер (т. е. авторизованные участники, неавторизованные пользователи или оба варианта). В противном случае вы можете использовать функцию приветственного баннера, которая теперь является частью ядра Discourse.

Иконки и эмодзи категорий

Теперь вы можете использовать иконки и эмодзи для различения категорий вместо цветного квадрата.

Чтобы использовать иконки / эмодзи категорий…

1. При создании или редактировании категории измените настройку Стиль на Иконка или Эмодзи.
2. Выберите иконку или эмодзи, которые вы хотите использовать. Цвет определит цвет иконки (если используется) и повлияет на другие области, где цвет связан с категорией, например, на странице /categories.
3. Нажмите Сохранить категорию.

Иконки и эмодзи категорий против компонента Иконки категорий

Иконки и эмодзи категорий были вдохновлены компонентом Иконки категорий, который мы скоро устареем в пользу этой основной функции, поскольку он поддерживает больше настроек (например, эмодзи) и предлагает гораздо более простой процесс настройки.

Для тех, кто в настоящее время использует «Иконки категорий», мы рекомендуем перенести ваши настройки иконок из компонента «Иконки категорий» в основные настройки категорий для долгосрочной поддержки и постоянных улучшений функций. В наших тестах настройки компонента переопределяют настройки основной функции, но они не были предназначены для совместного использования.

[AquaL1te]

Я хотел перейти на метод иконок категорий в нативном стиле. Но я заметил, что компонент темы содержит гораздо больше иконок. Из всех иконок, которые я использовал, теперь с нативными иконками категорий работает лишь небольшой подмножество. Предполагаю, что разница в том, что один использует FontAwesome, а другой — эмодзи? Я действительно использую опцию «icons», но при их поиске они не отображаются (после отключения компонента темы для иконок категорий).

Пример того, что я использую сейчас:

[Arkshine]

Вы можете добавить недостающие иконки в настройку сайта «Подмножество SVG-икон».

[krystal (Krystal S)]

@lindsey

Вам следует использовать компонент расширенного поиска заголовков, если вам нужно поддерживать внешние поисковые запросы (т. е. поисковые запросы за пределами вашего сообщества Discourse).

Как это работает? Это значит, что можно искать во внешних источниках, находясь в Discourse? Или это просто означает поиск по Discourse из внешнего источника?

[Heliosurge (Dan DeMontmorency)]

@lindsey

Иконки и эмодзи категорий

Теперь вы можете использовать иконки и эмодзи для различения категорий вместо цветных квадратов.

Это отличное дополнение! Спасибо! В сочетании с пользовательскими эмодзи это предоставляет впечатляющие возможности для кастомизации!

[AquaL1te]

@lindsey

Значки категорий и эмодзи

Тем не менее, есть ещё одно отличие: при использовании компонента темы подкатегории получают вот такой приятный штрих:

Этого нет при использовании стандартного варианта значка категории. Верхний значок в этом случае исчезает.

[tomtjes (Thomas Reintjes)]

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

[Arkshine]

@AquaL1te

Это не отображается с опцией нативной иконки категории. Верхняя иконка затем исчезает.

Думаю, это будет поддерживаться после слияния этого PR:

FIX: add category badge style to category list (#32109)

@tomtjes

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

Это должно быть возможно с помощью CSS.
Вы можете установить цвет по умолчанию для всех иконок, а затем, основываясь на классе .anon (для неавторизованных пользователей) и имени группы пользователя (см. CSS Classes for Current User's Groups), вы можете либо скрыть иконку, либо изменить её цвет на серый.

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

[mcwumbly (Dave McClure)]

@tomtjes

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

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

Также по теме: Allow users with access to a restricted category to see who else has access

[gooseegg]

Всем привет,

Недавно мы обновили наш форум Discourse (tw.forumosa.com), и с последним обновлением на главной странице появились новый заголовок «С возвращением» и интегрированная строка поиска. Хотя концепция выглядит неплохо, мы заметили некоторые проблемы с удобством использования — особенно на мобильных устройствах:

1. Выпадающее меню поиска может быть нечитаемым из-за прозрачности

При нажатии на значок поиска в верхней панели навигации (например, на Android) появляется выпадающее меню, но у него прозрачный фон, из-за чего результаты поиска практически невозможно прочитать на фоне контента позади. Твёрдый фон должен решить эту проблему. Ниже я прикрепил скриншоты, чтобы было понятнее.

2. Заголовок слишком высокий — как настроить вертикальные отступы?

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

Это может затрагивать и настольные версии, но сейчас особенно проблематично на мобильных устройствах.

Сталкивался ли кто-нибудь с этим и нашёл ли чистый способ переопределить это через CSS или компоненты темы?

Спасибо!

[Arkshine]

Стоит отметить, что баннер обновления также перекрывает элементы выше:

Похоже, что z-index для .welcome-banner (сейчас 1) должен быть как минимум >= 3. (основная ссылка и метаданные используют z-index: 2)

[davidkingham]

@Arkshine

Я думаю, это будет поддерживаться, как только этот PR будет принят:

Боюсь, что это всё ещё не работает

[David_Ghost]

Вам нужно добавить иконки в подмножество SVG-иконок, если это еще не сделано

[davidkingham]

Спасибо, но я уже делаю это:

[lindsey (Lindsey Fogle)]

На какой странице это?

Похоже, что на /categories иконки отображаются как положено, но неясно, связано ли это с тем, что вы всё ещё используете компонент темы, или же проблемы, с которыми вы сталкиваетесь, возникают на другой странице, которую нам нужно исправить.

[maiki]

У меня только что был отличный опыт: я переключил свой личный сайт на тему Horizon и установил иконки для своих категорий… прямо с мобильного устройства!

Это невероятно, и я ценю усилия, приложенные для того, чтобы сделать работу администратора такой плавной.