Мы только что выпустили вторую итерацию нашей новой темы. В то время как первое обновление было визуальным обновлением, построенным поверх предыдущей темы Meta Branded, эта версия представляет собой по сути новую тему, переписанную с нуля. Новый фирменный стиль уже был представлен в предыдущем выпуске, поэтому с этой точки зрения видимых изменений немного. Значительно изменилась сама реализация темы и то, что она демонстрирует в отношении наших планов по кастомизации Discourse в целом.
Я расскажу о некоторых деталях реализации, начиная с более мелких пунктов:
Иконки Lucide
Lucide — это набор современных иконок в стиле линий с открытым исходным кодом, и мы внедряем его в нескольких проектах по кастомизации. В этой итерации мы также включили его в тему Meta Branded. Планов по замене Font Awesome в ядре Discourse нет, но бесплатный тариф Font Awesome предлагает лишь ограниченный набор иконок в стиле линий, которого недостаточно для формирования согласованной системы иконок. Компонент темы доступен по адресу Discourse Lucide Icons.
Модификатор темы для ограничения цветовых палитр
Мы добавили новый модификатор темы only_theme_color_schemes, который ограничивает доступные цветовые палитры для данной темы как для администраторов, так и для пользователей в их интерфейсных настройках. У Meta есть несколько выбираемых пользователем палитр, которые могли бы конфликтовать с визуальной идентичностью темы Meta Branded. С помощью этого модификатора в качестве вариантов предлагаются только палитры, включенные в тему.
PR: FEATURE: add modifier to restrict theme color schemes
Макет на всю ширину
Мы также экспериментируем с настройками компонента Discourse Full-width, чтобы лучше центрировать основной контент на странице. В шапке много динамических элементов, что усложняет настройку, поэтому пока это экспериментальная функция, доступная только в ветке компонента.
Трансформатор значений для управления видимостью баннера приветствия
Мы использовали новый трансформатор значений welcome-banner-display-for-route для программной настройки отображения основного баннера приветствия на определенных маршрутах. Мы используем это, чтобы гарантировать, что баннер отображается только на домашней странице по умолчанию и не на страницах, которые пользователь мог установить в качестве своей личной стартовой страницы.
PR: DEV: Add welcome-banner-display-for-route value transformer
Теперь перейдем к двум более крупным изменениям:
Пользовательская домашняя страница через модификатор темы
Модификатор темы custom_homepage доступен уже почти два года, но впервые мы используем его для формирования опыта работы с домашней страницей на Meta. Мы представляем пользовательскую стартовую страницу, наполненную выделенными компонентами. Для первоначального запуска это включает выделенные категории и предпросмотр последних тем обсуждений.
Мы создали эти выделенные компоненты с помощью нашего нового экспериментального API Blocks, что приводит нас к самому крупному изменению:
API Blocks: Первое использование в продакшене
API Blocks — это новый фреймворк для создания модульных, композитных макетов в Discourse. Он позволяет разработчикам тем собирать страницы из самодостаточных, переиспользуемых компонентов, которые можно размещать в определенных областях макета. Тема Meta — это наше первое развертывание этого фреймворка в продакшене.
Фреймворк предлагает богатый набор инструментов для разработчиков: включите инструменты разработчика, и вы сможете изучить структуру блоков любой страницы с помощью встроенного оверлея, визуализирующего все активные области макета и их компоненты.
Помимо домашней страницы, мы также используем блоки для отображения пользовательских баннеров категорий, показывающих подкатегории каждой категории:
Это все еще ранняя версия системы в контексте продакшена. Мы планируем вскоре опубликовать документацию и больше примеров.
PR: DEV: Add Block API for declarative, validated UI extension points








