簡(jiǎn)介
shopify主題主要使用liquid模板，需要自定義主題時(shí)可先參考該文檔
中文文檔
以下為個(gè)人見解
shopify主題代碼中包含7大塊
Layout:布局模板文件夾，也就頁(yè)面的主要框架（從html頭部加載哪些css 、js。一個(gè)完整的html）
Tempalte:可用的布局模板文件
該文件夾下的文件可對(duì)應(yīng)到通過自定義主題時(shí)對(duì)應(yīng)這個(gè)頁(yè)
例如主頁(yè)對(duì)應(yīng)index.liquid文件
自定義主題
后臺(tái)側(cè)邊欄
該文件夾可理解為具體頁(yè)面布局模板
那什么情況下需創(chuàng)建模板：在某些情況下，可能需要為同一模板使用不同的標(biāo)記。 例如，可能希望在一個(gè)產(chǎn)品頁(yè)面上使用側(cè)邊欄，而在另一產(chǎn)品頁(yè)面上不希望
Sections:組成主題的可重復(fù)使用的內(nèi)容模塊，可由用戶自定義、重新排序。
使用方法：
例如在article.liquid文件中使用sections文件夾下的article-template.liquid文件時(shí)。
{% section 'article-template' %}
shema tags 相關(guān)API,也就是shema整體結(jié)構(gòu)
shema 結(jié)構(gòu)中settings 相關(guān)API
section文件的固定模板格式:
/*放置html內(nèi)容*/
/*編寫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 %} /*這兒對(duì)應(yīng)的就是下面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": "執(zhí)筆者を表示する",
"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:靜態(tài)資源文件夾，存放第三方j(luò)s、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:配置主題文件，包含了兩個(gè)文件：
1.settings_data:存儲(chǔ)的是整個(gè)網(wǎng)站數(shù)據(jù)
current:代表當(dāng)前頁(yè)面上已選的所有section
persents:代表主題中不同的不同風(fēng)格下，可在add section目錄中看到的預(yù)設(shè)的section
2.settings_schema.json:存儲(chǔ)的是全局的schema,也就是是在theme.liquid文件中可看到使用settings.predictive_search_enabled
