# 在主题和组件中包含资源（例如图像、字体）
**URL:** https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459
**Category:** Developer Guides
**Tags:** how-to, theme-guides
**Created:** [2017 年5 月 10 日 20:01 UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459 "2017-05-10T20:01:29Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2017 年5 月 10 日 20:01 UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459/1 "2017-05-10T20:01:29Z")
主题和主题组件允许您处理上传的资源，例如图像和字体。您可以使用站点设置来控制主题接受哪些资源：`theme authorized extensions`（主题授权扩展名）
## 在主题和组件中包含资源
### 对于远程主题
远程主题包括：
- 从主题的“Popular”（热门）列表中安装的主题和组件
- 使用“From a git repository”（从 git 仓库）方法安装的主题和组件
要向远程主题或主题组件上传资源，请参阅 [Create and share a font theme component](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462) 以获取详细示例。
### 上传资源到本地主题和组件
本地主题包括：
- 每个 Discourse 实例自带的默认 Light（浅色）和 Dark（深色）主题
- 使用“+ Create New”（+ 创建新主题）安装方法创建的主题和组件
- 使用“From your device”（从您的设备）安装方法从本地计算机上传的主题和组件。
要向本地主题或主题组件上传资源，请导航到您的主题或组件，然后在“Uploads”（上传）部分选择“+ Add”（+ 添加）：
在“Add Upload”（添加上传）模态框中，选择一个文件并输入一个 SCSS 变量名称，以便与您的 CSS、javascript 和/或 handlebars 自定义一起使用
上传后，资源将显示在“Uploads”列表中：
> :warning: **重要提示** ：_如果组件是从 git 仓库远程安装的，请勿通过管理界面向主题和组件添加上传内容。组件的更新将清除未包含在 git 仓库中的任何上传内容。_
## 如何使用资源
### SCSS
```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);
}
```
> :information\*source: \_使用 `ttf` 或 `otf` 字体时，请确保使用 `opentype` 格式。\_
### Javascript
```gjs
// {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（更多信息请参阅 [https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648）。](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648%EF%BC%89%E3%80%82)
一种解决方法是将您的资源作为背景图像使用 SCSS 加载（如上例所示）。因此，在主题的页眉部分，您可以添加：
```html
```
然后在您的 CSS 中：
```scss
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
```
### 将主题上传作为设置访问
您也可以在 JavaScript 中将 `theme_uploads` 视为设置（[相关提交](https://github.com/discourse/discourse/commit/719a93c312b9caa6c71de22d67f1ce1a78c1c8b2)）。
这允许主题和组件访问主题资源。
在主题 js 内部，您现在可以使用以下方式获取资源的 URL：
```plaintext
settings.theme_uploads.name
```
## 附加信息
- [Create and share a font theme component](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462)
* * *
此文档是版本控制的 - [在 github 上](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/18-include-assets.md) 建议更改。
---
### Author:  [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [2024 年8 月 23 日 02:04 UTC](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459/40 "2024-08-23T02:04:48Z")
我创建了[一个包含 5 个 svg 文件的 assets 目录](https://github.com/bitmage/discourse-radiant-theme/tree/main/assets)，用于社交媒体图标。 [我已按照 [创建和共享字体主题组件](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462/4) 的指示将它们全部添加到 `about.json` 中。]([discourse-radiant-theme/about.json at main · bitmage/discourse-radiant-theme · GitHub](https://github.com/bitmage/discourse-radiant-theme/blob/main/about.json)) [我在 CSS 的 `body_tag.html` 中使用了它们](https://github.com/bitmage/discourse-radiant-theme/blob/main/common/body_tag.html#L67-L81)。
预期：图标应该加载。
实际：图标不显示。开发工具栏显示浏览器已注册这些图像，但其中没有数据。
我错过了什么？是否有构建步骤或其他操作？
