Пересборка темы Meta: новые иконки, кастомная главная страница и первый взгляд на Blocks API

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

Я расскажу о некоторых деталях реализации, начиная с более мелких пунктов:

Иконки Lucide

Lucide — это набор современных иконок в стиле линий с открытым исходным кодом, и мы внедряем его в нескольких проектах по кастомизации. В этой итерации мы также включили его в тему Meta Branded. Планов по замене Font Awesome в ядре Discourse нет, но бесплатный тариф Font Awesome предлагает лишь ограниченный набор иконок в стиле линий, которого недостаточно для формирования согласованной системы иконок. Компонент темы доступен по адресу Discourse Lucide Icons.

Модификатор темы для ограничения цветовых палитр

Мы добавили новый модификатор темы only_theme_color_schemes, который ограничивает доступные цветовые палитры для данной темы как для администраторов, так и для пользователей в их интерфейсных настройках. У Meta есть несколько выбираемых пользователем палитр, которые могли бы конфликтовать с визуальной идентичностью темы Meta Branded. С помощью этого модификатора в качестве вариантов предлагаются только палитры, включенные в тему. :link: PR: FEATURE: add modifier to restrict theme color schemes

Макет на всю ширину

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

Трансформатор значений для управления видимостью баннера приветствия

Мы использовали новый трансформатор значений welcome-banner-display-for-route для программной настройки отображения основного баннера приветствия на определенных маршрутах. Мы используем это, чтобы гарантировать, что баннер отображается только на домашней странице по умолчанию и не на страницах, которые пользователь мог установить в качестве своей личной стартовой страницы. :link: PR: DEV: Add welcome-banner-display-for-route value transformer

Теперь перейдем к двум более крупным изменениям:

Пользовательская домашняя страница через модификатор темы

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

Мы создали эти выделенные компоненты с помощью нашего нового экспериментального API Blocks, что приводит нас к самому крупному изменению:

API Blocks: Первое использование в продакшене

API Blocks — это новый фреймворк для создания модульных, композитных макетов в Discourse. Он позволяет разработчикам тем собирать страницы из самодостаточных, переиспользуемых компонентов, которые можно размещать в определенных областях макета. Тема Meta — это наше первое развертывание этого фреймворка в продакшене.

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

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

Это все еще ранняя версия системы в контексте продакшена. Мы планируем вскоре опубликовать документацию и больше примеров. :link: PR: DEV: Add Block API for declarative, validated UI extension points

19 лайков

Отличный выбор. Этот набор привлек мое внимание, когда я искал доступные для Discourse наборы иконок. Он утончённый и элегантный.

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

Я заметил, что вы решили эти проблемы в фирменной теме для Meta. Добавили ли вы для этого собственные иконки?


Кстати, логотип Discourse в левом верхнем углу в фирменной теме для Meta не кликабелен (насколько я помню, это длится уже несколько месяцев) :grimacing:

1 лайк

Нет, мы просто не сопоставили некоторые иконки, такие как circle и square, с версиями Lucide. Или, скорее, мы сопоставили только контурные версии Fontawesome для этих иконок (far-circle, …). Возможно, есть и другие случаи, когда нам нужно продолжать улучшать сопоставление.

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

У меня это не воспроизводится. У вас есть дополнительные детали?

3 лайка

Мне интересно, в чём разница: что Blocks добавляет, чего нет в Plugin Outlets?

2 лайка

Протестировано только в Chrome и Edge, и проблема возникает только на настольных компьютерах:

Блок переключения боковой панели перекрывает логотип, из-за чего на него невозможно нажать.

(и да, контурное сердце в виде лайка выглядит плохо :broken_heart: )

1 лайк

Мне совсем не нравится текущая иконка «ответил»:

Предполагаю, что это временное решение, так как в Lucide нет подходящего эквивалента для FA?—Иконки в списке тем очень-очень маленькие:Редактирование: то же самое и в других темах.Иконки категорий выглядят меньше, чем иконки тегов, и это странно. Мне кажется, что выбранный размер иконок категорий был ограничен стилем «категория в рамке», что оставляет для них меньше места… :thinking:

3 лайка

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

Похоже, что в личных сообщениях нет отступов для тела:

2 лайка

Согласен!

И тоже согласен с предыдущим: пустое сердце — это не хорошо.

2 лайка

Хм… мне кажется, стоит изменить иконку чата с message-square-text на message-square? Линии кажутся немного отвлекающими. Это изменение делает интерфейс «чище», и это довольно приятное изменение.

1 лайк

Спасибо за все отзывы по иконкам! Я только что создал отдельную тему для этого набора: Discourse Lucide Icons.

В идеале мы хотели бы собирать дальнейшие отзывы там и продолжать улучшать набор по мере работы.

Согласен, иконки сейчас почти нечитаемы при размере .74em. Им нужно около 1em.

1 лайк

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

1 лайк

Я тоже это заметил, пытался откатить это вручную (потому что предпочитаю плотность информации внешнему виду), но безрезультатно :frowning:

Основное отличие с точки зрения дизайна заключается в том, что PluginOutlet — это точка вставки. Вы внедряете свой компонент непосредственно в базовый шаблон. Каждое изменение кастомизации фактически меняет структуру приложения.

BlockOutlet — это каркас макета. Вы регистрируете один или несколько компонентов с этим каркасом. Затем кастомизация происходит внутри этого каркаса, а не в шаблонах приложения. Таким образом, мы получаем более предсказуемые и стабильные макеты.

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

1 лайк

Если кто-то хочет более компактный список тем, вот что сработало для меня:

.topic-list .topic-list-data {
  padding: 8px 0px;
  line-height: 0px;
}

Новая тема с брендингом Meta имеет, на мой вкус, слишком большие отступы на мобильных устройствах.

  • Первый отступ между границей экрана и контейнером контента.
  • Второй отступ между контейнером страницы и самим контентом.

В других темах такого первого зазора между границей экрана и контейнером контента нет.

Из-за этого контент немного «сплющивается» по горизонтали; места очень мало. Это хорошо заметно на странице «Мой пост» по сравнению с темой Horizon:

Тема Horizon позволяет отображать гораздо больше контента без потери читаемости.

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

Ещё несколько небольших замечаний:

Иконка в левом верхнем углу не идеально круглая. Она слегка сплюснута.
image image

В всплывающем окне категорий/тегов текстовое поле немного выходит за границы (не уверен, что это связано с данной темой):

. Было бы лучше, если бы оно было полностью закрыто.

1 лайк