在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的書寫建議__不要__使用駝峯命名法。