liquid语法shopify案例：

{{ 'swiper-bundle.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.js' | asset_url | script_tag }}
<script src="{{ 'swiper-bundle.js' | asset_url }}" defer></script>
   <style>
     *{
        margin: 0;
        padding: 0;
       
     }
       .bigBlotcontent{
         display:block;
       }
.swiper.mySwiperBlot.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    display: none;
}
    .bigBlot{
        width: 100%;
        height: 835px;
        background-color:#F5F5F5 ;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
          font-family: unset！imprtant;
          display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
      margin-top:76px;
     }
     .bigBlot ul{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
     }
     .bigBlot ul li{
        display: inline-block;
        list-style: none;
        margin-right:30px ;
     } 
     .bigBlot ul li:nth-child(3n){
        margin-right:0px ;
     } 
     .bigBlotImage>img{
        width: 380px;
        height: 380px;
        border-radius: 10px;
     }
     .bigBlotcontent .bigBlotTitle{
        width: 380px;
        padding: 0 50px;
        text-align: center;
        box-sizing: border-box;
        font-weight: bold;
        color: #000000;
         font-size: 21px;
         margin:20px 0;
     }
     .bigBlotDescript{
        width: 380px;
        padding: 0 50px;
        text-align: center;
        box-sizing: border-box;
        font-size: 13px;
     }
     .bigBlotTitlehead>h3{
      margin:68px 0;
      text-align: center;
     }
  .bigBlotviewmore {
    display: flex;
    justify-content: center;
    justify-content: center;
    align-items: center;
}
     .bigBlotviewmore button {
            width: 305px;
            height: 65px;
            background: #ffffff;
            border-radius: 6px 6px 6px 6px;
            opacity: 1;
            border: 2px solid #000000;
            font-size: 19px;
            color:#000000;
            margin-top:56px;
       margin-bottom: 70px;
           text-transform: unset;
        }
     button{
           text-transform: unset;
     }
     @media (max-width:800px){
       .bigBlotcontent{
         display:none;
       }
       .bigBlot{
         margin-top:35px;
        width: 100%;
         height:auto;
        background-color:#F5F5F5 ;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
          font-family: unset！imprtant;
          display: flex;
       flex-direction: column;
      justify-content: center;
      align-items: center;
     }
       .bigBlotImage{
         width: 355px;
height: 355px;
border-radius: 5px 5px 5px 5px;
       }
          .bigBlotImage>img{
         width: 355px;
height: 355px;
border-radius: 5px 5px 5px 5px;
            object-fit:cover;
       } 
       .swiper.mySwiperBlot.swiper-initialized.swiper-horizontal.swiper-ios.swiper-backface-hidden {
         display:block;
    width: 375px;
    padding-left: 10px;
         height:600px;
}
       .bigBlotTitle>h3{
         font-size: 18px;
     
     }
         .bigBlotDescript{
        width:375px;
        padding: 0 55px;
        text-align: center;
        box-sizing: border-box;
        font-size: 10px;
     }
       .bigBlotTitle {
    margin: 25px 0 0 0;
    padding: 0 82px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
       .bigBlotTitlehead{
         margin-top:35px;
         margin-bottom:25px;
       }
       .bigBlotTitlehead>h3{
         margin:0;
         font-size: 16px;
       }
        .bigBlotviewmore button {
            width: 111px;
            height: 24px;
            background: #ffffff;
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            border: 1px solid #000000;
            font-size: 8px;
            color:#000000;
           text-transform: unset;
          margin:23px auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
        
       .bigBlotviewmore {
    display: flex;
    justify-content: center;
}
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal {
    top: 570px;
    bottom: 30px;
    width: 72px;
    height: 7px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
  background: #ffffff;
}
       .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    border-radius: 5px;
    background: #3C65C8;
}
     }
    </style>
     <div class="bigBlot">
        <div class="bigBlotTitlehead">
            <h3>{{section.settings.title}}</h3>
        </div>
       <!-- Pc端 -->
       <div class="bigBlotcontent">
           <ul>
           {% assign blot = section.settings.blog %}
            {% assign num = section.settings.post_limit %}
           {% for article in blot .articles limit:  num  %}
                <li>
                <div class="bigBlotImage"><img src="{{article.image|image_url}}" alt=""></div>
                <div class="bigBlotTitle">
                    <h3>{{article.title |escape}}</h3>
                </div>
                <div class="bigBlotDescript">
                    <span> {{ article.content | strip_html | truncatewords: 30 }}</span>
                </div>
            </li>
             {% endfor %}
        </ul>
         
       </div> 
       <!--手機端  -->
    <div class="swiper mySwiperBlot">
    <div class="swiper-wrapper"> 
        {% assign blot = section.settings.blog %}
            {% assign num = section.settings.post_limit %}
           {% for article in blot .articles limit:  num  %}
         <div class="swiper-slide"> 
         <div class="bigBlotImage"><img src="{{article.image|image_url}}" alt=""></div>
                <div class="bigBlotTitle">
                    <h3>{{article.title |escape}}</h3>
                </div>
                <div class="bigBlotDescript">
                    <span> {{ article.content | strip_html | truncatewords: 30 }}</span>
                </div>
      </div>
        {% endfor %}
    </div>   
    <div class="swiper-pagination"></div>
  </div>
    </div>
      <div class="bigBlotviewmore">
            <button onclick="{{ section.settings.button_link}}">View More</button>
        </div>
<script>
    var swiper = new Swiper(".mySwiperBlot", {
      pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
      }
    });
</script>     
{% schema %}
  {
    "name": "blot",
    "settings": [
            {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Blog posts"
      },
      {
        "type": "blog",
        "id": "blog",
        "label": "Blog"
      },
      {
        "type": "range",
        "id": "post_limit",
        "label": "Posts",
        "min": 3,
        "max": 12,
        "step": 3,
        "default": 3
      },
      {
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}
    ],
     "presets": [
    {
      "name": "blot"    
    }
     ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

获取shopify后台blot的内容