开启现代化主题开发之旅

告别繁琐的手动上传和刷新。借助SHOPLINE CLI，您可以像专业开发者一样，在本地实时预览、高效同步、轻松协作，释放SHOPLINE Online Store 3.0主题的全部潜力。

三步快速上手

在开始您的第一个SHOPLINE主题开发项目之前，只需几个简单的步骤来设置您的开发环境。这个过程将为您安装必要的工具，并将您的本地机器与您的SHOPLINE店铺安全地连接起来。完成这些准备工作后，您就可以使用CLI提供的所有强大功能了。

📚 准备工作清单：

  • • 安装 Git 和 Node.js
  • • 确保您有一个开发者店铺，进行开发调试
  • • 确保您已连接到互联网。大多数 SHOPLINE CLI 命令需要互联网连接才能运行
  • • 了解 Sline 模板引擎 - SHOPLINE自研的模板引擎，是主题在商家店面中呈现的基石，用于动态渲染商家店铺页面
  1. 1

    安装环境

    确保您的电脑已安装 Git 和 Node.js。然后，在终端中运行以下命令来安装SHOPLINE CLI。支持npm和yarn两种安装方式：

    $ npm install --global @shoplineos/cli
    $ yarn global add @shoplineos/cli

    💡 可以使用以下命令检查是否安装成功和查看当前版本号：

    $ sl --version
  2. 2

    登录店铺

    将CLI工具与您的SHOPLINE店铺关联。将下方命令中的 `example.myshopline.com` 替换为您的店铺域名。

    $ sl login --store example.myshopline.com

    💡 此命令会在弹出的浏览器窗口中要求您登录账号。

  3. 3

    开始开发！

    一切就绪！现在您可以创建新项目或拉取现有主题，开始您的开发之旅。

核心命令浏览器

点击切换，探索最常用的CLI命令。

SHOPLINE CLI提供了一套简洁而强大的命令来管理您的主题开发周期。下面的浏览器将带您了解每个核心命令的功能、用法以及它在开发流程中扮演的角色。通过互动式地探索这些命令，您可以快速建立起对CLI工作方式的直观理解。

sl theme init

初始化主题，将从 Github 拉取 Bottle 主题到本地计算机。

此命令会从我们的开放 Git 仓库中，克隆 Bottle 示例主题代码，并创建其副本。执行后会在当前目录创建新文件夹，您输入的主题名称会作为目录名称。

$ sl theme init <THEME_NAME>

💡 可选参数：

  • • --clone-url <URL> 指定Git仓库URL
  • • --path <PATH> 指定主题目录工作路径

SHOPLINE 主题目录结构

当您使用的目录与默认 SHOPLINE 主题目录结构匹配时，您才能运行某些主题命令，例如：sl theme serve。此目录结构表示该主题无需构建步骤，或者已经完成了所有必需的文件转换。

⚠️ 注意： 如果您使用构建工具来生成主题文件，那么您可能需要在存储生成文件的目录运行主题相关命令。

└── project
├── blocks/
├── components/
├── layout/
├── public/
├── sections/
├── i18n/
├── templates/
├── theme.config.json
└── theme.schema.json

核心文件夹

blocks/

可重用的主题组件块

components/

小型可重用组件

layout/

页面布局模板

public/

静态资源文件（CSS、JS、图片）

内容与配置

sections/

页面区域模板

i18n/

国际化语言文件

templates/

页面模板文件

theme.config.json

主题配置文件

theme.schema.json

主题结构定义文件

💡 升级和卸载 CLI

升级 CLI：
npm install --global @shoplineos/cli
# 或者
yarn global add @shoplineos/cli
卸载 CLI：
npm uninstall --global @shoplineos/cli
# 或者
yarn global remove @shoplineos/cli

互动式开发工作流

模拟真实开发场景，理解代码与配置如何同步。

理论知识需要通过实践来巩固。这个互动模拟器将向您展示在独立开发和团队协作两种场景下，如何结合使用CLI命令和Git版本控制。点击下方的步骤，查看每一步的详细说明和推荐命令，以掌握最高效、最不易出错的开发流程。

1. 项目启动: 创建或拉取主题
↓
2. 开发循环: 运行 `serve` 并编码
↓
3. 迭代与部署: 使用 `check` 和 `push`

步骤1: 项目启动

为新项目运行 `init`，或为现有项目运行 `pull`。完成后，使用Git进行版本控制。

sl theme init <name>

开发最佳实践

掌握了工具和流程后，遵循这些行业最佳实践将帮助您构建出更健壮、更高性能、更易于维护的SHOPLINE主题。这些原则不仅关乎代码质量，更直接影响最终的用户体验和店铺的商业表现。

拥抱模块化

将UI和功能拆分为独立的Sections和Blocks。这不仅使代码更清晰，也极大地增强了商家在后台的自定义能力。

性能至上

优先使用CSS实现功能，对图片和JS进行懒加载或异步加载，利用SHOPLINE CDN，确保店铺秒开，提升用户体验和转化率。

Git是必需品

使用Git进行版本控制，采用清晰的分支策略（如功能分支）。这是保证代码安全、方便回滚和高效团队协作的基石。

📚 更多资源

重要提醒

  • • 大多数 CLI 命令需要互联网连接才能运行
  • • 开发中主题会在7天不活跃后自动删除
  • • 运行 sl logout 会删除您的开发中主题
  • • 使用 sl [command] -h 获取命令帮助