跳到主要内容

从零创建主题

本指南带你从零创建第一个 Shoplazza 主题。完成后，你将拥有一个包含布局、首页、导航菜单和商品详情页的可运行主题。

你将学到什么​

  • Shoplazza 主题的基本目录结构
  • 如何创建 layout、template、section 和 snippet
  • 如何构建动态导航菜单和商品详情页
  • 如何上传并预览主题

前置需求​

  1. 一个 Shoplazza 商店 — 没有商店就无法开发主题。
  2. 文本编辑器，或使用内置的 Shoplazza 主题编辑器。
  3. HTML、CSS、JavaScript 和 Liquid 的基础知识 — Shoplazza 主题使用这些技术构建。

第一步：搭建目录结构​

新建一个主题文件夹，按以下结构创建：

my-new-theme/
├── assets/
├── config/
│   └── settings_data.json
├── layout/
│   └── theme.liquid
├── sections/
│   ├── header.liquid
│   └── product-template.liquid
├── snippets/
│   └── navigation.liquid
└── templates/
    ├── index.liquid
    └── product.liquid

各目录的完整说明见 主题架构概览。

提示

你也可以用 shoplazza theme init 几秒生成完整的目录结构，它会克隆 Nova 2023。Nova 2023 是一个功能完整的参考主题，结构比这里手动搭建的最小骨架更丰富。详见 使用 CLI 开发主题。

第二步：创建 layout 文件​

Layout 文件是包裹所有页面的 HTML 外壳。创建 layout/theme.liquid：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ shop.name }} - {{ page.title }}</title>
  {{ content_for_header }}
</head>
<body>
  {% section 'header' %}

  <main>
    {{ content_for_layout }}
  </main>

  <footer>
    <p>&copy; {{ 'now' | date: "%Y" }} {{ shop.name }}</p>
  </footer>

  {{ content_for_js }}
</body>
</html>

{{ content_for_header }} 和 {{ content_for_js }} 加载 Shoplazza 所需的脚本。{{ content_for_layout }} 是 template 内容注入的位置。{% section 'header' %} 渲染你将在第五步创建的 header section。详见 主题布局。

第三步：创建首页 template​

创建 templates/index.liquid — 这是商店首页的渲染内容：

<section>
  <h2>Welcome to {{ shop.name }}</h2>
  <p>This is your first Shoplazza theme.</p>
</section>

第四步：创建配置文件​

创建 config/settings_data.json，写入最小合法结构：

{
  "current": {}
}

主题配置详见 Theme config。

第五步：创建导航菜单​

构建一个动态页眉导航，从商店的 linklist 配置读取数据并支持下拉子菜单。

首先创建 header section sections/header.liquid：

<header class="site-header">
  <h1 class="site-title">{{ shop.name }}</h1>

  <nav class="main-navigation">
    {% include 'navigation', links: linklists.main-menu.links %}
  </nav>
</header>

这里引入了一个名为 navigation 的 snippet，并传入 main-menu linklist 的链接。

接下来创建导航 snippet snippets/navigation.liquid：

<ul class="menu">
  {% for link in links %}
    <li class="menu-item">
      <a href="{{ link.url }}">{{ link.title }}</a>
      {% if link.links %}
        <ul class="submenu">
          {% for sublink in link.links %}
            <li class="submenu-item">
              <a href="{{ sublink.url }}">{{ sublink.title }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

该 snippet 遍历 linklist 中的每个链接，如果某个链接有子链接，则渲染子菜单。Snippet 详见 代码片段。

第六步：创建商品详情页​

构建一个 section，展示商品信息并通过主题编辑器提供商家可配置的设置项。

创建商品 section sections/product-template.liquid：

{% if product %}
  <h1>{{ product.title }}</h1>
  <p>{{ product.description }}</p>
  {% if section.settings.show_vendor %}
    <p>{{ product.vendor }}</p>
  {% endif %}
  <img src="{{ product.featured_image | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}">
  <p>{{ product.price | money }}</p>
{% else %}
  <p>该商品不存在。</p>
{% endif %}

{% schema %}
{
  "name": "Product template",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    }
  ]
}
{% endschema %}

{% schema %} 块定义了一个 show_vendor 开关，商家可在主题编辑器中控制。所有可用的设置类型见 输入设置。

然后创建商品 template templates/product.liquid，在商品页面中渲染该 section：

{% section 'product-template' %}

Section 内的 product 对象自动指向当前正在查看的商品。

第七步：上传并预览主题​

  1. 将 my-new-theme/ 文件夹压缩为 .zip 文件。
  2. 在 Shoplazza 管理后台进入在线商店 → 主题。
  3. 点击上传主题，选择 .zip 文件。
  4. 上传完成后，点击主题旁边的操作 → 预览。

浏览器将在新标签页中打开你的主题，展示导航菜单、首页和商品页面。在主题编辑器中，你可以将 linklist 分配给 main-menu，并在商品页面切换 Show vendor 设置项。

提示

如需更高效的开发体验（实时预览和热更新），请参阅 基于 CLI 的教程。

下一步​

主题已经可以运行了，接下来可以深入这些主题：