Shopify不使用文字按钮的方式如何给横幅大图添加添加链接

1.修改模板文件 hero.liquid

　　一开始我的想法是直接在图片<img/>元素加上一个链接，发现不可行，鼠标点击不能跳转，于是定位到元素 <div class="hero-fixed-width hero--adapt" ，给它加上超链接有效。

section.settings.button_link 是文字按钮的链接值，为什么说不用文字按钮的方式，又要用到文字按钮的值呢，这里处理的逻辑是，不设置按钮标签，当设置按钮链接时才包裹a标签。

{%- if section.settings.button_link != blank -%}
   		<a href="{{ section.settings.button_link }}">
    {%- endif -%}
          
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"> 内容
    </div>
{%- if section.settings.button_link != blank -%}
   		</a>
    {%- endif -%}

　　另外一种情况是给div加a标签导致图片宽度尺寸放大，显示错误，正确的做法是找到

 <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}元素，并加上a标签

{%- if section.settings.button_link != blank -%}
   	<a href="{{ section.settings.button_link }}">
    {%- endif -%}
      
    <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
          {% unless section.settings.image.alt == blank %}
          role="img"
          aria-label="{{ section.settings.image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"
          {% endunless %}
         data-bg="{{ section.settings.image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
         {%- endif -%}>内容</div>
  
      {%- if section.settings.button_link != blank -%}
   		</a>
      {%- endif -%}