Liquid模版文件结构

文件结构树

1.点击模版代码，进入模版文件管理

• 注意：只有liquid模版才有这个按钮，以前的vue模版没有这个按钮

2.进入后，可以看到左边的文件结构树

3.查看文件

您可以点击文件夹，看到相应的文件列表，点击后，在右侧看到文件代码内容

4.操作文件

4.1搜索文件代码字符串

• 搜索文件代码内容
• 替换文件代码内容

4.2修改保存文件

• 修改文件的内容，点击保存按钮，即可修改文件内容

4.3查看历史文件内容

文件夹-说明

一.config文件夹

全局配置部分，该文件夹里面包含2个文件：

• settings_schema.json
• settings_data.json

1.settings_schema.json文件

• 对应的是模版装修，全局配置部分，字段结构部分
• 您可以打开该文件，可以看到是一个大json配置，可以参看json里面的内容，然后在商家端后台，进入店铺的模版装修页面，点击左下角的全局配置，就可以看到schema的json内容和这里是一一对应的
• 没错，全局配置的字段结构就是这个json解决定

下面的图片，左边是模版装修，全局配置的内容，右侧是settings_schema.json的内容，可以看到内容是一一对应的

2.settings_data.json

通过settings_schema.json文件的字段结构配置，商家端后台模版装修，渲染出来全局配置的UI界面，用户进行填写内容后，还需要保存这个内容的值， 这个值就保存到文件：settings_data.json 里面

更多详细，参看：config-全局配置

二：layout

模版的入口文件夹，目前里面只有一个theme.liquid

layout/theme.liquid文件

• 是模版的入口文件
• 在这个文件里面，可以看到 标签, 该文件内容是整个页面的基本框架，里面通过liquid标签和变量，因此其他的内容，进而渲染整个页面
• 加载基础的js，css文件
• 页面的meta title等信息

更多详细参看：layout-模版入口文件

三：locales

该文件夹，里面是模版的翻译文件，里面是一个json翻译对（里面的key是必须保证唯一，否则将覆盖）

该文件里面有很多语言对应的json，一般都是由fecify开发者维护

四：sections

该文件夹是模版的装修卡片部分，每一个文件是一个装修卡片

• 譬如: main-cart.liquid就是购物车页面的主卡片
• 譬如：main-product.liquid就是商品详情页的主卡片

更多详细参看：sections-装修卡片

五:snippets

该文件夹，是小部件部分，小部件是比section(装修卡片)要小的单位，在section文件里面可以使用render标签将小部件引入

• 您可以将某个标题显示，商品价格，购物车按钮，甚至某个svg图片，都做成小部件
• 多个section通过render引入同一个snippets小部件，进而可以更大化的公用文件内容

更多详细参看：snippets-小部件

六：template

该文件夹是页面的内容部分的卡片配置，一个页面对应一个template文件，一一对应

文件对应（列举几个）：

• 首页：home.json
• 专辑页面：collection.json
• 商品详情页面：product.json
• 自定义页面：page.json
• 搜索页面：search.json

打开home.json，可以看到内容是一个json，里面是卡片section的配置值 ，当我们在模版装修，首页，在内容部分加入装修卡片，模版发布后，就可以在这个文件里面看到相应的section配置内容

更多详细参看：templates-装修卡片

通过上面的讲解，我们明白了各个文件夹对应的职责，fecify模版的结构和shopify是一致的，上面的逻辑对shopify同样适应，您可以打开shopify的模版开发，看一下文件结构是不是基本相同