将课程添加到内容字段（链接）

我想将一个类添加到<a>由链接和文本组成的字段的标签中。（这是Link类型的字段。）该字段的名称为content.field_c_button_link。

在模板文件中，我想添加如下内容。

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

如何正确添加课程？

根据Patrick Scheffer的回答，我查看了一个字段的设置，可以在其中添加其他CSS类，但找不到任何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. 链接类 -链接类模块为字段类型链接提供了新的窗口小部件形式。该窗口小部件允许编辑器将类添加到链接到其内容的字段。

2. 链接属性 -链接属性窗口小部件为Drupal核心中的链接字段提供了一个附加窗口小部件。该小部件允许用户在其链接上设置属性。

此外，该模块还更改了默认菜单链接内容链接字段以使用此小部件，从而允许菜单链接也具有属性

id，类，名称，目标，rel，accesskey

启用两者之一后，我们可以为特定链接字段的“管理表单显示”下的“链接”字段设置小部件设置。

请参阅所附图像以供参考。

设置好后，在内容创建时出现的字段中输入每个类，并用空格隔开。

如果您以内容类型（admin / structure / types / manage / your_contenttype / fields / field_c_button_link）编辑该链接字段，则会有一个Extra CSS- classs字段。

但是，此处输入的类适用于所有使用“ 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而不是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。

创建覆盖链接格式化程序的自己的格式化程序很容易。虽然，现在我看到有一个用于该模块的模块（Link），但是您可以使用该模块，因为您可以在字段级别进行设置，而不是在格式化程序中进行设置。但是我认为这对于想为自己的链接建立格式的人可能有用，您可以在其中添加类。

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