如何优化Banner代码：实现无重复div的条件锚点包裹

问题背景 #

现有Banner功能可正常运行，但为满足判断条件存在重复编写div代码的情况，希望在不重复代码的前提下，根据条件用锚点标签包裹div。原代码中先定义变量判断是否存在链接：

{% if block.settings.desktop != blank %}
  {% assign link = true %}
{% else %}
  {% assign link = false %}
{% endif %}

之后尝试通过变量控制锚点包裹，但仍会导致div代码重复。

优化方案 #

步骤1：简化变量定义 #

用一行代码完成链接存在性判断，替代原有的if-else结构：

{% assign link = block.settings.desktop != blank %}

步骤2：条件式包裹锚点标签 #

通过拆分锚点标签的开闭逻辑，让div代码只编写一次：

{% assign link = block.settings.desktop != blank %}

{% if link %}
  <a href="{{ block.settings.desktop }}" aria-label="{{ block.settings.desktop }}">
{% endif %}

<!-- 仅编写一次的div核心内容 -->
<div class="hero-banner__content {{ banner_alignment }} {{ banner_alignment_mobile }}--">
  <!-- 此处填充Banner的具体内容，如图片、文案等 -->
</div>

{% if link %}
  </a>
{% endif %}

方案说明 #

这种方式通过分离锚点标签的起始与闭合逻辑，让核心的div代码只需要维护一次，既满足了"有链接时用a标签包裹div，无链接时直接渲染div"的需求，又彻底消除了代码冗余，后续修改Banner内容或样式时只需改动一处即可。

内容的提问来源于stack exchange，提问作者Nik