# Assets

> Shoplazza 主题的 assets 目录：CSS、JavaScript、图片与字体放在哪里，支持哪些文件类型，以及如何在 Liquid 中引用。

`assets` 目录包含主题中使用的所有静态文件，包括图片、CSS、JavaScript 和字体文件。

## 位置

资源文件位于主题的 `assets` 目录中：

```text
.
└── assets
    ├── theme.css
    ├── theme.js
    └── logo.png
```

## 支持的文件类型

| 类型 | 扩展名 |
|------|--------|
| 样式表 | `.css`, `.css.liquid` |
| 脚本 | `.js`, `.js.liquid` |
| 图片 | `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, `.webp`, `.ico` |
| 字体 | `.woff`, `.woff2`, `.ttf`, `.eot` |

## 引用资源

使用 [`shoplaza_asset_url`](/docs/theme/references/liquid/filters/hosted-file#shoplaza_asset_url) Liquid 过滤器生成资源文件的 URL：

```liquid
{{ 'theme.css' | shoplaza_asset_url | stylesheet_tag }}
{{ 'theme.js' | shoplaza_asset_url | script_tag }}
<img src="{{ 'logo.png' | shoplaza_asset_url }}" alt="Logo">
```

### CSS

使用 `stylesheet_tag` 过滤器链接样式表：

```liquid
{{ 'theme.css' | shoplaza_asset_url | stylesheet_tag }}
```

### JavaScript

使用 `script_tag` 过滤器引入脚本：

```liquid
{{ 'theme.js' | shoplaza_asset_url | script_tag }}
```

### 图片

直接引用图片：

```liquid
<img src="{{ 'logo.png' | shoplaza_asset_url }}" alt="{{ shop.name }}">
```

## 最佳实践

* **减少文件数量** — 尽可能合并 CSS 和 JavaScript 文件以减少 HTTP 请求。
* **使用 CDN URL** — 始终使用 `shoplaza_asset_url` 而非硬编码路径。Shoplazza 通过 CDN 提供资源以获得最佳性能。
* **优化图片** — 添加到 assets 目录前先压缩图片。尽可能使用 `.webp` 格式。
* **避免 `.liquid` 扩展名** — 不需要 Liquid 处理时使用 `.css` 和 `.js` 而非 `.css.liquid` 和 `.js.liquid`。纯文件因无需服务端渲染而加载更快。