Shopify二次开发之四：完成第一个section

原创

已于 2023-11-30 17:50:26 修改 · 1.9k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-11-30 10:02:53 首次发布

本文介绍了使用Liquid语言和Schema配置在商城后台开发中创建图文section的过程，包括分析设计需求、配置schemablocks、编写HTML和CSS代码，以及展示如何通过Liquid代码动态渲染数据和应用CSS样式。

前面学习了关于目录结构分析、schema配置、liquid语法学习，模板渲染对象，到此就可以简单的开发一个section

完成第一个图文section，根据设计稿，分析需要配置的block和input settings

分析

上面图文表达如何要选择"这个品牌"，根据step一步步引导用户去阅读。

分析图文，得出这总体是一个section分3个block，block包括图片、标题、内容、图片位置(左、右)、图片占盒子的百分比。

schema配置

{% schema %}
{
  "name": "Next setp",
  "limit": 1,
  "max_blocks": 3,
  "blocks": [
     {
       "name": "Step",
       "type": "step",
       "settings": [
         {
           "type": "image_picker",  // 图片
           "id": "step_image",
           "label": "step image"
         },
        {
          "type": "range",         // 图片百分比
          "id": "image_width",
          "min": 25,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "image width %",
          "default": 35
        },
        {
          "type": "radio",       // 图片位置
          "id": "image_position",
          "label": "image position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "defa