XenForo 2.3: Первый взгляд

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

Темный режим​

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

1694695492940.png
1694612120532.png
1694612354992.png
1694616451007.png
1694617171895.png
1694617408731.png

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

1694612251510.png

Это не XenForo 3.0​

Это не тот большой пересмотр дизайна, который изначально был запланирован для версии 2.3, который включал радикальные изменения в системе шаблонов и вводил ряд новых технологий, обеспечивающих значительные улучшения во многих областях XenForo.

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

Некоторые из новых систем, которые мы создали для поддержки дизайна 3.0, были адаптированы для работы с системой 2.3, и поддержка темного режима — одна из них.

Варианты стиля​

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

В настоящее время мы предоставляем два варианта, которые мы называем «по умолчанию» и «альтернативный». В стиле по умолчанию вариант по умолчанию соответствует светлой теме, а альтернативный вариант — темной теме.

Когда оба варианта соответствуют разным типам стилей (то есть светлому или темному), мы раскрываем их с помощью prefers-color-schemeмедиа-запроса. При этом автоматически выбирается вариант на основе предпочтительной цветовой схемы устройства, если пользователь явно не выбрал вариант для использования.

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

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

1694602899783.png

Стандартный и альтернативный​

Более того, хотя светлые стили теперь можно расширить для поддержки темных вариантов, то же самое относится и к существующим темным стилям, которые теперь могут определять светлые варианты. В настоящее время мы имеем в виду варианты «По умолчанию» и «Альтернативный », где «По умолчанию» может быть светлым или темным, а « Альтернативный » (обычно) — наоборот.

1694602934013.png

Свойства стиля​

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

1694602777696.png

Если включены варианты, пользователь может определять совершенно разные версии цвета для каждого варианта.

1694602968075.png

Обратите внимание, что возможность поддержки вариантов ограничена свойствами стиля типа значения цвета и не распространяется на свойства типа CSS. Конечно, это не означает, что свойства типа CSS не могут извлечь выгоду из системы вариантов, поскольку значения цвета, на которые они ссылаются, сами могут быть вариантами. То есть, если ваш CSS-заголовок использует @xf-chromeBg, который, в свою очередь, ссылается на @xf-paletteColor5, тогда он автоматически подберет значение варианта, @xf-paletteColor5 когда оно определено.

Будущее расширение​

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

Улучшения пользовательского интерфейса​

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

Кроме того, в свойствах стиля, где указаны цвета палитры, варианты автоматически наследуются при использовании полей по умолчанию или альтернативных полей, и ими можно управлять с помощью стандартных функций редактирования цвета, предоставляемых XenForo, таких как darkenи xf-intensify.

Естественно, функции xf-intensify и xf-diminish теперь учитывают светлый или темный режим, в котором они работают, делая цвета темнее или светлее в зависимости от способа пометки текущего варианта.

Цветовое пространство HSL​

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

Палитра цветов была обновлена, чтобы отразить это изменение.

1694603931568.png

CSS-переменные​

Более того, каждый компонент цвета HSL теперь представлен как переменная CSS . В XenForo 2.3 это позволяет переключаться между светлыми и темными вариантами, но полная полезность станет очевидна в XenForo 3.

Интересно попробовать, когда вы получите доступ к 2.3, используйте инспектор вашего браузера, чтобы найти значения HSL для paletteNeutral3, определенные как Переменные CSS --xf-paletteNeutral3--h, --xf-paletteNeutral3--sи --xf-paletteNeutral3--l и используйте клавиши курсора для регулировки значения вверх и вниз. Вы увидите, что все экземпляры этого цвета, используемые на странице, реагируют немедленно, независимо от каких-либо изменений, внесенных в них в последующих унаследованных цветах. Здесь мы скорректировали xf-paletteNeutral3 от hsl(0, 0%, 8%) до hsl(200, 50%, 20%) использование инспектора в Chrome, что приводит к изменению различных фонов и границ, основанным на корректировках исходного цвета.

1694608756513.png

Следует отметить, что операции, выполняемые с цветами, выполняются на стороне клиента , а не с помощью процессора LESS на стороне сервера, поэтому гораздо проще создавать прототипы широких настроек цвета.

Делаем это по-своему​

Чтобы предотвратить непредвиденное поведение при обновлении до XenForo 2.3, мы не будем вносить изменения ни в один из ваших стилей. Это включает в себя пометку ваших стилей как поддерживающих вариаций.

Чтобы включить варианты, отредактируйте каждый из своих стилей по очереди и включите параметр «Включить варианты». Затем перейдите в редактор свойств этого стиля и сосредоточьтесь на группах «Цветовая палитра» и «Основные цвета» .

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

Затем в группе «Основные цвета» мы поменяли местами ссылки на цвета «Нейтральный 3» (темный) и «Нейтральный 1» (светлый), а в некоторых случаях поменяли местами ссылки на цвета палитры, поэтому ссылки на « Палитру 1» теперь указывают на «Палитру 5» и т. д . , при необходимости внося дальнейшие корректировки с помощью встроенных функций цвета.

1694619513607.png

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

Видео​


Вот видео, показывающее все в действии:

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.
 
А смысл от темной темы, если это может сделать любой разработчик, создав свой стиль?
Еще есть плагин Dark Reader для браузера.
 
А смысл от темной темы, если это может сделать любой разработчик, создав свой стиль?
Еще есть плагин Dark Reader для браузера.
Потому что это база. А база должна быть из коробки. Вы еще на айФон предложите приложение использовать для темной темы. :D
 
OFFTOP

А релиза нету так понимаю еще?

 
скажем так, не впечатлило, надеюсь это не самое важное нововведение))
 
viper, чувствую когда впечатлит, то мы вспомним что стоило переехать с 1.5, на новую 2-ю версию, со всеми вытекающими...
 
скажем так, не впечатлило, надеюсь это не самое важное нововведение))
Так это же версия 2.3, ничего такого и не будет. Ждем 3 версию, где будет редизайн, я думаю заживем как люди :) А то реально много вопросов к UX в нынешней версии Xenforo.
 
Так это же версия 2.3, ничего такого и не будет. Ждем 3 версию, где будет редизайн, я думаю заживем как люди :) А то реально много вопросов к UX в нынешней версии Xenforo.
или опять (что вероятнее), геморрой на геморрое при потере функционала из-за прокисших модов. Я про 3 версию, если что.
 
или опять (что вероятнее), геморрой на геморрое при потере функционала из-за прокисших модов.
Обещали не сильно затрагивать кодовую базу. Так что скорее всего придется поправить шаблончики и все будет ок. Будем на это надеяться. Ну а вообще, скорее всего я поступлю так... Сделаю копию форума к себе на локалку. Обновлю и буду смотреть что отвалилось. Ну или можно по темам кочевничать и спрашивать "работает на xf 3.0?". :D
 
или опять (что вероятнее), геморрой на геморрое при потере функционала из-за прокисших модов. Я про 3 версию, если что.
А ты думал) сразу же под 3ю версию будут плагины? вроде так всегда было...с глобальных обновлений, всегда требовалось время для оптимизации. нужно только терпение и усилие авторов.
 
А при чем тут третья версия? Я про 2.3.

До третьей еще пару лет, судя по темпам разработчиков.

нужно только терпение и усилие авторов.
Одна проблема, 80% забило на свои плагины.
 
короче говоря, ничего толком не поменялось, что то пофиксили, что то доработали, но дизайн по факту не изменили... сделали бы стандартный дизайн в более современном стиле что ли...
 
Ninza313, Если вы внимательно читали, то новый дизайн будет в версии 3.0
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу