在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的书写建议__不要__使用驼峰命名法。