Thêm lớp vào trường nội dung (liên kết)

Tôi muốn thêm một lớp vào <a>thẻ của một trường bao gồm một liên kết và văn bản. (Đây là một trường thuộc loại Liên kết .) Tên của trường là content.field_c_button_link.

Trong tệp mẫu, tôi muốn thêm một cái gì đó như sau.

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

Làm thế nào tôi có thể thêm một lớp đúng?

Theo câu trả lời của Patrick Scheffer, tôi đã xem các cài đặt cho một trường nơi tôi có thể thêm các lớp CSS bổ sung, nhưng tôi không thể tìm thấy bất kỳ. Đây là một ảnh chụp màn hình về những gì tôi có thể chỉnh sửa trong trường liên kết.

Đây là một giải pháp tôi đã tìm thấy, nhưng nó không thực sự tiện dụng để sử dụng ... Tôi thực sự muốn một giải pháp tốt hơn, giống như một cái gì đó trực tiếp từ các mẫu twig.

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

Cách dễ nhất để đạt được điều này sẽ là sử dụng một trong hai mô-đun này.

1. Lớp liên kết - Mô-đun lớp liên kết cung cấp một biểu mẫu tiện ích mới cho liên kết loại trường. Tiện ích này cho phép trình soạn thảo thêm lớp vào các trường Liên kết với nội dung của chúng.

2. Thuộc tính liên kết - Tiện ích thuộc tính liên kết cung cấp một tiện ích bổ sung cho trường liên kết được tìm thấy trong lõi Drupal. Các widget cho phép người dùng thiết lập các thuộc tính trên liên kết của họ.

Ngoài ra, mô-đun thay đổi trường liên kết nội dung liên kết menu mặc định để sử dụng tiện ích này, cho phép các liên kết menu cũng có thuộc tính

id, lớp, tên, đích, rel, accesskey

Khi một trong hai được bật, chúng tôi có thể đặt cài đặt tiện ích cho trường "Liên kết" trong "Quản lý hiển thị biểu mẫu" cho trường liên kết cụ thể.

Xem hình ảnh đính kèm để tham khảo.

Khi mục này được đặt, hãy nhập từng lớp được phân tách bằng khoảng trắng trong trường xuất hiện tại thời điểm tạo nội dung.

Nếu bạn chỉnh sửa trường liên kết đó trong loại nội dung của mình (quản trị / cấu trúc / loại / Manage / your_contenttype / field / field_c_button_link), sẽ có một lớp CSS bổ sung .

Tuy nhiên, các lớp được nhập ở đây áp dụng cho tất cả các liên kết được tạo bằng 'field_c_buton_link'. Nếu bạn muốn thêm một lớp trên một vị trí cụ thể, bạn có thể xem hook_pre process_field] hoặc thậm chí theme_link.

Biên tập:

Trong Drupal 8 cũng có theme_pre process_field . Vì vậy, tôi nghĩ rằng bạn có thể làm một cái gì đó như thế này:

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

Tôi chưa thử nghiệm điều này vì vậy tôi nghĩ bạn cần thực hiện một số điều chỉnh để thực hiện công việc này.

Để thêm vào câu trả lời của Tony Fisler ở trên, trong Drupal 8.1.2 tôi cần kiểm tra #field_name thay vì tên để thêm một lớp. Đây là những gì làm việc cho tôi.

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

Đây là nếu bạn muốn lớp trên <a>thẻ. Giải pháp lớp liên kết được cung cấp dễ dàng hơn, nhưng khi tôi thử nó chỉ áp dụng cho lớp cho trình bao bọc của a. Vì vậy, nếu bạn đang sử dụng Bootstrap chẳng hạn, mô-đun lớp liên kết sẽ không hoạt động.

Bạn có thể sử dụng lớp Project Link cho phép thêm các lớp trên trường Liên kết. Bạn nên đặt widget thành "Liên kết với lớp". Xem ảnh chụp màn hình.

Để thực hiện điều này trong twig bằng cách sử dụng mẫu trường (tức là field--field-c-button-link.html.twig)

Thông thường, mẫu trường sẽ lặp qua (các) liên kết của bạn bằng cách sử dụng:

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

Nhưng bạn có thể thay đổi điều đó thành một cái gì đó như thế này:

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

bằng cách xử lý riêng tiêu đề liên kết và url.

Thật dễ dàng để tạo trình định dạng của riêng bạn ghi đè lên trình định dạng liên kết. Mặc dù, bây giờ tôi thấy có một mô-đun cho ( Liên kết ) này, bạn có thể muốn sử dụng mô-đun đó, vì bạn có thể đặt nó ở cấp trường, thay vì cài đặt trong bộ định dạng. Nhưng tôi nghĩ rằng điều này có thể hữu ích cho ai đó, những người muốn xây dựng trình định dạng của riêng họ cho một liên kết nơi bạn có thể thêm một lớp.

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

}

Tôi vẫn đang kiểm tra xem có bất kỳ lỗi nào không, nhưng đặt nó vào tệp .theme của bạn sẽ thêm tên của trường dưới dạng một lớp cho tất cả các trường. Đây là cho Drupal 8.2:

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

Có vẻ như một cái gì đó mọi chủ đề nên bao gồm để làm cho kiểu dáng dễ dàng hơn.

Tất cả các giải pháp khác thêm các lớp vào trình bao bọc trường. Cái này thêm một lớp vào <a>chính thẻ:

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

Đây là giải pháp đơn giản -

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