Пересборка темы 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

17 лайков

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

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

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


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

1 лайк

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

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

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

2 лайка

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

1 лайк

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

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

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

1 лайк

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

Предполагаю, что это временное решение, так как в Lucide нет подходящего эквивалента для Font Awesome?


Иконки в списке тем очень, очень маленькие:

Редактирование: то же самое наблюдается и в других темах.


Иконки категорий выглядят меньше, чем иконки тегов, и это странно. Мне кажется, что выбранный размер иконок категорий в целом был ограничен стилем «коробочных» категорий, что оставляет меньше места… :thinking:

3 лайка

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

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

2 лайка

Согласен!

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

2 лайка

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

1 лайк

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

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

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

1 лайк