简介

shopify主题主要使用liquid模板，需要自定义主题时可先参考该文档
中文文档
以下为个人见解

shopify主题代码中包含7大块

Layout:布局模板文件夹，也就页面的主要框架（从html头部加载哪些css 、js。一个完整的html）

Tempalte:可用的布局模板文件

该文件夹下的文件可对应到通过自定义主题时对应这个页
例如主页对应index.liquid文件

自定义主题
后台侧边栏

该文件夹可理解为具体页面布局模板
那什么情况下需创建模板：在某些情况下，可能需要为同一模板使用不同的标记。 例如，可能希望在一个产品页面上使用侧边栏，而在另一产品页面上不希望

Sections:组成主题的可重复使用的内容模块，可由用户自定义、重新排序。

使用方法：
例如在article.liquid文件中使用sections文件夹下的article-template.liquid文件时。
{% section 'article-template' %}

shema tags 相关API,也就是shema整体结构
shema 结构中settings 相关API

section文件的固定模板格式:
/*放置html内容*/
/*编写schema settings*/
{% schema %}
{% endschema %}
/*编写css样式*/
{% stylesheet %}
{% endstylesheet  %}
/*编写js*/
{% javascript %}
{% endjavascript %}

/*参考article-tempalte.liquid文件*/
<div class="section-header text-center">
  <h1 class="article__title" id="title-0">{{ article.title }}</h1>
  {% if section.settings.blog_show_author %} /*这儿对应的就是下面schema段中的id*/
    <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
  {% endif %}
  {% if section.settings.blog_show_date %}
    <span class="article__date">
      {{ article.published_at | time_tag: format: 'date' }}
    </span>
  {% endif %}
</div>
<div class="rte">
  {{ article.content }}
</div>
{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
{% schema %}
/*这里面的name,label都采用的是多语言的格式*/
{
  "name": { 
    "cs": "Příspěvky",
    "da": "Opslag",
    "de": "Posts",
    "en": "Posts",
    "es": "Publicaciones",
    "fi": "Julkaisut",
    "fr": "Articles",
    "it": "Articoli",
    "ja": "投稿",
    "ko": "게시물",
    "nb": "Innlegg",
    "nl": "Berichten",
    "pl": "Posty",
    "pt-BR": "Posts",
    "pt-PT": "Publicações",
    "sv": "Inlägg",
    "th": "โพสต์",
    "tr": "Gönderiler",
    "vi": "Bài viết",
    "zh-CN": "文章",
    "zh-TW": "貼文"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": {
        "cs": "Zobrazit autora",
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pl": "Pokaż autora",
        "pt-BR": "Exibir autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "tr": "Yazarı göster",
        "vi": "Hiển thị tác giả",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": {
        "cs": "Zobrazit datum",
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pl": "Pokaż datę",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "tr": "Tarihi göster",
        "vi": "Hiển thị ngày",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": {
        "cs": "Zobrazit tlačítka pro sdílení na sociálních sítích",
        "da": "Vis knapper til deling på sociale medier",
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fi": "Näytä sosiaalisen median jakamispainikkeet",
        "fr": "Afficher les boutons de partage sur les médias sociaux",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャルメディアでの共有ボタンを表示する",
        "ko": "소셜 공유 버튼 표시",
        "nb": "Vis knapper for deling på sosiale medier",
        "nl": "Knoppen voor sociaal delen weergeven",
        "pl": "Pokaż przyciski udostępniania w mediach społecznościowych",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais",
        "pt-PT": "Mostrar botões de partilha nas redes sociais",
        "sv": "Visa knappar för delning i sociala medier",
        "th": "แสดงปุ่มสำหรับแชร์ลงโซเชียล",
        "tr": "Sosyal medya paylaşım düğmelerini göster",
        "vi": "Hiển thị nút chia sẻ qua mạng xã hội",
        "zh-CN": "显示社交分享按钮",
        "zh-TW": "顯示社群分享按鈕"
      },
      "default": true
    }
  ]
}
{% endschema %}

Snippets:代码片段,也就是在布局文件中可以随意使用的代码片段

/*使用方法*/
{% include 'social-meta-tags' %}
{% include 'css-variables' %}

Assets:静态资源文件夹，存放第三方js、css、图片等

/*使用方法*/
{{ 'theme.css' | asset_url | stylesheet_tag }}
{{ 'gift-card.css' | asset_url | stylesheet_tag }}
<script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer="defer"></script>
<script src="{{ 'gift-card.js' | asset_url }}" defer="defer"></script>

Config:配置主题文件，包含了两个文件：

1.settings_data:存储的是整个网站数据
current:代表当前页面上已选的所有section
persents:代表主题中不同的不同风格下，可在add section目录中看到的预设的section
2.settings_schema.json:存储的是全局的schema,也就是是在theme.liquid文件中可看到使用settings.predictive_search_enabled

Locales:用于为主题提供翻译的内容