跳到主要内容

创建主题

您已准备好创建新 theme。您可能会问：如何快速搭建开发环境并开始编写代码？

本教程将带您使用 Shoplazza CLI 和 Nova 2023 创建新 theme，并将其上传至 Shoplazza 管理后台。

您将学到什么​

完成本教程后，您将实现以下目标：

  • 搭建本地开发环境

  • 克隆 Shoplazza 参考主题 Nova 2023

  • 预览本地代码的修改效果

  • 将 theme 代码推送至 Shoplazza 商店并发布主题

shoplazza theme init

前置要求​

  • 您要操作的商店 URL，例如 your-store.myshoplaza.com。

安装 Shoplazza CLI 的系统要求​

安装和运行 Shoplazza CLI 的要求取决于您的操作系统：

第一步：安装 Shoplazza CLI​

Shoplazza CLI 是一款帮助您构建 Shoplazza theme 的命令行工具。它支持在本地开发时预览和共享 theme 变更。请按照以下说明在 macOS、Windows 或 Linux 上安装 Shoplazza CLI。

npm install -g shoplazza-cli

第二步：使用 Nova 2023 初始化新 theme​

使用 shoplazza theme init 将 Nova 2023 Git 仓库克隆到本地。

  1. 在终端中，导航到您想克隆 Nova 2023 的工作目录。
  2. 输入以下命令：
shoplazza theme init
  1. 系统会提示您输入 theme 名称，例如 new-theme。theme 将被克隆到同名文件夹中。
  2. 克隆完成后，进入该文件夹：
cd "new-theme"

第三步：登录账号​

初始化 theme 后，运行 shoplazza login 以您的商店账号登录。

  1. 输入以下命令：
shoplazza login
  1. 终端会要求您输入商店链接，请输入您的商店 URL（例如 https://ears.myshoplaza.com/）。
  2. 输入 URL 后，浏览器会自动打开授权登录页面，点击授权登录。
  3. 授权成功后，页面会显示授权成功提示：

第四步：启动本地开发服务器​

登录账号后，运行 shoplazza theme serve 即可在浏览器中与 theme 进行交互。Shoplazza CLI 会将该 theme 作为开发主题上传至商店。

该命令会返回一个 URL，支持对 CSS 和 section 的本地修改进行热重载，让您可以使用商店真实数据实时预览变更。此预览仅在 Google Chrome 中可用。

  1. 运行以下命令以启动 theme 服务：
shoplazza theme serve
  1. 下图展示了选择 theme 的界面，选择创建新的未发布主题以创建用于开发的新 theme：
  1. 下图展示了使用 serve 命令启动开发服务器的状态：

📘 注意

您也可以使用 serve 命令为开发主题生成预览链接以及主题编辑器链接。

第五步：将 theme 上传至商店​

若您希望分享 theme 的永久链接、更新现有 theme 的代码，或为发布做准备，需要使用 theme push 命令将 theme 代码推送至 Shoplazza。

首次推送 theme 代码时，建议将 theme 作为新的未发布主题上传至主题库。运行命令后选择创建新的未发布主题即可。

shoplazza theme push

第六步：发布 theme​

若您希望让 theme 在商店中上线，可以使用 theme publish 命令发布。在运行此命令前，请确保已通过 theme push 命令将所有本地修改推送至 Shoplazza。

  1. 输入以下命令：
shoplazza theme publish
  1. 从列表中选择要发布的 theme。
  2. 选择是确认发布指定 theme。

theme 发布成功，现已成为商店的当前激活主题。

后续步骤​

使用工具完成第一个 theme 的创建只是开始。您可以继续探索以下方向：

深入了解 Shoplazza theme​

  • 探索 theme 的架构。 在我们的架构文档中深入了解 theme 的结构，以及每个文件和文件夹的作用。

实现功能​

您可以为 theme 启用特定 Shoplazza 功能或添加新功能，功能分为以下几类：