从Liquid升级Hydrogen思考

Shopify 发布了一个基于 React 的框架,用于构建由 Shopify 驱动的动态自定义店面,称为 Hydrogen。 Hydrogen 通过使用 Shopify 的基础技术堆栈加速商业开发流程。

元数据应用

"元数据"(Metadata)在电子商务和Web开发背景下通常指用于描述网页内容或产品信息的附加数据。在Shopify平台上,元数据通常用于搜索引擎优化(SEO)和提高网站可见性

Shopify 主题入门

shopify theme 可以通过商店后台进行编辑,简单的拖拽点击就能改变主题。为了使其更具有定制性,灵活性,你可以在 theme, section, block 三个级别提供设置。

Liquid 对象

Liquid 对象包含在页面上输出动态内容的属性。

Liquid 过滤器

过滤器是修改数字、字符串、变量和对象输出的简单方法。 它们被放置在一个输出标记{{}}中,并由一个管道字符|表示。可以在一个输出上使用多个过滤器。

Liquid 语法说明

Liquid 语法快速入门和使用说明

Liquid 入门基础

Liquid是由Shopify创建并使用Ruby编写的模板语言。 它现在作为一个开源项目可以在GitHub上获得,并被许多不同的软件项目和公司使用。

商店的模板目录结构

每个店铺主题都有固定目录,了解对应结构方便我们快速修改和自定义样式处理。

运营配置模板流程

shopify应用市场上有非常多的模板挑选,但是使用上都是大同小异的,记录一下使用过程

自定义Section

自定义shopify section可以页面模板内快速复用相同布局区域和抽象块配置

Shopify 主题的性能最佳实践

在shopify可以基于以下整理的原则和经验对页面进行性能优化。

页面引用到静态文件

在Shopify中,通常建议将CSS和JavaScript文件引用放在主题的布局文件中,而不是单独的页面或区块中