---
title: "public"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/public'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/public.md'
---
# public

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

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

* * *

## 目录结构{#ySWVO}

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

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

* * *

## 引用方式{#QFYTD}

### 路径提取{#wcmy1}

静态资源可以使用 [asset\_url](https://developer.shopline.com/zh-hans-cn/docs/sline/filter/asset-url.md) filter 进行路径提取，它会返回一个远程静态资源地址。示例如下：

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

### CSS 文件引用{#amWN0}

通过 [stylesheet](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/stylesheet.md) tag，你可以轻松渲染出 `<link>` 标签，以下是主题布局文件引用 `base/index.css` 资源的示例：

```html
<!-- 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 文件引用{#Oq7CZ}

通过 [script](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/script.md) tag，你可以轻松渲染出 `<script>` 标签，以下是主题组件文件引用 `base/index.js` 资源的示例：

```html
<!-- 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>
```

### 图片文件引用{#bqYvV}

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

```html
<!-- 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>
```