Bigcommerce 的 Handlebars 开发环境的条件答案

【问题标题】：Conditional for development environment in Bigcommerce's HandlebarsBigcommerce 的 Handlebars 开发环境的条件
【发布时间】：2020-07-12 08:15:21
【问题描述】：

使用 Stencil 中的 Cornerstone 主题，我希望能够根据我是在本地 NPM 环境还是生产站点上做不同的事情。

查看当前 URL 是不够的，因为页面必须已经加载。生成标记时，我想在模板中使用带有把手的条件。比如：

{{#if developEnvironment '===' 'true'}}
  <p>I'm local</p>
{{else}}
  <p>I'm remote</p>
{{/if}}

我在 theme_settings 变量中看不到任何有用的东西。

有什么想法吗？

【问题讨论】：

标签： handlebars.js development-environment bigcommerce cornerstone

【解决方案1】：

BigCommerce 提供了一个实际的键/值对，用于确定是否在开发中。

我使用的是 stencil CLI v2.1.0，所以旧版本可能不是这样。

{{#if in_development}}
 In Development
{{else}}
 In Production
{{/if}}

【讨论】：

谢谢。我能问一下你是怎么知道的吗？我在文档中没有看到对 in_development 的引用。即使是谷歌搜索也没有相关结果
您可以在这里找到所有模板上下文对象的参考：developer.bigcommerce.com/stencil-docs/reference-docs/…

【解决方案2】：

你可以试试这个条件语句：

{{#if settings.maintenance.secure_path '==' 'http://localhost:undefined'}}
  You are running on development.
{{else}}
  You are running on production.
{{/if}}

【讨论】：

这就是解决方案！只是在某些情况下定义了本地路径（localhost:8181），我不知道它是如何变化的。我认为您应该在 localhost 中包含 {{has}} 帮助器，这样就可以解决所有情况

【解决方案3】：

您可以添加自己的自定义 theme_settings 值。

首先，导航到./config.json 文件。在此文件中查找 variations 数组。它应该看起来像这样：

  "variations": [
    {
      "name": "Light",
      "id": "light",
      "meta": {...},
      "images": {...},
      "settings": {
          "developEnvironment": true,
...

在设置对象下，您可以添加自己的自定义 theme_settings 值，就像我在上面所做的一样："developEnvironment": true,。现在在您的主题文件中，您可以执行以下操作：

    {{#if theme_settings.developEnvironment}}
        <!-- Do something -->
    {{/if}}

【讨论】：

我经常使用它，但问题是我每次上传前都需要更改设置并将其更改回用于开发。这个想法是有一种自动的方式让它工作
您需要有两种不同的“样式”/“主题” - 将“Light”更改为“Development”，将“Bold”更改为“Production”。删除所有影响样式的不同设置，因此您将拥有的唯一设置是您在 dev/prod 之间想要的不同内容。仅将生产版本应用到您的站点，并在本地以“开发”样式进行开发。你可以尝试在你的 webpack 构建中使用 dotenv-webpack 并使用一组 prod/dev 环境变量，但这只会对你的 JS 有用，而不是把手。
“删除所有影响样式的不同设置”听起来很糟糕，但我非常感谢您的意见
我认为你根本不明白我的建议。您在 config.json 中有一个顶级设置对象。这包含元数据，在车把模板中被称为“theme_settings”。您还有“变体”——“浅色”、“粗体”和“暖色”——这些是这些值的超集，当您在大型商业商店中应用该“风格”时，这些值将覆盖顶层设置。您可以通过执行“stencil start -v Light”等在本地启动该特定样式。重点是设置顶级样式，并消除light和bold之间的差异
大多数人根本不会使用所有 3 种样式 - 这更多的是主题供应商在他们推销主题时为其主题提供变化。大多数 BC 用户只是自动应用该列表中的第一个“样式”。我的建议是你将你的第一个变体重命名为“Development”，第二个重命名为“Production”，并在 config.json 中添加一个条目，例如“development_version”：true 到 dev 风格。让你的车把 {{#if theme_settings.development_version}} dev stuff {{else}} prod stuff {{/if}} 。始终在本地运行 dev 样式，并始终在部署中应用 prod 样式。