在 .liquid 上集成 Bootstrap ( shopify )答案

【问题标题】：Integrate Bootstrap on .liquid ( shopify )在 .liquid 上集成 Bootstrap ( shopify )
【发布时间】：2017-12-28 11:02:19
【问题描述】：

在 shopify 主题中，我想在 theme.liquid 文件中集成以下引导链接。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

如何将引导程序集成到我的主题中？

【问题讨论】：

标签： html twitter-bootstrap css liquid liquid-layout

【解决方案1】：

如果您只想加载所有内容以使其正常工作，请将此代码添加到 Admin > Themes > Template Editor > theme.liquid 的头部

确保将代码粘贴到<head> </head> 标记之间。

您可以尝试将它们加载为下面的 sn-p ：

{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' | script_tag }}
{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' | stylesheet_tag }}
{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' | stylesheet_tag }}

【讨论】：

Shopify 移动了到达这个 theme.liquid 的路径。它现在位于销售渠道>主题下，然后用户需要选择操作，然后编辑代码。 theme.liquid 位于 Layout 组中。

【解决方案2】：

更好的做法是让您的主题从 CDN 链接馈送，但也让它求助于本地引导副本，以防 CDN 服务器出现故障。

【讨论】：

您如何建议在 Shopify 中这样做？（本地副本）
同理！您在项目中声明引导库 CDN 链接。您还应该为这些引导 CDN 单独创建本地文件，并从本地存储库中引用它们。确保不要运行本地 repo，除非 CDN 无法访问。您可以使用 JS 来做到这一点。