本地服务器模板网站怎么安装,如何创建一个Shopify模版本地开发环境

Shopify相信大家都已经很熟悉了，特别是近几年发展的非常快，国内不少外贸企业也都在使用这款在线电商程序。虽然很多开发者和设计师已经习惯了使用在线模版编辑器，但是如果你需要进行定期常规编辑或者开发模版的话，甚至是涉及到团队协作的时候，在线编辑就会感觉受限了。

本篇文章将向你讲述如何使用Theme kit这款跨平台的工具让你可以使用自己的开发工具在本地开发shopify模版。

一旦Theme Kit设置好以后，你就可以轻松的整合你的流程工具(比如Git)到你的模版开发中，同时你还可以使用你喜好的编辑器，比如Sublime text, VS Code, Atom等。

说明：因为我的本地开发环境是基于macOS的 ，所以本文部分操作仅以macOS为例。如果你是其他操作系统的话，可以参考Theme Kit的官方说明文档。

第一步：安装Theme Kit

Theme Kit 是一个跨平台的工具，使用命令行command-line来创建Shopify模版。Theme Kit比较有名的功能包括以下几点：

多环境上传模版

快速上传和下载

监视本地变化并自动上传到Shopify

支持Windows，Linux和macOS多个操作系统

首先在终端中输入如下命令来创建Theme Kit的全局环境。

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

image

安装完以后默认的位置是 /usr/local/bin 。

当然，你也可以通过从Theme Kit的网站下载一个zip文件来来进行安装。

image

关于旧版本的兼容问题和测试Theme Kit安装

在你开始执行任何Theme Kit的命令之前，请确保使用的是最新版本的Theme Kit，并且已经卸载了之前的版本。如果你是第一次安装Theme Kit，这步可以略过。

通过以下命令行卸载现有的shopify theme gem：

gem uninstall shopify-theme

确保你使用的是最新的theme kit版本(点击这里查看版本信息)。可以使用如下命令更新现有版本：

theme update --version=[version number]

例如：

theme update --version=v1.0.0

测试Theme Kit是否安装正确并且能够正常工作，输入如下命令：

theme --help

第二步：设置API

我们需要设置API密匙来连接商店和Theme Kit。步骤如下：

API密匙和密码

登录到Shopify商店后台，创建一个Private app。

image

如下图红色标识的位置填写(或选择)相关信息，并点击保存按钮。

image

image

点击保存以后出来的API相关信息屏幕

image

创建全新的模版

如果你想创建一个全新的模版，那么在终端输入如下命令：

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

例如：我在桌面创建了一个名为shopify-dev的文件，然后输入如上命令

image

注意：输入命令的时候切记不要带“[]”这两个符号，否则会执行错误。

执行完以后打开shopify-dev文件夹，发现模版文件已经安装成功啦！

image

使用现有的模版

查找现有模版的id。下面提供两种方法：

方法一：进入Shopify后台，点击左侧Online Store下面的theme菜单，在Current Theme位置选择Actions下拉菜单，选择Edit code，紧接着，你会在出来的页面的浏览器地址栏里面看到一串数字，如下方第二张图所示，46369243220便是Theme ID。

image

image

方法二：老老实实的按照官方提供的方式通过命令行查找Theme ID。在终端输入如下命令，然后便会出来当前店铺上安装的所有模版，其中第一个标有live字样的是你当前使用的模版。前面的一串数字就是Theme ID。

theme get --list -p=[your-password] -s=[you-store.myshopify.com]

image

下载模版到本地。在终端输入如下命令：

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

比如我在桌面新建一个文件夹对应网上live的模版名称(当然，名称你可以随便起)Debut，然后在终端输入如上命令：

image

命令执行完以后打开Debut文件夹，你会发现模版文件已经同步好了。

image

不管你是同步了一个已经存在的模版，还是新建了一个模版，执行完命令后都会生成一个config.yml文件，里面有如下内容：

development:

password: [your-api-password]

theme_id: "[your-theme-id]"

store: [your-store].myshopify.com

image

第三步：更新模版到服务器

在终端输入如下命令：

theme watch

image

Theme Kit会监视本地文件的任何变化，并自动推送到服务器的模版上去。如果想关闭监视功能，输入 ctrl + c 即可。

好了，以上就是在本地开发shopify模版的环境配置说明，很简单是不是？当然，你也可以到Theme Kit的网站上查看更详细的使用方法和执行命令。

以上文章为原创作品。如需转载请遵循CC版权协议正确标明出处。