shopify新建的頁面進行布局,但主題內置的模板無法滿足需求怎么辦。自己建一個模塊就好了。
首先,找到要修改的文件,以contact頁面為例,contact頁面使用的模板是page.contact.liquid。如下圖所示,需要跳轉到page-contact-template
在page-contact-template.liquid文件需要修改的地方只有一個。在{% schema %}{% endschema %}里,在block的數組里再添加一個block,如下代碼,需要注意的是"type"這個屬性,其他的就按照自己想要的添加就好了。
{
"type": "hero-video",
"name": "Video hero",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Bring your\nbrand to life."
}]
}
在page-contact-template.liquid修改了代碼后,就需要添加一個snippets文件,命名隨意,明確用處就好,例如page-block-hero-video.liquid。然后在這個文件里進行布局和樣式設置。例如:
<div class="container">
<p>{{ block.settings.title }}</p>
</div>
然后,在page-contact-template.liquid找到紅框里面的內容,各個主題不同,應該會有點差別,需要跳轉到page-template-blocks.liquid文件。
如下紅框所示,復制粘貼添加一個判定條件。
when ‘xxx’ (xxx里填入的內容是在page-contact-template.liquid添加的block的type,在我這的例子是hero-video )
render ' xxxx' (xxx里填的是你設置布局的snippets文件,在我例子就是page-block-hero-video.liquid)
所以
when 'hero-video'
render 'page-block-hero-video' ,block:block
最后回到主題自定義界面,就會發現多出了自己添加的block了。