เพิ่มคลาสในฟิลด์เนื้อหา (ลิงก์)

ฉันต้องการเพิ่มคลาสให้กับ<a>แท็กของเขตข้อมูลที่ประกอบด้วยลิงค์และข้อความ (เป็นฟิลด์ประเภทLink ) ชื่อของฟิลด์คือ content.field_c_button_link

ในไฟล์เทมเพลตฉันต้องการเพิ่มสิ่งต่อไปนี้

{{ content.field_c_button_link.0.addClass('button blue') }}

ฉันจะเพิ่มชั้นเรียนได้อย่างไร

ตามคำตอบของ Patrick Scheffer ฉันดูการตั้งค่าสำหรับเขตข้อมูลที่ฉันสามารถเพิ่มคลาส CSS พิเศษ แต่ฉันไม่พบใด ๆ นี่คือภาพหน้าจอของสิ่งที่ฉันสามารถแก้ไขได้ในฟิลด์ลิงค์

นี่เป็นวิธีการแก้ปัญหาที่ฉันพบ แต่มันไม่สะดวกในการใช้ ... ฉันต้องการทางออกที่ดีกว่าเช่นบางสิ่งโดยตรงจากแม่แบบกิ่งไม้

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'button';
  }
}

วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือการใช้สองโมดูลนี้

1. Link Class - โมดูลคลาสลิงก์ให้รูปแบบวิดเจ็ตใหม่สำหรับประเภทฟิลด์ลิงค์ วิดเจ็ตนี้อนุญาตให้ผู้แก้ไขเพิ่มคลาสลงในฟิลด์เชื่อมโยงกับเนื้อหา

2. คุณสมบัติการเชื่อมโยง - วิดเจ็ตการเชื่อมโยงให้เครื่องมือเพิ่มเติมสำหรับฟิลด์ลิงค์ที่พบใน Drupal core วิดเจ็ตช่วยให้ผู้ใช้สามารถตั้งค่าคุณลักษณะในลิงค์

นอกจากนี้โมดูลจะเปลี่ยนแปลงฟิลด์ลิงก์ลิงก์เนื้อหาเมนูเริ่มต้นเพื่อใช้วิดเจ็ตนี้ซึ่งอนุญาตให้ลิงก์เมนูมีแอตทริบิวต์ด้วย

ID, คลาส, ชื่อ, เป้าหมาย, rel, accesskey

เมื่อเปิดใช้งานทั้งสองอย่างเราสามารถตั้งค่าวิดเจ็ตสำหรับฟิลด์ "ลิงก์" ภายใต้ "จัดการการแสดงแบบฟอร์ม" สำหรับฟิลด์ลิงค์เฉพาะ

ดูภาพที่แนบมาสำหรับการอ้างอิง

เมื่อมีการตั้งค่านี้ให้ป้อนแต่ละคลาสที่คั่นด้วยช่องว่างในฟิลด์ที่ปรากฏในเวลาที่สร้างเนื้อหา

หากคุณแก้ไขข้อมูลที่เชื่อมโยงในประเภทเนื้อหาของคุณ (ผู้ดูแลระบบ / โครงสร้าง / ประเภท / จัดการ / your_contenttype / สาขา / field_c_button_link) มีข้อมูลเสริม CSS

อย่างไรก็ตามคลาสที่ป้อนที่นี่จะมีผลกับลิงก์ทั้งหมดที่สร้างด้วย 'field_c_buton_link' หากคุณต้องการเพิ่มคลาสในตำแหน่งหนึ่งคุณอาจลองดูที่ hook_preprocess_field] หรือแม้กระทั่ง theme_link

แก้ไข:

ใน Drupal 8 นอกจากนี้ยังมีtheme_preprocess_field ดังนั้นฉันคิดว่าคุณสามารถทำสิ่งนี้:

function template_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#name'] == 'field_c_button_link') {
    $variables['attributes']['class'][] = 'button';
    $variables['attributes']['class'][] = 'blue';   
  } 
}

ฉันยังไม่ได้ทดสอบสิ่งนี้ดังนั้นฉันคิดว่าคุณต้องทำการปรับเปลี่ยนบางอย่างเพื่อให้สามารถใช้งานได้

ในการเพิ่มคำตอบของ Tony Fisler ด้านบนใน Drupal 8.1.2 ฉันต้องตรวจสอบ#field_nameแทนชื่อเพื่อเพิ่มคลาส นี่คือสิ่งที่ได้ผลสำหรับฉัน

function yourthemename_preprocess_field(&$variables, $hook) {
  $element = $variables['element'];
  if ($element['#field_name'] == 'field_link') {
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'blarg';
  }
}

นี่คือถ้าคุณต้องการชั้นเรียนบน<a>แท็ก โซลูชันการเชื่อมโยงระดับที่นำเสนอนั้นง่ายขึ้น แต่เมื่อฉันพยายามจะนำไปใช้กับคลาสกับเสื้อคลุมของ a เท่านั้น ดังนั้นหากคุณใช้ Bootstrap เช่นโมดูลลิงก์ระดับจะไม่ทำงาน

คุณสามารถใช้คลาส Project Linkซึ่งอนุญาตให้เพิ่มคลาสบนฟิลด์ลิงก์ คุณควรตั้งค่าวิดเจ็ตเป็น "เชื่อมโยงกับคลาส" ดูภาพหน้าจอ

การทำเช่นนี้ในกิ่งไม้โดยใช้แม่แบบฟิลด์ (เช่นfield--field-c-button-link.html.twig)

โดยปกติเทมเพลตฟิลด์จะวนซ้ำลิงก์ของคุณโดยใช้:

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

แต่คุณสามารถเปลี่ยนสิ่งนั้นเป็นแบบนี้:

  {% for item in items %}
    <a class="btn btn-secondary btn-lg m-1" href="{{ item.content['#url'] }}">{{ item.content['#title']}}</a>
  {% endfor %}

โดยจัดการกับชื่อลิงค์และ url แยกต่างหาก

มันง่ายที่จะสร้างตัวจัดรูปแบบของคุณเองที่แทนที่ตัวจัดรูปแบบลิงก์ แม้ว่าตอนนี้ฉันจะเห็นว่ามีโมดูลสำหรับ ( ลิงก์ ) นี้คุณอาจต้องการใช้โมดูลดังกล่าวเนื่องจากคุณสามารถตั้งค่าที่ระดับฟิลด์แทนที่จะตั้งค่าในตัวจัดรูปแบบ แต่ฉันคิดว่าสิ่งนี้อาจเป็นประโยชน์กับใครบางคนที่ต้องการสร้างตัวจัดรูปแบบของตนเองสำหรับลิงก์ที่คุณสามารถเพิ่มคลาสได้

namespace Drupal\mymodule\Plugin\Field\FieldFormatter;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
use Drupal\link\LinkItemInterface;
use Drupal\link\Plugin\Field\FieldFormatter\LinkFormatter;

/**
 * Plugin implementation of the 'link' formatter.
 *
 * @FieldFormatter(
 *   id = "link_with_class",
 *   label = @Translation("Link with Custom Class"),
 *   field_types = {
 *     "link"
 *   }
 * )
 */
class LinkClassFormatter extends LinkFormatter {

  /**
   * {@inheritdoc}
   */
  public static function defaultSettings() {
    return parent::defaultSettings() +
    ['class' => ''];

  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $elements = parent::settingsForm($form, $form_state);

    $elements['class'] = array(
      '#type' => 'textfield',
      '#title' => t('Class on Link'),
      '#default_value' => $this->getSetting('class'),
    );

    return $elements;
  }

  /**
   * {@inheritdoc}
   */
  public function settingsSummary() {

    $summary = parent::settingsSummary();

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $summary[] = t('Class(es) on button = "@classes"', array('@classes' => $settings['class']));
    }

    return $summary;
  }

  /**
   * {@inheritdoc}
   */
  protected function buildUrl(LinkItemInterface $item) {
    $url = parent::buildUrl($item);

    $settings = $this->getSettings();

    if (!empty($settings['class'])) {
      $options = $url->getOptions();
      $options['attributes']['class'] = $settings['class'];
      $url->setOptions($options);
    }

    return $url;
  }

}

ฉันยังคงทดสอบข้อบกพร่องใด ๆ แต่การวางไว้ในไฟล์. theme ของคุณจะเพิ่มชื่อของฟิลด์เป็นคลาสสำหรับฟิลด์ทั้งหมด นี่สำหรับ Drupal 8.2:

function mytheme_preprocess_field(&$variables, $hook) {
  $variables['attributes']['class'][] = $variables['element']['#field_name'];
}

ดูเหมือนว่าบางสิ่งบางอย่างในทุกรูปแบบควรรวมไว้เพื่อทำให้การออกแบบง่ายขึ้น

โซลูชันอื่นทั้งหมดเพิ่มคลาสลงในฟิลด์ wrapper อันนี้เพิ่มคลาสให้กับ<a>แท็กตัวเอง:

/*
 * Implements hook_preprocess__HOOK().
 */
function hook_preprocess_field(&$variables) {
  $classes = [
    'button',
    'blue'
  ];
  $variables['items'][0]['content']['#url']->setOption('attributes', ['class' => $classes]);
}

นี่คือทางออกที่ง่าย -

function THEME_preprocess_file_link(&$variables)
{
  $variables['attributes']->addClass(array('your_custom_class'));
}