Темы и компоненты тем позволяют работать с загруженными ресурсами, такими как изображения и шрифты. Вы можете управлять тем, какие ресурсы принимает ваша тема, с помощью настройки сайта: theme authorized extensions (разрешенные расширения темы)
Включение ресурсов в темы и компоненты
Для удаленных тем
Удаленные темы включают:
- Темы и компоненты, установленные из списка Популярные
- Темы и компоненты, установленные с помощью метода Из git-репозитория
Чтобы загрузить ресурсы в удаленную тему или компонент темы, см. подробный пример по адресу Create and share a font theme component.
Загрузка ресурсов в локальные темы и компоненты
Локальные темы включают:
- Стандартные темы Light и Dark, поставляемые с каждым экземпляром Discourse
- Темы и компоненты, созданные с помощью метода установки + Создать новый
- Темы и компоненты, загруженные с вашего локального компьютера с помощью метода установки С вашего устройства.
Чтобы загрузить ресурсы в локальную тему или компонент темы, перейдите к своей теме или компоненту и выберите + Добавить в разделе Uploads (Загрузки):
В модальном окне Add Upload (Добавить загрузку) выберите файл и введите имя переменной SCSS, которое будет использоваться с вашим CSS, javascript и/или кастомизациями handlebars.
После загрузки ресурс появится в списке Uploads (Загрузки):
Важное примечание: Не добавляйте загрузки в темы и компоненты через административный интерфейс, если компонент был установлен удаленно из git-репозитория. Обновления компонента удалят все загрузки, которые не были включены в git-репозиторий.
Как использовать ресурсы
SCSS
@font-face {
font-family: Amazing;
src: url($Comic-Sans) format("woff2");
}
body {
font-family: Amazing;
font-size: 15px;
}
.d-header {
background-image: url($texture);
}
:informationsource: _При использовании шрифтов
ttfилиotfобязательно используйте форматopentype.
Javascript
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
console.log(settings.theme_uploads.balloons);
});
HTML
Вы не можете напрямую добавить ресурс темы в обычный HTML (например, в разделе header или after header панели настройки кастомизации). Вам нужно использовать шаблон handlebars или API плагина (больше об этом на Developing Discourse Themes & Theme Components).
Один из обходных путей — загрузить ваш ресурс как фоновое изображение с помощью SCSS (как в примере выше). Таким образом, в разделе header вашей темы вы можете добавить:
<div class="my-custom-div">
<a href="/"></a>
</div>
а затем в вашем CSS:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
Доступ к загрузкам темы как к настройкам
Вы также можете рассматривать theme_uploads как настройки в JavaScript (соответствующий коммит).
Это позволяет темам и компонентам получать доступ к ресурсам темы.
В js темы теперь можно получить URL ресурса с помощью:
settings.theme_uploads.name
Дополнительная информация
Этот документ находится под контролем версий - предложите изменения на github.
