跳到主要内容

Assets

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

位置​

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

.
└── 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 Liquid 过滤器生成资源文件的 URL：

{{ '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 过滤器链接样式表：

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

JavaScript​

使用 script_tag 过滤器引入脚本：

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

图片​

直接引用图片：

<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。纯文件因无需服务端渲染而加载更快。