Shopify学习记录

目录

一、shopify的文件结构

1.Layout

2.Templates

3.Sections

4.Snippets

5.Assets

6.Config

1） settings_data.json

2） settings_schema.json 

7.Locales

二、setting_schema.json

三、section

1、描述

2、section schema tags相关属性

1）class

2）tag

​3）settings

4）blocks

5）max_blocks

6）presets

7）default

8）locales

四、shopify的相关配置

1. 设置分享时文章缩略图

2. 更改网站的logo

3.更改除了首页之外每个页面的title

​4. 更改首页网页的title和描述

五、代码详解

| json

| assets_url

| stylesheet_tag

| escape

| script_tag

render

content_for_head

| shopfiy_asset_url

request.page_type

 content_for_layout

content_for_header

content_for_index

参考文章

---

一、shopify的文件结构

        

看Liquid文档Liquid 模板语言中文文档 | Liquid 中文网

中文文档不详细，缺少内容，可先用中文文档入门再阅读官方文档。

1.Layout

        默认下是theme.liquid, 类似于vue中的html文件，主题布局模板

2.Templates

        包含所有其他的liquid模板，包括用户账号相关的模板

        路由模块
        通过 page.xxxx.liquid的文件命名格式就可以作为shopify的后面页面开使用

3.Sections

组成主题的一个个可复用模块

说简单点就是组件存放的地方（普通组件）

---

注意事项 ：

一般只在这里使用 schema， 来配置哪些需要自定义输入(shopify的精髓即在此)
section不能调用section
section调用全局的直接settings.xxxx即可， 本地的用前面加session.section调用全局的直接settings.xxxx才可以
导入section ==> {%- section 'prime-banner' -%}

4.Snippets

Liquid的代码片段文件，这些文件可以在liquid的其他模板里面引用

小模块，比section更小的模块， 通常是静态的
导入使用 include或者render，用法如sections

5.Assets

和vue结构一样， 存放一些静态文件的地方， 比如img， 字体图标， 公共js， js插件等

6.Config

当前保存的主题配置

1） settings_data.json

当前已经选好的所有数据，最好不要动这里

“current”: 当前已选择了的所有 sections

“presets”: 能在 Add section 目录中看到的预设的 section

2） settings_schema.json 

列出全局主题设置，全局的，使用settings.xxxx来获取设置的值

7.Locales

二、setting_schema.json

type的常规输入属性如下表：基本跟html的差不多 

type的特殊输入属性如下表：

 

 三、section

1、描述

2、section schema tags相关属性

1）class

2）tag

 3）settings

4）blocks

 

5）max_blocks

 6）presets

 

 7）default

定义默认配置，格式与presets相同只是没有name和catogory

8）locales

翻译模板

四、shopify的相关配置

1. 设置分享时文章缩略图

 2. 更改网站的logo

 代码：

3.更改除了首页之外每个页面的title

4. 更改首页网页的title和描述

五、代码详解

• | json

| json 参考链接General filters serve many different purposes including formatting, converting, and applying CSS classes.https://shopify.dev/api/liquid/filters/additional-filters#json

• | assets_url

• | stylesheet_tag

• | escape

 | assets_url http:// https://shopify.dev/api/liquid/filters/url-filters| stylesheet_taghttp:// https://shopify.dev/api/liquid/filters/html-filters#stylesheet_tag| escapehttp://shopify.github.io/liquid/filters/escape/

• | script_tag

| script_taghttps://shopify.dev/api/liquid/filters/html-filters#script_tag

• render

• content_for_head

renderhttps://shopify.dev/api/liquid/tags/theme-tags#render content_for_headhttps://shopify.dev/themes/architecture/layouts#content_for_header

• | shopfiy_asset_url

• request.page_type

| shopify_asset_urlhttps://shopify.dev/api/liquid/filters/url-filters#shopify_asset_urlhttps://shopify.dev/api/liquid/objects/request#request-page_typehttps://shopify.dev/api/liquid/objects/request#request-page_type

•  content_for_layout

• content_for_header

• content_for_index

 Liquid objectshttps://shopify.dev/api/liquid/objects

 如何进入首页主题自定义编辑器，如下图

 1 配置的是的首页当前选中的section组件 

 2 配置的是首页可以选择配置的section组件

 引用的section组件必须要配置preset才可以在add section选项中出现

 

 编辑器中的位置如下图

参考文章

shopify的前端开发教程 - 百度文库https://wenku.baidu.com/view/96f7b369f4ec4afe04a1b0717fd5360cba1a8d09.htmlshopify建站教程https://baijiahao.baidu.com/s?id=1677862284876865592&wfr=spider&for=pcShopify 二次开发 配置本地开发教程 最详细详解_BaymaxCSDN的博客-CSDN博客_shopify开发教程摘要身为 shopify 网站管理者与开发者 时常需要根据需求去编辑代码，进行少量的代码编辑在页面上编辑还好，但是需要编辑大量的代码则是非常不方便的，因此需要我们将代码同步到本地，并在本地编辑可以自动同步到shopify服务器上第一步、搭建 shopify 本地开发所需要的环境1、安装 chocolatey chocolatey 安装 根据 chocolatey 官网安装即可，非常简单有...https://blog.csdn.net/BaymaxCSDN/article/details/105019828shopify开发总结_来陪人家玩游戏嘛的博客-CSDN博客_shopify开发shopify开发总结准备工作// 1. mac安装程序brew tap shopifybrew install themekit // themekit 类似于 node.js // 2. 注册shopify// 3. shopify设置成中文==> 后台页面左下角设置 ==> store language ==> 当前语言设置成简体中文// 4. 下载主题// 5。 添加主题， 将准备好的主题压缩成zip文件 ==> 目录：在线商店-模版-添https://blog.csdn.net/gongliming_qd/article/details/118383846escape – Liquid template languageLiquid filter that escapes URL-unsafe characters in a string.http://shopify.github.io/liquid/filters/escape/Shopify Liquid详解（2）-- 主题代码目录结构 - 知乎尚睿出海，专注Shopify定制化模板开发，助力品牌出海，欢迎各大品牌商及跨境卖家私信。前言 上一篇文章介绍了Shopify Liquid的三个最重要的特点，本章主要讲解Shopify 主题代码目录结构。有兴趣的朋友多多点赞Shop…https://zhuanlan.zhihu.com/p/409039898shopify二次开发及目录详解_净如镜、已静的博客-CSDN博客_shopify二次开发Evernote Export shopify的二次开发公司需求要求对shopify的官网要进行二次开发，可以创建新的模块，再此我也一脸懵，点进去发现他的开发对习惯了前后端分离和模块化开发的人来说简直是折磨。整个官网的样式都在一个文件下，但是没办法需求来了还是要完成，发现对shopify二次开发的资料少的可怜。所以写下这篇文章看看能不能帮助到各位同道中人，下面先说说要知道哪些才能进行开发开发条件基本的html，css，JavaScript，Liquid模板...https://blog.csdn.net/lubaba20/article/details/112389673