web-dev-qa-db-fra.com

Ajouter une classe au champ de vue "lier au contenu"

J'utilise Drupal 8 et je crée un view. J'ai un champ, qui se trouve être un champ title, et je l'ai défini sur link to content. Je voudrais savoir comment ajouter simplement une classe btn à la balise anchor. À l'heure actuelle, la sortie ressemble à ceci:

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

Je sais que je peux utiliser le Rewrite Results fonction d'affichage pour accomplir cela, cependant, j'ai besoin de plus de puissance que cela parce que je crée un thème pour un client. Le thème doit être plus générique, je dois donc être en mesure d'accomplir cela dans un modèle. Y a-t-il une suggestion de modèle/crochet qui me permettrait de remplacer cela dans un modèle tel que .../templates/views-view-field--link.html.twig? Ou existe-t-il une fonction de thème que je pourrais utiliser pour remplacer le balisage en ajoutant la classe que je voudrais?

J'ai envisagé d'utiliser le views-view-field.html.twig modèle et remplaçant le node_view tapez pour accomplir cela, mais je ne sais pas comment faire tout en conservant le texte personnalisé qu'un utilisateur pourrait utiliser car il est vraiment difficile de déboguer les options field.

Éditer

J'ai oublié de mentionner, cela doit s'appuyer sur Drupal core. Je ne peux pas m'attendre à ce que l'utilisateur installe des modules supplémentaires pour que cela fonctionne.

views8hookstheming
5
Pzanno

Parallèlement à la suggestion de Wims, je suggère (comme je le fais habituellement) de contourner les champs dans les vues et de rendre le mode d'affichage de l'entité en question. Habituellement, cela est suffisant dans la plupart des cas s'il s'agit d'une vue basée sur une présentation et non d'une vue de style "rapport" (où les enregistrements sont au format tableau et les champs servent de données de cellule).

Ensuite, fournissez le modèle twig pour les modes d'affichage, où le titre est lié, et vous pouvez y ajouter la ou les classes. Maintenant, lorsque vous utilisez ce mode d'affichage pour effectuer le rendu dans les vues, il utilise un modèle et est cohérent, et les vues qui reposent sur des entités de rendu deviennent plus faciles à entretenir et plus rapides à configurer.

Voici un article qui explique la différence et l'avantage: https://www.amazeelabs.com/en/blog/views-field-rewriting-to-views-modes

Cela dit, non, les liens eux-mêmes n'ont pas de fichier twig (où vous verriez le balisage de la balise d'ancrage). J'ai vu le |merge option avant que Wim ne soit lié à, même si je n'ai pas réussi à faire fonctionner cela en 8.2.5.

Vous pouvez également implémenter theme_preprocess_field et fournissez la classe aux attributs avant qu'elle ne soit rendue, mais comme vous pouvez l'imaginer, si vous en avez beaucoup, ce sera un peu de travail.

5
Kevin

Remplacez un seul champ

Il y a une réponse détaillée dans ce Q: remplacement des vues-vue-champ.html.twig pour des champs spécifiques .

Vous pouvez simplement utiliser views-view-field--fieldname.html.twig. Utilisation core/modules/views/templates/views-view-field.html.twig comme modèle de base. Il contient également des informations sur les variables que vous pouvez utiliser:

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.

Remplacer tous les liens

Utilisation field--node--field-link.html.twig que vous pouvez obtenir de cette source . Il contient toutes les informations sur les variables que vous pouvez utiliser.

N'oubliez pas

Bien sûr, n'oubliez pas de vider votre cache après avoir créé le nouveau modèle ou y avoir apporté des modifications.

4
Wim Mostrey

J'ai besoin de pouvoir accomplir cela dans un modèle

Cela doit s'appuyer sur Drupal core. Je ne peux pas m'attendre à ce que l'utilisateur installe des modules supplémentaires

Sur la base de ces contraintes:

OPTION A

créer views-view-field - field-name.html.twig

Intérieur mis <div class="btn">{{ output -}}</div>

Puis dans votre fichier CSS .btn a { .... };

Mais j'ai vraiment besoin d'avoir la classe à l'intérieur du <a> tag ... Ok alors:

OPTION B

À l'intérieur 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;
  } 

}

Fondamentalement, nous prenons l'url du titre et le texte du titre. Ensuite, nous créons un tout nouveau lien (la Drupal) en utilisant ces valeurs et ajoutons la classe btn à notre lien et définissons la sortie de champ sur notre lien nouvellement créé.

Résultat

enter image description here

3
No Sssweat

J'ai obtenu le même résultat de cette façon, sans rien faire avec des modèles personnalisés ou du code, seulement avec la réécriture du résultat:

enter image description here

C'est pour un produit de commerce au lieu d'un nœud, mais je pense que cela fonctionne avec chaque entité. Je pense que dans la plupart des cas, cela devrait être plus facile et sans avoir besoin de codage et de nouveaux modèles.

2
Francesco