主题和主题组件允许您处理上传的资源,例如图像和字体。您可以通过站点设置 theme authorized extensions 来控制您的主题接受哪些资源。
在主题和组件中包含资源
对于远程主题
远程主题包括:
- 从主题的 热门 列表安装的主题和组件
- 使用 从 Git 仓库 方法安装的主题和组件
要将资源上传到远程主题或主题组件,请参阅 Create and share a font theme component 以获取详细示例。
将资源上传到本地主题和组件
本地主题包括:
- 每个 Discourse 实例自带的默认浅色和深色主题
- 使用 + 创建新主题 安装方法创建的主题和组件
- 使用 从您的设备 安装方法从本地计算机上传的主题和组件。
要将资源上传到本地主题或主题组件,请导航到您的主题或组件,并在“上传”部分选择 + 添加:
在“添加上传”对话框中,选择一个文件并输入一个 SCSS 变量名,以便与您的 CSS、JavaScript 和/或 Handlebars 自定义设置一起使用。
上传完成后,该资源将出现在上传列表中:
重要提示:如果组件是从 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 中(例如在自定义管理面板的页眉或页眉后部分)。您必须使用 Handlebars 模板或插件 API(关于这些的更多信息请参阅 Developing Discourse Themes & Theme Components)。
一种变通方法是使用 SCSS 将您的资源加载为背景图像(如上例所示)。因此,在您的主题的页眉部分,您可能会添加:
<div class="my-custom-div">
<a href="/"></a>
</div>
然后在您的 CSS 中:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
将主题上传作为设置访问
您还可以在 JavaScript 中将 theme_uploads 视为设置(相关提交)。
这允许主题和组件访问主题资源。
在主题 JS 中,您现在可以使用以下方式获取资源的 URL:
settings.theme_uploads.name
附加信息
本文档受版本控制 - 建议更改 在 GitHub 上。



