新建page模板文件

新增page模板文件方式有两种，分别为可视化操作和命令行操作：

方式一：新建page.xxx.liquid文件，可通过shopify端新增，如下图：

微信图片_20220305161320.png

微信图片_20220305161332.png

通过这种方式新增的page模板，有以下默认代码：

<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
复制代码

这种方式新增的模板文件，需要使用theme download 命令同步到本地。
命令：
theme download template/page.xxx.liquid

方式二：可通过本地直接新建page.xxx.liquid格式的文件，新建完需要deploy到线上主题。

命令：
theme deploy template/page.xxx.liquid

配置page的线上店铺访问路径

登录对应的店铺，Online Store –> Pages –> Add Page,可配置以下内容：
参考： help.shopify.com/en/manual/s…

Title 项：这里的title决定了该page在线上店铺的访问路径；（这里的title是liquid里面的object handle）
Content 项: 这里的content可以进行网页编辑给page添加对应的内容；（如果活动页通过配置section方式，这里可以不填写）
Edit website SEO*：关于网页seo方面，可参考：help.shopify.com/en/manual/p… ;
Visibility 项：可配置该网页是否可以在线访问或者可访问的时间节点等；
Template 项：其中Template suffix 选择对应的page.xxx。 (这里的xxx跟新建page的名字相互对应的；Template suffix这里只会显示当前线上店铺 theme下的page模板类型的可选项，所以在开发主题【注意：不是线上主题】下新增的page，必须先 publish theme 后才能在Template suffix选项显示)。

微信图片_20220305161337.png

微信图片_20220305161340.png

自定义page layout

通过命令行 theme download templates/pages.xxx.liquid，可以吧刚刚新建的page下载到本地，然后回到本地开发环境：
一般情况下，如果不指明layout，默认采用的是layout/theme.liquid这个layout，有时候我们可能不想应用默认layout，例如活动页等，这里我们可以自定义layout，在layout目录下新建my-activity.liquid,关键代码如下，可根据情况作调整：

<!--/layout/my-acitivity.liquid-->
<!doctype html>
<html class="supports-no-js" lang="{{shop.locale}}">
    <head>
        <meta charset="UTF-8">
        <title>
        {{shop.name}}
        </title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        {{content_for_header}}
    </head>
    <body>
    <!--这里必须引入，不然 page.xxx.liquid配置的section不能正常显示对应的配置-->
    {{content_for_layout}}
    </body>
</html>
复制代码

开发page所需的section

这里举一个例子，实现的效果是一个图片轮播的section组件 my-carousel.liquid.
其开发步骤查看文章：Liquid开发之Shopify自定义section，这里不多赘述。

配置page具体内容

通过shopify端添加的page模板，默认的代码如下：

因为page页面不具备像首页那样可动态新增section的方式来配置，开发过程中，目前只能通过分析UI设计稿，确定该page需要哪些section，然后通过代码将section 引入方式来实现。例如刚刚新建的page.activity.liquid模板，应用自定义的my-activity layout, 并将 my-carousel section组件引入，可免可编写代码如下：

<!-- /templates/page.activity.liquid -->
<!-- 这里可以指定自定义的layout（相当于hrml框架），如果不引入，默认为theme layout -->
{% lyaout 'my-activity' %}

<!-- 只有对应的lyaout的liquid文件在body标签声明了 {{ content_for_layout }},这里配置的section才会生效 -->
{% section 'my-carousel' %}
复制代码

运营配置page的流程

微信图片_20220305161344.png

微信图片_20220305161347.png

微信图片_20220305161351.png

注意事项

配置 Add page时，Title项决定了自定义page的线上可访问路径，而且Template suffix这里只会显示线上店铺theme下的page模板类型的可选项；
一般情况下，如果templates的pages文件不指明layout，则默认采用的是layout/theme.liquid这个layout,如果theme.liquid layout不满足当前需求，则需求自定义layout,并在对应的template通过代码{% layout 'xxx' %}方式引入；
一个section组件，其所配置的内容是公用的，如果2个不同的page引用同一个section。但是项配置不一样的内容是不行的，只能通过新增section的方式来实现。