在主题和组件中包含资源(如图片、字体)

主题和主题组件允许您处理上传的资源,例如图像和字体。您可以通过站点设置 theme authorized extensions 来控制您的主题接受哪些资源。

在主题和组件中包含资源

对于远程主题

远程主题包括:

  • 从主题的 热门 列表安装的主题和组件
  • 使用 从 Git 仓库 方法安装的主题和组件

要将资源上传到远程主题或主题组件,请参阅 Create and share a font theme component 以获取详细示例。

将资源上传到本地主题和组件

本地主题包括:

  • 每个 Discourse 实例自带的默认浅色和深色主题
  • 使用 + 创建新主题 安装方法创建的主题和组件
  • 使用 从您的设备 安装方法从本地计算机上传的主题和组件。

要将资源上传到本地主题或主题组件,请导航到您的主题或组件,并在“上传”部分选择 + 添加:

在“添加上传”对话框中,选择一个文件并输入一个 SCSS 变量名,以便与您的 CSS、JavaScript 和/或 Handlebars 自定义设置一起使用。

上传完成后,该资源将出现在上传列表中:

:warning: 重要提示:如果组件是从 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 上。

30 个赞

我创建了一个包含 5 个 svg 文件的 assets 目录,用于社交媒体图标。 [我已按照 创建和共享字体主题组件 的指示将它们全部添加到 about.json 中。](discourse-radiant-theme/about.json at main · bitmage/discourse-radiant-theme · GitHub) 我在 CSS 的 body_tag.html 中使用了它们。

预期:图标应该加载。

实际:图标不显示。开发工具栏显示浏览器已注册这些图像,但其中没有数据。

我错过了什么?是否有构建步骤或其他操作?

1 个赞