简介
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
