在shopify里新增页面

作者：吴业飞 时间：2018.06.08

---

这个教程将说明如何在一个shopify的theme中新建一个页面并正确的指向这个页面。

实际工作流程

1.Add a section

我们新增一个名为my-first-section的section,这个section里编写的HTML代码就是你新增的页面的HTML

Tips: shopify自带的在线编辑器比较难用，建议在自己习惯的编辑器里完成编码后粘贴过来。 准确的说这个不是HTML文件，而是liquid模板引擎，关于liquid模板语法的介绍可以看github.com/Shopify/liq… Note: schema请写在section中

2.Add a Templates

这里我们新建一个名为my-first-page的Template

可以看到my-first-page并不是一个空白的文件，这里自动生成的代码我们点开Template下的page.liquid就明白了

可以看到因为我们在新建名为my-first-page的Template时选择了for page，所以my-first-page继承了page.liquid的内容。那么问题来了，我们现在是在新建页面，我们就想从零开始不想继承，能不能不选择for page呢？答案是否定的，在后面会说到原因。 我们现在回归正常工作流程，我们新建了section,新建了template，现在我们在template中引用我们的section,通过 {% section 'my-first-section' %}

可以看到，我们并没有在我们的template中编写HTML，我们选择将所有的HTML放到section中，只在template中引入section,理由是我们可能需要编写schema,而schema必须编写在对应的section中才能生效（全局schema除外）。 至此我们的HTML部分编码完成，我们再将我们编写好的SCSS粘贴到Assets下的__theme.scss.liquid__

官方指南中说明了我们可以在section中用{% stylesheet %} {% endstylesheet %} 包裹该section所需的css(scss),这里建议将SCSS放到总的样式文件__theme.scss.liquid__的理由是笔者在实践中发现写在section中的样式貌似不能在刷新页面后立刻生效，总感觉有延迟要多次刷新，但是写在__theme.scss.liquid__中可以在刷新后立即生效，这个问题有待验证原因。在此提出以便读者在实践中如果发现样式未生效不妨将样式放到theme.scss.liquid文件中看看效果以便排查错误。

3.Add page

下面的流程不涉及编码，单纯地在前台添加我们写好的页面。

4.访问页面

经过上述步骤我们已经在系统里添加了页面，本小节将说明怎么访问这些页面。

object handles

Handles是用来访问对象属性的，具体介绍参考help.shopify.com/themes/liqu… 这里我们直接说明访问页面的url 如果我们在Add page时选择的Template suffix是page.my-first-page，那么url为/pages/my-first-page。 shopify的命名规范是全部小写“-”分割，所以为了方便url的书写建议__不要__使用驼峰命名法。

---

版权声明：自由转载-非商用-非衍生-保持署名

转载于:https://juejin.im/post/5c11c4696fb9a049ea38d186