Canvas предоставляет гибкий шаблон, позволяющий создавать пользовательские темы с меньшим количеством кода. Легко изменяйте свойства и значения конфигурации, чтобы адаптировать тему под свои нужды.
Примеры видов
Базовый шаблон сохраняет значения по умолчанию и остаётся нейтральным в дизайне.
Синхронизируйте тему с вашим экземпляром Discourse, используя discourse_theme gem.
Перейдите в административную панель и вручную измените следующие настройки компонента темы: Баннеры категорий
Точка подключения плагина → above-main-container Баннеры тегов
Показывать под заголовком сайта → снять галочку
Показывать над основным контейнером → установить галочку
Отредактируйте scss/properties.scss, чтобы определить значения пользовательских свойств
Отредактируйте about.json, чтобы добавить ресурсы, цветовые схемы и другие компоненты темы
Более подробный обзор настройки
Шаблон Canvas Theme лишь расширяет базовую структуру темы по умолчанию, объединяя несколько компонентов темы и добавляя некоторые готовые файлы стилей. Фактические функции обрабатываются отдельным компонентом темы Canvas Settings. Этот компонент выполняет две функции:
Он назначает пользовательские свойства, которые можно использовать с шаблоном. Таблица со списком всех свойств находится в файле Readme шаблона.
Такая раздельная настройка позволяет создавать тему, используя шаблон Canvas, при этом получая выгоду от постоянных исправлений и обновлений, предоставляемых через компонент.
Примеры тем
Вы можете просмотреть общие примеры тем по адресу https://canvas.kostka.studio. Внизу боковой панели есть переключатель тем для изменения дизайна.
Изучите код общих примеров видов или установите их в качестве стартовой темы из следующих репозиториев:
Настройки находятся в компоненте темы, установленном как Настройки Canvas. Возможно, немного вводит в заблуждение то, что на интерфейсе настройки всегда называются Настройки темы, даже в компонентах тем.
Баннер категории также отображается в том же месте — над боковой панелью. Разделы «Последние темы» и «Горячие темы» правильно показаны в основной колонке.
Я предполагаю, что цель темы не в том, чтобы полностью охватить интерфейс администратора, однако светлая и тёмная цветовые палитры редактора делают боковую панель администратора довольно отличной от основной. Мне интересно, возможно ли привести её в соответствие с неадминистративной боковой панелью.
Тема предназначена для отображения баннеров рядом с боковой панелью, используя точку вставки above-main-container. Компонент Extra-Banners по умолчанию использует эту точку вставки, однако два компонента для баннеров категорий и тегов по умолчанию отображаются под заголовком. Я не хотел бы делать форк этих компонентов только для того, чтобы установить другую точку вставки по умолчанию. Именно поэтому я добавил эти инструкции:
Но если это легко упустить из виду, может быть, есть лучший способ это сформулировать?
Да, это достаточно просто, и это кажется хорошим подходом для этой темы. Я только что добавил коммит!
Ага, теперь я понимаю, как мы к этому пришли. Мы не обязательно хотим менять настройки по умолчанию в компонентах баннеров категорий/тегов, и не хотим их форкать. Это сложно исправить, поэтому пока оставим как есть и посмотрим, столкнутся ли с этой проблемой другие.
Изменения в боковой панели администратора уже выглядят хорошо, спасибо!
Можно ли немного подробнее расписать эти инструкции? Разве нельзя просто установить через админ-интерфейс? Спасибо
РЕДАКТИРОВАНИЕ: Я установил через админ-интерфейс, и всё, кажется, работает, но нигде не видно возможности редактировать SCSS.
РЕДАКТИРОВАНИЕ: Забыл, я понял, что это, вероятно, ожидаемое поведение, и вы предлагаете редактировать файлы темы напрямую. Интересно, не планируется ли добавить такую возможность в админ-интерфейс? Например, редактор переменных, аналогичный редактору настроек.
Затем объявите пользовательские свойства в его CSS-файле. Вы можете либо найти свойства в файле Readme, либо скопировать содержимое properties.scss из репозитория темы.
Однако, если вы хотите иметь возможность синхронизировать изменения, я полагаю, вам нужно будет клонировать репозиторий локально, а затем выполнять пуш оттуда. Что-то вроде этого:
Я не вижу значок «плюс» в мобильной версии GitHub. Возможно, стоит попробовать команды в терминале, когда вы находитесь на главной странице.
В панели управления GitHub я вижу только возможность создать новый репозиторий, но нет опции «Заявить о себе». У меня бесплатный аккаунт, поэтому не уверен, связано ли это с этим.
Возможности ограничены по сравнению с объявлением пользовательских переменных в таблице стилей. Но это позволяет поэкспериментировать с несколькими вариантами внешнего вида. Буду рад узнать, подходит ли такой подход!
Я только что исправил стили CSS для боковой панели с твёрдой структурой, прокрутка должна снова работать!
Однако боковая панель с твёрдой структурой — это лишь один из вариантов в компоненте «Стили», о котором я упоминал в сообщении выше. Если вы хотите изменить больше стилей (например, отступы меню боковой панели), вам нужно следовать подходу, описанному выше в разделе Использование и Более подробный обзор настройки: используйте собственный файл стилей с пользовательскими свойствами CSS — в данном случае это будет -d-sidebar-row-height.
Я подготовил новый пример темы на основе этого шаблона. Как следует из названия, это дань уважения оригинальной теме Central!
Мне очень понравилась структура и визуальный стиль Central, и я уже упаковал некоторые его функции в отдельные компоненты, такие как Пользовательское меню и несколько блоков боковой панели.
Я понял, что с помощью боковой панели и некоторых стилей этот шаблон позволяет довольно близко приблизиться к внешнему виду и ощущениям оригинальной темы.
В любом случае, я не планирую полностью воссоздавать тему Central, но, возможно, в будущем поэкспериментирую со стилем списка тем. Если вам интересно и вы хотите взглянуть, тема уже доступна здесь; выберите её с помощью переключателя тем в боковой панели: https://canvas.kostka.studio
Спасибо за публикацию этого шаблона! Гибкость в работе с компонентами и чистый дизайн делают его действительно простым для настройки. С нетерпением жду возможности попробовать его на своём экземпляре.
Поскольку обновление Foundation скоро станет новым стандартом, будет ли шаблон темы Canvas обновлён для использования тех же «оснований» (eh), или он сохранит текущий стиль, очень близкий к нынешней (скоро устаревающей) теме Foundation?
Огромное спасибо проекту Discourse за спонсирование разработки этого проекта!
