Я слежу за Discourse уже несколько лет, но колебался с переходом, так как не знаком с программированием и настройками командной строки. Однако захватывающие функции и открытая природа проекта в итоге убедили меня мигрировать с XenForo при помощи технически подкованного друга.
Теперь я полон энтузиазма, чтобы настроить свой форум! Как UI/UX-дизайнер, у меня много идей, но я не уверен, с чего начать. В XenForo я использовал темы, максимально близкие к моему видению, и вносил незначительные правки с помощью CSS. Встроенные опции тем также позволяли настраивать отдельные элементы интерфейса, например, фон сообщений или границы боковой панели, через графический интерфейс.
В Discourse я вижу опцию палитры цветов, но есть ли встроенные средства для более детальной стилизации, или мне придётся полагаться на код для всего? Любые рекомендации будут очень кстати! Тем не менее, я по-настоящему впечатлён функциональностью Discourse и с нетерпением жду возможности исследовать его потенциал.
Помимо палитры цветов, всё остальное — это CSS/SCSS, а при необходимости и другие технологии (JS, HTML).
Возможно, вас заинтересует это:
Вы можете создавать темы и компоненты. Компоненты похожи на «подтемы» (они могут содержать стили и функции), и любой компонент можно включить для одной или нескольких тем.
Существует инструмент командной строки, который помогает создавать темы и компоненты. Рекомендую вам ознакомиться с ним:
Также есть специальная страница, где перечислены большинство HTML-элементов Discourse, чтобы вы могли получить общее представление о том, как они выглядят, и создать соответствующие стили.
Эту страницу необходимо включить с помощью настройки сайта Включить гайдлайн стилей.
Хотя мне это кажется немного пугающим, я всё равно настроен позитивно. Спасибо за такой замечательный ответ! Думаю, гайдлайн по стилю точно пригодится. Огромное спасибо!
@manuel расширяет возможности для создания и настройки тем без написания кода (или с минимальным его использованием). Я бы начал именно оттуда (чисто эгоистично: мне бы очень хотелось следить за вашим прогрессом в этом, пока у меня не появится время самостоятельно углубиться в тему , так что если вы этим займетесь, пожалуйста, делитесь обратной связью и отчётами по ходу дела!!!). Похоже, он внедряет некоторые упрощения для таких энтузиастов UI/UX, как мы.
Нет, не для всего, но для реализации любого более кастомного дизайна, я думаю, вам придётся писать код. Мои рекомендуемые шаги:
Изучите, как использовать Theme CLI gem, который уже упомянул @Canapin. Это может показаться сложным первым шагом, но если что-то и заставит вас влюбиться в кастомизацию Discourse, так это этот маленький gem! Это как волшебная палочка для дизайнеров Без него вы, скорее всего, будете сталкиваться с трудностями на каждом шагу.
Практикуйте применение стилей с помощью пользовательских свойств CSS.
Мне кажется, что руководства в этом отношении устарели. Для создания по-настоящему последовательной системы дизайн-токенов ещё многое предстоит сделать, но Discourse уже продвинулся очень далеко! Понимание того, где и как используются пользовательские свойства, сильно поможет вам освоить лучшие практики фронтенда Discourse.
Вы можете найти пользовательские свойства, используя инспектор браузера, или посмотреть этот список для общего представления: Документирование пользовательских свойств. И вы можете стилизовать недавние шаблоны, например боковую панель, почти полностью с помощью пользовательских свойств.
Как предложил @denvergeeks, вы можете ознакомиться с шаблоном темы Canvas. Он добавляет набор пользовательских свойств для стилизации макета, которых нет в ядре.
, так что если вы этим займетесь, пожалуйста, делитесь обратной связью и отчётами по ходу дела!!!). Похоже, он внедряет некоторые упрощения для таких энтузиастов UI/UX, как мы.
Без него вы, скорее всего, будете сталкиваться с трудностями на каждом шагу.