it-swarm.com.de

Klasse zum Ansichtsfeld "Link zum Inhalt" hinzufügen

Ich verwende Drupal 8 und erstelle ein view. Ich habe ein Feld, das zufällig ein title Feld ist, und ich habe es auf link to content gesetzt Ich möchte wissen, wie ich einfach eine btn -Klasse zum anchor -Tag hinzufügen kann. Im Moment sieht die Ausgabe folgendermaßen aus:

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

Ich weiß, dass ich die Ansichtsfunktion Rewrite Results verwenden kann, um dies zu erreichen. Ich benötige jedoch mehr Leistung, da ich ein Thema für einen Client erstelle. Das Thema muss allgemeiner sein, daher muss ich dies in einer Vorlage erreichen können. Gibt es einen Vorlagenvorschlag/-haken, mit dem ich dies in einer Vorlage wie .../templates/views-view-field--link.html.twig überschreiben kann? Oder gibt es eine Themenfunktion, mit der ich das Markup überschreiben kann, indem ich die gewünschte Klasse hinzufüge?

Ich habe überlegt, die Vorlage views-view-field.html.twig zu verwenden und den Typ node_view zu überschreiben, um dies zu erreichen, bin mir jedoch nicht sicher, wie dies zu tun ist, während der benutzerdefinierte Text beibehalten wird, den ein Benutzer verwenden könnte, da es wirklich schwierig ist, das field zu debuggen Optionen.

Bearbeiten

Ich habe vergessen zu erwähnen, dass dies auf Drupal core angewiesen sein muss. Ich kann nicht erwarten, dass der Benutzer zusätzliche Module installiert, damit es funktioniert.

5
Pzanno

Zusammen mit dem Vorschlag von Wims würde ich (wie üblich) vorschlagen, Felder in Ansichten zu umgehen und den Ansichtsmodus der betreffenden Entität zu rendern. Normalerweise ist dies in den meisten Fällen ausreichend, wenn es sich um eine präsentationsbasierte Ansicht und nicht um eine Ansicht im Berichtsstil handelt (wobei Datensätze im Tabellenformat vorliegen und Felder als Zellendaten dienen).

Geben Sie dann die Vorlage twig für Ansichtsmodi, in denen der Titel verknüpft ist, und Sie können dort die Klasse (n) hinzufügen. Wenn Sie diesen Ansichtsmodus jetzt zum Rendern in Ansichten verwenden, wird er verwendet eine Vorlage und ist konsistent, und Ansichten, die auf Rendering-Entitäten basieren, werden einfacher zu warten und schneller einzurichten.

Hier ist ein Artikel, der den Unterschied und den Nutzen erklärt: https://www.amazeelabs.com/en/blog/views-field-rewriting-to-views-modes

Das heißt, nein, Links selbst haben keine twig -Datei (wo Sie das Anker-Tag-Markup sehen würden). Ich habe die Option |merge Vor dem Wim gesehen, mit dem Wim verlinkt ist. obwohl es mir nicht gelungen ist, das in 8.2.5 zum Laufen zu bringen.

Sie können auch theme_preprocess_field Implementieren und die Klasse den Attributen zuordnen, bevor sie gerendert wird. Wie Sie sich vorstellen können, ist dies jedoch eine Arbeit, wenn Sie viele davon haben.

5
Kevin

Nur ein Feld überschreiben

In diesem F gibt es eine detaillierte Antwort: Überschreiben von views-view-field.html.twig für bestimmte Felder .

Sie können einfach views-view-field--fieldname.html.twig Verwenden. Verwenden Sie core/modules/views/templates/views-view-field.html.twig Als Basisvorlage. Es enthält auch Informationen darüber, welche Variablen Sie verwenden können:

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.

Alle Links überschreiben

Verwenden Sie field--node--field-link.html.twig, Das Sie von dieser Quelle erhalten können. Es enthält alle Informationen zu Variablen, die Sie verwenden können.

Denken Sie daran

Vergessen Sie natürlich nicht, Ihren Cache zu leeren, nachdem Sie die neue Vorlage erstellt oder Änderungen daran vorgenommen haben.

4
Wim Mostrey

Ich muss dies in einer Vorlage erreichen können

Dies muss auf Drupal Core) beruhen. Ich kann nicht erwarten, dass der Benutzer zusätzliche Module installiert

Basierend auf diesen Einschränkungen:

OPTION A

create views-view-field - field-name.html.twig

Inside put <div class="btn">{{ output -}}</div>

Dann in Ihrer CSS-Datei .btn a { .... };


Aber ich muss die Klasse wirklich im <a> - Tag haben ... Ok dann:

OPTION B

Inside 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;
  } 

}

Grundsätzlich greifen wir auf die URL des Titels und den Titeltext zu. Dann erstellen wir einen brandneuen Link (auf die Weise Drupal)) mit diesen Werten und fügen die Klasse btn zu unserem Link hinzu und setzen die Feldausgabe auf unseren neu erstellten Link.

Ergebnis

(enter image description here

3
No Sssweat

Ich habe auf diese Weise das gleiche Ergebnis erzielt, ohne etwas mit benutzerdefinierten Vorlagen oder Code zu tun, sondern nur mit dem Umschreiben des Ergebnisses:

(enter image description here

Es ist für ein Commerce-Produkt anstelle von Node, aber ich denke, dass es mit jeder Entität funktioniert. Ich denke, dass es in den meisten Fällen am einfachsten und ohne Codierung und neue Vorlagen sein sollte.

2
Francesco