CLI 快速开始
Shoplazza CLI 是帮助您构建 Shoplazza theme 的命令行工具,支持在本地开发时预览、测试和共享 theme 变更。
本教程用一套 CLI 流程覆盖两种场景:从参考主题创建全新 theme,以及自定义现有商家 theme。在第二步选择适合您目标的路径,其余步骤通用。
您将学到什么
完成本教程后,您将实现以下目标:
- 搭建本地开发环境
- 获取 theme 代码:克隆 Nova 2023 或下载商家 theme
- 使用商店真实数据预览您的修改
- 将 theme 代码推送至商店并发布
前置要求
- 您要操作的商店 URL,例如
your-store.myshoplaza.com。
安装 Shoplazza CLI 的系统要求
安装和运行 Shoplazza CLI 的要求取决于您的操作系统:
第一步:安装 Shoplazza CLI
请按照以下说明在 macOS、Windows 或 Linux 上安装 Shoplazza CLI。
npm install -g shoplazza-cli
第二步:获取 theme 代码
选择与您目标匹配的路径。
方式 A:创建新主题
使用 shoplazza themes init 将 Nova 2023 Git 仓库克隆到本地。
- 在终端中,导航到您想克隆 Nova 2023 的工作目录。
- 输入以下命令:
shoplazza themes init
- 系统会提示您输入 theme 名称,例如
new-theme。theme 将被克隆到同名文件夹中。 - 克隆完成后,进入该文件夹:
cd "new-theme"
初始化 theme 后,运行 shoplazza auth login 以您的商店账号登录。
- 输入以下命令:
shoplazza auth login
- 终端会要求您输入商店链接,请输入您的商店 URL(例如
https://ears.myshoplaza.com/)。 - 输入 URL 后,浏览器会自动打开授权登录页面,点击授权登录。
- 授权成功后,页面会显示授权成功提示:
方式 B:自定义现有商家主题
📘 前置条件
在执行 pull 和登录之前,您需要先申请访问商家商店。在商家商店中操作 theme,可以使用商家的真实商品和其他资源进行测试。您也可以通过其他账号和凭证访问 theme。了解更多
如果本地没有 theme,需要先下载一份 theme 代码副本以便在本地操作。
- 运行以下命令获取商店中所有 theme 的列表:
shoplazza themes pull
- 从列表中选择一个 theme,其内容将下载到当前文件夹或指定文件夹。
📘 提示
如果您尚未登录,运行
pull命令时会提示您登录 Shoplazza。请确保使用已获得该商店访问权限的账号登录。如果当前登录的账号没有相应权限,可以运行shoplazza auth logout退出登录。
下载商家 theme 后,您可以对 theme 代码进行任何必要的修改。例如,调整 theme 的 CSS 来改变其外观。
第三步:启动本地开发服务器
获取 theme 代码后,运行 shoplazza themes serve 即可在浏览器中与 theme 进行交互。Shoplazza CLI 会将该 theme 作为开发主题上传至您连接的商店。
该命令会返回一个 URL,支持对 CSS 和 section 的本地修改进行热重载,让您可以使用商店真实数据实时预览变更。此预览仅在 Google Chrome 中可用。
- 运行以下命令以启动 theme 服务:
shoplazza themes serve
- 下图展示了选择 theme 的界面。如果你是创建新主题(方式 A),选择创建新的未发布主题以创建用于开发的新 theme;如果你是自定义现有主题(方式 B),则选择你 pull 下来的那个 theme:
- 下图展示了使用
serve命令启动开发服务器的状态:
📘 注意
您也可以使用
serve命令为开发主题生成预览链接以及主题编辑器链接。
第四步:推送 theme
若您希望分享 theme 的永久链接、更新现有 theme 的代码,或为发布做准备,需要使用 theme push 命令将 theme 代码推送至 Shoplazza。系统会提示您选择要更新的 theme。
首次推送 theme 代码时,建议将 theme 作为新的未发布主题上传至主题库。运行命令后选择创建新的未发布主题即可。
shoplazza themes push
第五步:发布 theme
若您希望让 theme 在商店中上线,可以使用 theme publish 命令发布。在运行此命令前,请确保已通过 theme push 命令将所有本地修改推送至 Shoplazza。
- 输入以下命令:
shoplazza themes publish
- 从列表中选择要发布的 theme。
- 选择是确认发布指定 theme。
theme 发布成功,现已成为商店的当前激活主题。
后续步骤
使用 Shoplazza CLI 创建或自定义 theme 只是构建 theme 的第一步。您可以继续探索以下方向:
深入了解 Shoplazza theme
- 探索 theme 的架构。 在我们的架构文档中深入了解 theme 的结构,以及每个文件和文件夹的作用。
实现功能
您可以为 theme 启用特定 Shoplazza 功能或添加新功能,功能分为以下几类: