web-dev-qa-db-ja.com

ブロックビュー全体にクリック可能な領域を作成するにはどうすればよいですか？

記事のブロックビューを作成しました。表示形式はグリッドブートストラップです。

ブロックビュー全体にクリック可能な領域を作成するにはどうすればよいですか？

すべてのブロック（フィールドだけでなくブロック全体）をクリックして、/ node/nidにアクセスできるようにしたい

enter image description here

「追加属性」はリンクを作成するのに役立ちますか？

enter image description here

views8themingblocks
1
user84314

CSSとカスタムテンプレート構造を使用...

マークアップ：

<div class="views-row">
    // Your various markup.
    {{ content }}
    // Link contains no text and is absolute positioned to cover the entire markup area.
    <a class="link" href="{{ link }}" title="Link to {{ print node title here }}"></a>
    // The span can be absolutely positioned as well so it is on top of the link.
    <span class="flag">This is a flag</span>
</div>

CSS：

.views-row {
    position: relative;
}

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

span.flag {
    position: relative;
    z-index: 200;
}

このアプローチを使用すると、ブラウザーやスクリーンリーダーにとって意味のないテキストやマークアップを多く含むリンクを回避できます。

1
Prestosaurus

あなたはjQueryでそれをしたいかもしれません：

このような何かがうまくいくでしょう：

(function ($, Drupal) {

  'use strict';

  $(document).ready(function () {
    $('BLOCKCLASS').click(function () {
      var href = $('CLICKABLE FIELD').attr('href');
      window.location = href;
    });
  });


})(jQuery, Drupal);

そのような何かがうまくいくかもしれません

0
user72672

私はこれを行うためにJavaScriptを使用しません。これを行うには、ブロックtwigオーバーライドファイルを指定し、出力全体を<a href...タグで囲む必要があります。

これを行うと、アンカー内にアンカーを配置できないため、フラグなどの他のリンクは機能しなくなります。

以下は昨年のプロジェクトの例です。

<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}{{ title_suffix }}

    <a href="{{ path('entity.node.canonical', {'node': NODE_ID_VAR}) }}">

    {% if block_content.field_sidebar_image is not empty %}
      {{ content.field_sidebar_image }}
    {% endif %}

    <div class="c-sidebar-promo__content">
      <div class="c-sidebar-promo__header">
        {% if block_content.field_title_image is not empty %}
          {{ content.field_title_image }}
        {% endif %}

        <h4 class="c-sidebar-promo__title">{{ label }}</h4>
      </div>
      <div class="c-sidebar-promo__description">
        <p>{{ content.field_sidebar_description }}</p>
      </div>
    </div>

    </a>

  {{ content|without('field_sidebar_image', 'field_sidebar_description', 'field_sidebar_link', 'field_title_image') }}
</div>

これにより、ブロック出力全体が、指定されたリンク先にクリック可能になります。

編集：Twigでノードリンクを生成する方法で例を更新しました。

0
Kevin

Fields show formatのあるビューの場合：

  • コンテンツIDフィールドを追加する

  • テーマのビューフィールドのテンプレートを上書きします。私の場合は、views-view-fields--seminary--block-2.html.twig

    <a href = "{{path（ 'entity.node.canonical'、{'node'：fields.nid.content | striptags | trim}）}}"> //一部のフィールド

0
Matoeil