如何在本地开发 Shopify 主题？

Posted 2023-02-15

【中文标题】如何在本地开发 Shopify 主题？

【英文标题】：How to develop Shopify themes locally?

【发布时间】：2016-12-12 17:03:06

【问题描述】：

我打算开发一个 Shopify 主题，我想弄清楚如何在本地运行/编辑它。如果可能的话，我希望能够做到以下几点：

将所有 Shopify 主题代码从站点拉到我的本地计算机（最好是单个命令行工具） 在本地进行编辑，然后在本地或暂存环境中运行它们 再次使用命令行工具将所有编辑推送到 Shopify 主站点

这可能吗？

【参考方案1】：

您可以在这里使用很多工作流程。

1。任务运行器

如果您在本地使用 Gulp 或 Grunt 进行开发，则有一些库可以通过您必须创建的私有应用程序的 API 凭据将您的文件上传到商店。大多数工作是通过使用观察者上传您更改的文件来工作的。

grunt-shopify grunt-shopify-upload gulp-shopify-upload（这是我最喜欢的，因为我使用 Gulp，但有一个已知问题，有时它会停止上传文件，您必须重新启动它）。

2。官方 Shopify 主题套件

Theme Kit 是由 Shopify 员工构建的跨平台 CLI 工具。它可以在 windows/linux/OS X 上运行。您可以阅读更多关于它的信息on Shopify Blog 或download it directly。之前提到的桌面主题编辑器的替代方案已被弃用，并已被 Theme Kit 取代。

3。第三方 SaaS 应用程序

这些将与持续集成工作流程一起工作，而不是监视更改，您在某个分支上的最新推送将上传到您选择的主题。

Beanstalk。更多具体信息可以在 Shopify 的登陆页面上找到，here。 DeployBot。他们在 Shopify 上的 help article 提供了一些有关如何开始使用的信息。 两种选择都来自同一家公司。 Here's 他们在博客上所做的比较。

4。第三方库

还有an alternative not officially supported by Shopify，它是一个TextMate Bundle，以防您使用OSX 编辑器。

有一个类似于主题工具包的非官方扩展 cli，但具有称为 Quickshot 的更多功能，我刚刚根据 Matt 的回复发现了它，并且看起来非常棒。他们强调的一些特点是：

支持上传到多个 Shopify 商店和主题 易于使用的配置向导 并行上传/下载大大减少了传输时间 支持在上传到 Shopify 之前在本地自动编译 scss 支持将 Babel/ES6 自动编译成易于被 Requirejs 等使用的模块 可以与 .gitignore 文件或自定义 .quickshotignore 文件一起使用。 可以下载/上传 Shopify 博客、页面和产品！轻松在商店之间转移它们！甚至是元场！并在您喜欢的编辑器中进行本地编辑。

【讨论】：

哪些工具最容易与 Git 集成？

我会小心这个，因为它现在仍处于测试阶段，根据他们的github readme - “Slate v1.0 目前处于测试阶段。预计会有比最终版本更多的错误。”跨度>

Aaaa 并且他们已经停止支持 Slate。大声笑

Slate - 支持终止（2020 年 1 月）

【参考方案2】：

截至 2020 年，Shopify 已停止支持 Slate，因此您现在可以使用 Themekit - https://shopify.github.io/themekit/

【参考方案3】：

通过运行以下命令安装状态包：

npm install -g @shopify/slate
slate theme theme-name

【参考方案4】：

如果您正在寻找完全离线的开发，很遗憾目前无法实现。虽然 Slate/ThemeKit CLI 可让您在自己喜欢的文本编辑器中编写代码，但仍然需要互联网连接，因为它希望始终保持所有内容同步。

【参考方案5】：

Shopify 最近发布了 Slate，这是一种用于主题开发的新工具。

https://github.com/Shopify/slate

【讨论】：

自 2020 年 1 月起不再支持。

【参考方案6】：

胡安的回答很到位。

还有一个我知道的，我认为它比 Themekit（我使用的）更先进一点，叫做 Quickshot：https://quickshot.readme.io/v2.1/docs

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处的链接中包含答案的基本部分，并提供链接以供参考。

感谢分享。只需将其添加到他们突出显示的功能中即可。看起来真的很有用！

【参考方案7】：

Shopify 为 Mac 构建了一个工具，可让您在本地开发主题，并与您的商店同步 https://apps.shopify.com/desktop-theme-editor

我对 windows/Linux 等一无所知。

【讨论】：

链接不再存在。

@shredding 我发布该链接已经有一段时间了 - 桌面主题编辑器已不复存在......