Добавить класс в поле содержимого (ссылка)

Я хочу добавить класс к <a>тегу поля, которое состоит из ссылки и текста. (Это поле типа Link .) Имя поля - content.field_c_button_link.

В файл шаблона я хочу добавить что-то вроде следующего.

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

Как правильно добавить класс?

Согласно ответу Патрика Шеффера, я посмотрел настройки поля, в котором я могу добавить дополнительные классы 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 - модуль класса Link предоставляет новую форму виджета для поля типа Link. Этот виджет позволяет редактору добавлять класс к полям Link, привязанным к их содержимому.

2. Атрибуты ссылок - Виджет атрибутов ссылок предоставляет дополнительный виджет для поля ссылок, найденного в ядре Drupal. Виджет позволяет пользователям устанавливать атрибуты на их ссылку.

Кроме того, модуль изменяет поле ссылки на содержимое ссылки меню по умолчанию, чтобы использовать этот виджет, позволяя ссылкам меню иметь атрибуты.

id, класс, имя, цель, rel, accesskey

После того, как любой из этих двух вариантов включен, мы можем установить настройки виджета для поля «Ссылка» в разделе «Управление отображением формы» для конкретного поля ссылки.

Смотрите прикрепленное изображение для справки.

Как только это установлено, введите каждый класс, разделенный пробелом в поле, которое появляется во время создания контента.

Если вы редактируете это поле ссылки в своем типе контента (admin / structure / types / manage / your_contenttype / fields / field_c_button_link), есть поле Extra CSS-classes .

Однако введенные здесь классы применяются ко всем ссылкам, созданным с помощью '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';   
  } 
}

Я не проверял это, поэтому я думаю, что вам нужно внести некоторые коррективы, чтобы сделать эту работу.

Чтобы добавить ответ Тони Фислера выше, в Drupal 8.1.2 мне нужно было проверить #field_name вместо 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, например, модуль класса ссылок не будет работать.

Вы можете использовать класс Link 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'];
}

Кажется, что каждая тема должна включать в себя, чтобы сделать стиль проще.

Все остальные решения добавляют классы в оболочку полей. Этот добавляет класс к <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'));
}