开发定制化主题

本教程中，你将学习如何定制开发商家的主题。

定制开发商家的主题是指：主题开发者可以根据商家的需求，为商家定制开发主题，这些定制的范围可以是小的调整，也可以是完全的重新设计。

准备工作

安装 Git。
安装 Node.js。
了解 Sline 模板引擎。Sline 模板引擎是 SHOPLINE 自研的模板引擎，是主题在商家店面中呈现的基石，用于动态渲染商家店铺页面。

第一步：请求权限

请求商家店铺的权限有两种方式：

商家把你的账号列为员工账号
在合作伙伴后台申请访问店铺

无论哪一种方式，都需要确保你的账号具有在线商店的操作权限。

第二步：安装 SHOPLINE CLI

运行以下命令

npm install --global @shoplineos/cli

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

sl --version

提示：SHOPLINE CLI 详情请参阅开发工具。

第三步：登录店铺

在终端登录商家的店铺

sl login --store=your-store.myshopline.com

提示：--store 参数是你的店铺的 myshopline 域名

此时会自动打开浏览器窗口，跳转到登录的界面。
登录后根据提示关闭浏览器窗口即可。
登录成功，在终端中会有成功的提示。

第四步：下载商家主题

你可以通过如下两种方式下载商家主题：

通过 SHOPLINE CLI 下载

进入一个空目录。
运行以下命令并选择要下载主题。

sl theme pull

根据提示操作后，你所选择的主题会下载至你指定的目录。

在SHOPLINE 商家后台下载

进入 SHOPLINE 店铺后台并登录授权账号。
进入在线商店目录下的店铺设计模块。
选择需要下载的主题，点击操作下拉框，点击下载代码。
根据提示操作将代码下载至邮箱中。
在邮件中获取后，解压至本地。

第五步：启动本地预览

在主题的根目录下运行以下命令启动一个本地开发服务器

sl theme serve

本地开发服务器默认会对 CSS 和 section 文件的更改进行热加载，不符合热加载条件的则会自动刷新页面，使你能够使用店铺的数据进行实时预览更改。

在终端可以看见返回的几个 URL，分别是

本地预览链接：是一个 http://127.0.0.1:8282链接，拥有本地开发服务器功能。
在线预览链接：是一个线上地址，可用于实时查看和分享当前效果。
主题编辑器链接：是一个SHOPLINE 商家后台主题编辑器链接，可用于配合主题编辑器的功能进行开发调试。

第六步：定制主题

假设商家的第一个需求是需要把页面的背景色都设置为红色。在此示例中，我们将更改页面的背景颜色来完成定制。

使用你熟悉的代码编辑器打开主题代码项目。
打开 layout/theme.html 文件。
写入更改背景颜色的 CSS 代码。

<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      body {
        background: red;
      }
    </style>
  </head>
  ...
</html>

检查终端更新成功的提示。
打开预览链接，刷新页面。
此时，会看到页面上的背景色展示为红色背景。

第七步：分享修改内容给商家

修改完成后，可以通过分享在终端输出的在线预览链接，把你的修改内容实时分享给商家进行查看。

第八步：发布

到目前为止，你的主题目前还是处于开发状态，在SHOPLINE 商家后台还无法查看和使用。

你可以通过以下两种方式将你的主题代码发布到店铺中：

通过以下命令把本地的主题代码打包成一个 zip 文件，然后在SHOPLINE 商家后台进行上传：

sl theme package

注意：使用 zip 文件在SHOPLINE 商家后台上传，会新增一个主题。

通过以下命令把本地主题代码直接上传到SHOPLINE 商家后台：

sl theme push

注意：

交付给商家的主题，必须通过测试和商家验证后，再在SHOPLINE 商家后台点击发布上线。
使用 push 命令上传主题，若指定了主题，则会覆盖其主题。

这篇文章对你有帮助吗？

SHOPLINE

条款协议

开发定制化主题​