public

public 静态资源目录，用于存放主题所需的静态文件，包括但不限于：

CSS：.css 后缀文件
JavaScript：.js 后缀文件
媒体资源：图片（PNG/JPG/SVG）、字体（TTF/WOFF）
其他文件：JSON 配置文件、PDF 文档

目录结构

主题开发时，为优化资源管理，一般通用静态资源才会放入 public 目录以便全局调用，组件或区块的专用资源，存于自身专属目录即可。以下是从主题中截取的静态资源目录部分示例：

public
├── base
│   ├── index.css
│   └── index.js
└── images
    └── image-password-login.png

引用方式

路径提取

静态资源可以使用 asset_url filter 进行路径提取，它会返回一个远程静态资源地址。示例如下：

{{"base/index.css" | asset_url()}}	<!-- 输出：https://**/public/base/index.css -->

CSS 文件引用

通过 stylesheet tag，你可以轻松渲染出 <link> 标签，以下是主题布局文件引用 base/index.css 资源的示例：

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- 引用 CSS 资源文件 -->
    {{#stylesheet "base/index.css" | asset_url() media="all" /}}
    {{#content "header" /}}  <!-- 头部占位符 -->
  </head>
  <body>
    {{#content "layout" /}}  <!-- 内容占位符 -->
    {{#content "footer" /}}  <!-- 页脚占位符 -->
  </body>
</html>

JavaScript 文件引用

通过 script tag，你可以轻松渲染出 <script> 标签，以下是主题组件文件引用 base/index.js 资源的示例：

<!-- sections/contact-form/contact-form.html -->
{{#script "base/index.js" | asset_url() /}}	<!-- 引用 JS 资源文件 -->
<div class="contact-form color-{{section.settings.color_scheme.id}}">
  <div class="page-width">
      ...
    </div>
</div>

图片文件引用

以下是店铺密码保护页面引用 image-password-login.png 图片资源的示例：

<!-- sections/main-password/main-password.html -->
<div class="main__media">
  {{#if section.settings.image}}
    {{#component "image" data=section.settings.image /}}
  {{#else/}}
    <!-- 引用图片资源文件 -->
    <img src="{{`images/image-password-login.png` | asset_url()}}" alt="background_img" loading="lazy" />
  {{/if}}
</div>

这篇文章对你有帮助吗？

SHOPLINE

条款协议