Canvas предоставляет гибкий шаблон, позволяющий создавать пользовательские темы с меньшим количеством кода. Легко изменяйте свойства и значения конфигурации, чтобы адаптировать тему под свои нужды.
Примеры видов
Базовый шаблон сохраняет значения по умолчанию и остаётся нейтральным в дизайне.
Синхронизируйте тему с вашим экземпляром Discourse, используя discourse_theme gem.
Перейдите в административную панель и вручную измените следующие настройки компонента темы: Баннеры категорий
Точка подключения плагина → above-main-container Баннеры тегов
Показывать под заголовком сайта → снять галочку
Показывать над основным контейнером → установить галочку
Отредактируйте scss/properties.scss, чтобы определить значения пользовательских свойств
Отредактируйте about.json, чтобы добавить ресурсы, цветовые схемы и другие компоненты темы
Более подробный обзор настройки
Шаблон Canvas Theme лишь расширяет базовую структуру темы по умолчанию, объединяя несколько компонентов темы и добавляя некоторые готовые файлы стилей. Фактические функции обрабатываются отдельным компонентом темы Canvas Settings. Этот компонент выполняет две функции:
Он назначает пользовательские свойства, которые можно использовать с шаблоном. Таблица со списком всех свойств находится в файле Readme шаблона.
Такая раздельная настройка позволяет создавать тему, используя шаблон Canvas, при этом получая выгоду от постоянных исправлений и обновлений, предоставляемых через компонент.
Примеры тем
Вы можете просмотреть общие примеры тем по адресу https://canvas.kostka.studio. Внизу боковой панели есть переключатель тем для изменения дизайна.
Изучите код общих примеров видов или установите их в качестве стартовой темы из следующих репозиториев:
The settings are on the theme component installed as Canvas Settings. It’s maybe a bit misleading that settings are always named Theme Settings on the ui, also on theme components.
The category banner is also shown in the same place, above the sidebar. Latest topics, Hot topics are correctly shown in the main column.
I’m guessing it’s not a goal of the theme to fully cover the admin UI, however, the light and dark Editor color palettes have the admin sidebar looking quite different. I am curious if it is possible to harmonize with the non-admin sidebar.
The theme is meant to show banners next to the sidebar, using the above-main-container outlet. The Extra-Banners component uses that outlet by default, but the two components for Category and Tag banners are by default rendered below the header. I wouldn’t want to fork these components, just to set a different default outlet… That’s why I put these instructions:
But if that’s easy to miss, maybe there’s a better way to put it?
Yeah, that’s easy enough and seems a good approach for this theme. I just added a commit!
Ah yes, I see how we got here. We don’t necessarily want to change the defaults in the category/tag banners components, don’t want to fork them either. Tricky to fix, let’s leave it as is for now and see if others run into the same issue.
Could these instructions be elaborated a bit? Is it not possible to just install from the admin UI? Thx
EDIT: I installed via the admin UI and it seems to be working except there doesn’t seem to be anywhere to edit scss now
EDIT: nevermind, I see that is probably expected and you’re showing to edit the theme files directly. I wonder if it could be on the roadmap for this to happen via the admin ui? Like, have a variables editor same as you have a settings editor
And then declare custom properties on it’s CSS file. You could either look up properties on the Readme file. Or copy the contents of properties.scss from the theme repo.
I don’t see a plus on mobile on GitHub. May need to try the command lines when Home.
All I see in GitHub on dashboard is option to create a new repo but no claim ne option. I am on free account so not sure if that might have something to do with it.
It’s limited compared to declaring custom variables on the stylesheet. But it lets you tinker with a few different looks. Curious to hear if that works!
I just adjusted the CSS styles for the solid sidebar, scrolling should work again!
However, the solid sidebar is just one of the options on the Styles component I mentioned on the post above. If you want to adjust more styles (like spacing the sidebar menu), you’d need to follow the approach explained above in Usage and A closer look at the Setup: Use your own stylesheet with CSS custom properties – in this case that would be -d-sidebar-row-height.
I’ve put together a new example theme based on this template. As the name suggests, this one’s a tribute to the original Central theme!
I loved the layout and visual style of Central and I’ve been packaging some of its features into standalone components, like the Custom User Menu and several sidebar blocks.
I realized that with the sidebar and some styles, this template actually gets you a good way towards the original theme’s look and feel.
In any case, I’m not planning to fully re-build the Central theme.. but I might still experiment with a dedicated topic list style down the road. If you’re curious and want to take a look, the theme is also live here, select it using the sidebar theme toggle: https://canvas.kostka.studio
Thanks for sharing this template! The flexibility with components and the clean design make it really easy to customize. Looking forward to trying it out on my own instance.
Поскольку обновление Foundation скоро станет новым стандартом, будет ли шаблон темы Canvas обновлён для использования тех же «оснований» (eh), или он сохранит текущий стиль, очень близкий к нынешней (скоро устаревающей) теме Foundation?
Огромное спасибо проекту Discourse за спонсирование разработки этого проекта!
!