layout-模版入口文件
前台商城，模版入口部分
前台商城UI
1.对于前台商城的显示，本质是一个html标签嵌套而来的代码结构，譬如：
<!doctype html>
<html lang="{{ shop.language.browser_lang_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>{{ shop.meta_info.meta_title }}</title>
<meta name="keywords" content="{{ shop.meta_info.meta_keywords }}">
<meta name="description" content="{{ shop.meta_info.meta_description }}">
</head>
<body>
<div class="page_container">
...
</div>
</body>
</html>
2.每个页面的数据，都是商家端后台配置的，因此在前台商城每个页面的meta信息，页面内容，都是动态数据，因此我们通过动态变量的方式引入，
这就涉及到liquid模版语法，譬如上面的 {{ shop.meta_info.meta_title }}, 这就是一个变量
3.为了方便管理，我们将网站分成了多个部分
- header：头部部分，里面有logo，菜单，搜索等
- content：内容部分
- footer：页面底部，里面有文字条款，newsletter，copyright等
语法结构
打开layout/theme.liquid, 可以看到他的内容，他的整体是一个完整的html结构框架，里面通过liquid嵌入数据，来组装起来，下面咱们详细讲解一下里面的模版语法
1.liquid tag: comment
{% comment %}
This is a comment block
(c) 2014 Guz Alexander
{% endcomment %}
这是liquid的tag，用来注释内容，不会再页面数据，主要用于开发备注信息，详细参看：tag：句法-Syntax
2.liquid tag: if
{%- if settings.page_transition -%}
{%- assign body_classes = body_classes | append: ' m:overflow-hidden' -%}
{%- endif -%}
说明：
- if条件判断执行，详细参看：tag：条件-Conditional
- assign变量赋值，详细参看：tag：变量-Variable
3.变量值输出：{{ shop.language.browser_lang_code }}
shop是一个对象数据结构，通过两个{{ variable }}, 代表将这个变量的值进行输出
4.liquid tag：for
{% for alternate in shop.alternate_info.alternates -%}
{%- if alternate.hreflang and alternate.url -%}
<link rel="alternate" hreflang="{{ alternate.hreflang }}" href="{{ alternate.url }}"/>
{%- endif -%}
{% endfor -%}
这是一个循环，详细参看：tag：迭代-Iteration
5.liquid tag：render
{% render 'social-meta-tags' %}
render代表引入一个代码片段(小部件)，小部件都放在snippets文件夹里面，因此上面的代码代表：引入文件：snippets/social-meta-tags.liquid
，相当于吧snippets/social-meta-tags.liquid的内容插入到该代码位置
关于render语法，详细参看：tag：主题-Theme
6.liquid：filter
{{ 'base.css' | asset_url | stylesheet_tag }}
说明：asset_url和stylesheet_tag是liquid的filter
'base.css': 是一个字符串asset_url: 通过传入的参数'base.css'，得到css的url，也就是：https://diydomain.fecmall.cn/dist/front/static/new_default_theme/base.css?v=4165stylesheet_tag: 通过传入的参数(也就是asset_url计算后的css url)，得到css的html完整tag：<link href="https://diydomain.fecmall.cn/dist/front/static/new_default_theme/base.css?v=4165" rel="stylesheet" type="text/css" media="all" />
通过2个filter，来得到css的html标签
7.liquid tag：sections
{% sections 'header-group' %}
这是页面的头部部分，也就是header部分，引入一个section group
- 上面的代码，对应的文件是：sections/header-group.liquid
- 关于sections更多信息，参看：tag：主题-Theme
8.页面内容部分
{{ content_for_layout }}
这是一个很重要的变量，是页面的内容部分，在商家端后台，模版装修，页面内容部分加入的卡片，计算出来后，系统赋值于变量content_for_layout,
因此在这里将输出页面的内容
9.liquid tag：section
{% section 'js-group' %}
这是引入了一个section
- 上面的代码，对应的文件是：sections/js-group.liquid
- 关于sections更多信息，参看：tag：主题-Theme
10.数据打印：
{% if base_data_json -%}
<script>
console.log('this is 【theme】 base data json')
console.log({{ base_data_json }})
</script>
{% endif -%}
在开发者模式下，将打印数据，详细使用参看：开发者模式-log
通过上面，我们可以了解到作为一个入口文件的整体架构，以及每个部分语法的含义，引入的文件，最后渲染出来整个页面