将链接环绕在Twig中的一个块上

Question

我有一个街区，我试图围绕它包装一个链接：

{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
        <a href="{{ content.field_link.0['#url'] }}">
          {{ content }}
        </a>
    {% endblock %}
  </div>
{% endblock paragraph %}

但是，当代码被输出时，链接就在块的上方而不是它周围，它将输入到内容中的多个其他地方。您可以在任何地方看到/node/2，但是它没有任何有用的地方(除了环绕在“Office”图像周围，它来自{{ content }而不是包装的链接)。

<div data-quickedit-entity-id="paragraph/5594" class="paragraph paragraph--transporter-item paragraph--view-mode-default" data-quickedit-entity-instance-id="0">
  <a href="/node/2">
    <!-- THEME HOOK: 'field' -->
    <!-- BEGIN OUTPUT from 'modules/contrib/fences/field.html.twig' -->
  </a>

  <div class="paragraph--transporter-item__icon field field--name-field-icon field--type-entity-reference field--label-hidden field__items" data-quickedit-field-id="paragraph/5594/field_icon/en/default">
    <a href="/node/2">
      <!-- THEME HOOK: 'media' -->
      <!-- BEGIN OUTPUT from 'core/modules/media/templates/media.html.twig' -->
    </a>

    <div data-quickedit-entity-id="media/9" class="contextual-region" data-quickedit-entity-instance-id="0">
      <a href="/node/2">
        <div data-contextual-id="media:media=9:changed=1561152189&langcode=en" data-contextual-token="8VIDU3VuOojWGK9hX_jn8ERolu-tvAZdOewrYfTFUwA" class="contextual" role="form">
          <button class="trigger visually-hidden focusable" type="button" aria-pressed="false">Open  configuration options</button>
          <!-- THEME HOOK: 'links__contextual' -->
          <!-- BEGIN OUTPUT from 'core/modules/system/templates/links.html.twig' -->
          <ul class="contextual-links" hidden=""><li class="quickedit"><a href="" role="button" aria-pressed="false">Quick edit</a></li><li><a href="/media/9/edit?destination=/node/2">Edit</a></li><li><a href="/media/9/delete?destination=/node/2">Delete</a></li></ul>
          <!-- END OUTPUT from 'core/modules/system/templates/links.html.twig' -->
        </div>

        <!-- THEME HOOK: 'field' -->
        <!-- BEGIN OUTPUT from 'modules/contrib/fences/field.html.twig' -->
      </a>
      <div data-quickedit-field-id="media/9/field_media_image/en/default" class="field field--name-field-media-image field--type-image field--label-visually_hidden field__items quickedit-field">
        <a href="/node/2">
          <div class="field__label visually-hidden">Image</div>
        </a>
        <div class="field__item">
          <a href="/node/2">
            <!-- THEME HOOK: 'image_formatter' -->
            <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
          </a>
          <a href="http://arboreal.lndo.site/sites/default/files/2019-06/0010-office.svg">
            <!-- THEME HOOK: 'image' -->
            <!-- BEGIN OUTPUT from 'core/modules/system/templates/image.html.twig' -->
            <img src="/sites/default/files/2019-06/0010-office.svg" alt="Office" typeof="foaf:Image" width="" height="">
            <!-- END OUTPUT from 'core/modules/system/templates/image.html.twig' -->
          </a>
          <!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
        </div>
      </div>
      <!-- END OUTPUT from 'modules/contrib/fences/field.html.twig' -->
    </div>
    <!-- END OUTPUT from 'core/modules/media/templates/media.html.twig' -->
  </div>
  <!-- END OUTPUT from 'modules/contrib/fences/field.html.twig' -->

  <!-- THEME HOOK: 'field' -->
  <!-- BEGIN OUTPUT from 'modules/contrib/fences/field.html.twig' -->
  <div class=".paragraph--transporter-item__label field field--name-field-link field--type-link field--label-hidden field__items" data-quickedit-field-id="paragraph/5594/field_link/en/default">
    <a href="/node/2">Office</a>
  </div>
  <!-- END OUTPUT from 'modules/contrib/fences/field.html.twig' -->
</div>

为什么会发生这种情况，我如何获得它，使它只输出在一个地方和整个块的链接？

Answer 1

这不是你想要的答案..。

我建议不要在链接中包装你的块。这是不好的SEO和屏幕阅读器和其他辅助技术难以破译。

相反，将链接放在块的末尾，并使用CSS绝对定位它以覆盖整个块。

标记：

<div class="my-block>
  <h2>Title</h2>
  <p>Some content</p>
  <a class="my-block-link" title="My helpful title for screen readers"></a>
</div>

风格：

.my-block {
  position: relative;

  a.my-block-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

重要的是尽可能实现无障碍。