实时预览主题

安装模板CLI后，下一步正在下载主题以编辑和预览使用Stencen CLI强大的Browsersync功能的实时更改。本文通过下载主题进行开发，安装主题模块以及使用Stencen CLI的实时预览的过程来遍历模板开始命令。

本文中的步骤假设您已经在系统上安装了Stencil CLI。如果您还没有安装它，请看安装模板cli.详细的，特定于系统的说明。

获取商店API凭据

Stencil CLI使用各种BigCommerce api将特定于存储的数据(如旋转木马图像和产品)注入到它提供的实时主题预览中。为此，您必须为Stencil CLI提供一个存储API令牌。有关详细说明，请参见存储API账户。

要自动创建具有Stencil CLI所需范围和权限的存储API帐户，请选择创建Stencil-CLI牌在里面创建API帐户落下：

的Stencil-CLI访问级别可以通过选择来设置吗地方发展只有或者发布主题:

• 地方发展只有-可以读取主题相关的存储数据，但不能发布
• 发布主题- 可以阅读主题相关商店数据并将主题推到实时店面

下载一个主题

以BigCommerce的Cornerstone主题(这是BigCommerce快速开发主题的基石和起点)为基础进行开发存储库从GitHub:

Git.克隆https://github.com/bigcommerce/cornerstone.git

基石和其他主题也可以从BigCommerce控制面板下载。有关操作说明，请参阅下载和上传自定义主题（BigCommerce知识库）。

还可以在BigCommerce主题市场中下载和发展对抗主题。要这样做：

1. 导航到店面>主题市场，并添加所需的主题。
2. 一旦添加，导航到店面>我的主题>主题缩略图>主题选择。
3. 选择相应的下载选项。

下载选项:

• 下载当前的主题-下载主题活动在店面(出现时，当前的主题被选择)。
• 下载您的最新自定义-下载主题的最新保存版本(只出现为这个商店定制的主题)。
• 下载主题文件-下载的主题，因为它最初上传到主题市场。

安装主题模块

主题版本1.10.0+，模块可以安装npm:

＃进入主题目录cd〜/ path / to / theme / dir＃使用NPM安装模块npm安装

这将安装npm正确利用Stencil事件框架所需的模块。

提供现场预览

一旦安装了Stencil CLI并下载了一个主题.stencil或者config.stencil.json.可以初始化主题的配置文件(如果使用Stencil V3.1版本或更高版本)并开始开发。

模板CLI使用Browsersync提供开发中主题的实时预览。当预览在多个设备或浏览器窗口上打开时，滚动、单击、刷新和表单动作会在浏览器实例中被镜像。

控件启动Browsersync预览模板开始终端窗口中的命令。什么时候模板开始执行时，Stencil CLI检查所需的.stencil配置文件或secrets.stencil.json和config.stencil.json.配置文件（如果使用模板v3.1版本或更高版本），其中包含以下信息：

• 商店的网址
• API访问令牌
• 本地端口号

此配置文件是通过运行创建的模板初学者并输入上面列出的信息。在这样做之前，请务必获取存储API凭据。

初始化一个new.stencil或者config.stencil.json.配置文件(如果使用Stencil V3.1版本或更高版本)并开始实时预览，在终端中运行以下命令:

#移动到主题目录cd〜/ path / to / theme / dir＃安装主题模块（如果您还没有）npm安装#创建的。模板”或“config.stencil。json '配置文件(如果使用Stencil V3.1版本或更高版本)Stencil init  -  url https://yourstore.com/ --token 19d3ae6-dc15-4af9-bead-a2c703aa7b  - 口交3000＃提供主题的实时预览：模板开始

模板开始将输出多个URL：

#……(Browsersync]代理:http://localhost: 3001(Browsersync]访问url:—本地:http://localhost:3000＃预览本地计算机上的实时更改外部:http://10.4.10.71:3000#在多个设备上预览实时变化——UI: http://localhost:3002 UI外部:http://10.4.10.71:3002——(Browsersync]看文件。。。

浏览到本地URL以预览主题，请参阅实时更新的更改。要同时在多个设备上预览主题，请浏览到所需设备上的外部URL。当您浏览网站时，Stencil CLI将使用提供的Store API令牌，以使API调用对BigCommerce的API并使用Live Store数据填充主题预览，以便尽可能地模仿生产。

有关Stencen CLI命令的完整列表，请参阅模板CLI选项和命令。有关排除错误或安装问题的帮助，请参阅故障排除您的设置。

资源

额外的资源

• 模具安装和发射的演示（YouTube）
• 模板CLI GitHub回购