web-dev-qa-db-ja.com

「コンテンツへのリンク」ビューフィールドにクラスを追加します

Drupal 8を使用してviewを構築しています。たまたまtitleフィールドであるフィールドがあり、それをlink to contentに設定しました。btnタグにanchorクラスを単に追加する方法を知りたいのですが、今のところ、出力は次のようになります。

<a href="/node/{id}" hreflang="en">... custom text ...</a>

Rewrite Resultsビュー機能を使用してこれを実現できることはわかっていますが、クライアントのテーマを構築しているため、それ以上のパワーが必要です。テーマはより一般的なものである必要があるため、テンプレートでこれを実現できる必要があります。 .../templates/views-view-field--link.html.twigなどのテンプレートでこれをオーバーライドできるようにするテンプレートの提案/フックはありますか？または、必要なクラスを追加してマークアップをオーバーライドするために使用できるテーマ関数はありますか？

views-view-field.html.twigテンプレートを使用してnode_viewタイプをオーバーライドしてこれを実現することを検討しましたが、fieldのデバッグが本当に難しいため、ユーザーが使用できるカスタムテキストを維持しながら、その方法を確認できません。オプション。

編集する

私は言及するのを忘れていました、これはDrupal coreに依存する必要があります。それが機能するためにユーザーが追加のモジュールをインストールすることは期待できません。

views8hookstheming
5
Pzanno

Wimsの提案とともに、ビューのフィールドをバイパスして、問題のエンティティのビューモードをレンダリングすることを提案します（通常はそうします）。通常、これは「レポート」スタイルのビュー（レコードがテーブル形式でフィールドがセルデータとして機能する）ではなく、プレゼンテーションベースのビューである場合、ほとんどの場合これで十分です。

次に、タイトルがリンクされているビューモードのtwigテンプレートを指定し、そこにクラスを追加できます。このビューモードを使用してビューでレンダリングすると、 1つのテンプレートで一貫性があり、エンティティのレンダリングに依存するビューは、保守が容易になり、セットアップが迅速になります。

ここに違いと利点を説明する記事があります： https://www.amazeelabs.com/en/blog/views-field-rewriting-to-views-modes

とはいえ、リンク自体にはtwigファイル（アンカータグのマークアップが表示される場所）はありません。Wimがリンクされる前に|mergeオプションを確認しましたが、 8.2.5では、これを機能させることができませんでした。

theme_preprocess_fieldを実装して、レンダリングする前に属性にクラスを提供することもできますが、想像できるように、これらがたくさんある場合は、多少の作業になります。

5
Kevin

1つのフィールドのみを上書きします

このQには詳細な回答があります： 特定のフィールド のviews-view-field.html.twigをオーバーライドします。

views-view-field--fieldname.html.twig。使用する core/modules/views/templates/views-view-field.html.twigをベーステンプレートとして使用します。また、使用できる変数に関する情報も含まれています。

view: The view that the field belongs to.
field: The field handler that can process the input.
row: The raw result of the database query that generated this field.
output: The processed output that will normally be used.

すべてのリンクを上書きします

使用する field--node--field-link.html.twigこれは this source から取得できます。使用できる変数に関するすべての情報が含まれています。

覚えておく

もちろん、新しいテンプレートを作成した後、またはテンプレートに変更を加えた後は、必ずキャッシュをクリアしてください。

4
Wim Mostrey

テンプレートでこれを達成できるようにする必要があります

これはDrupalコアに依存する必要があります。ユーザーが追加のモジュールをインストールすることは期待できません。

これらの制約に基づいて：

オプションA

作成views-view-field--field-name.html.twig

内部プット<div class="btn">{{ output -}}</div>

次に、CSSファイル.btn a { .... };

しかし、私は本当に<a>タグ内にクラスを配置する必要があります... Ok次に、

オプションB

内部mytheme.theme

use Drupal\Core\Url;
use Drupal\Core\Link;

function mytheme_preprocess_views_view_field(&$variables) {

  // check if it's the title field and also if "Link to the Content" (from the Views UI) is checked marked. 

  if ($variables['field']->options['field'] == 'title' && $variables['field']->options['settings']['link_to_entity'] == TRUE){

    // kint($variables['field']); <-- if you need to use kint

    $og_link = $variables['field']->original_value;

    // make this into XML so we can grab the href value

    $xml_link = new SimpleXMLElement($og_link);

    global $base_url;

    // problem is that $base_url contains the /drupal folder path (http://example.com/drupal) in url 
    // also the xml_link has it too (/drupal/node/5).
    // Since we only need of them to have it 
    // lets grab some parts of the $base_url by parsing it.

    $complete_url = parse_url($base_url);

    $complete_url = $complete_url['scheme'] . '://www.' . $complete_url['Host'] . $xml_link['href'];

    // Now create a brand new link

    $url = Url::fromUri($complete_url);
    $link_options = array(
      'attributes' => array(
        'class' => array(
          'btn',
        ),
      ),
    );
    $url->setOptions($link_options);
    // $xml_link = the title between the <a>title</a> tags
    $link = Link::fromTextAndUrl(t((string)$xml_link), $url )->toString();

    // re-writes, sets the output to our link.
    $variables['output'] = $link;
  } 

}

基本的に、タイトルのURLとタイトルテキストを取得します。次に、これらの値を使用して新しいリンク（Drupal way））を作成し、クラスbtnをリンクに追加して、フィールド出力を新しく作成したリンクに設定します。

結果

enter image description here

3
No Sssweat

この方法で同じ結果を達成しました。カスタムテンプレートやコードを使用して何もせず、結果を書き換えるだけです。

enter image description here

ノードではなくコマース製品向けですが、あらゆるエンティティで動作すると思います。ほとんどの場合、コーディングや新しいテンプレートを必要とせずに、最も簡単なはずです。

2
Francesco