İçerik alanına sınıf ekle (bağlantı)

<a>Bir bağlantı ve metin içeren bir alanın etiketine bir sınıf eklemek istiyorum . (Bu Link türünde bir alandır .) Alanın adı content.field_c_button_link.

Şablon dosyasına aşağıdaki gibi bir şey eklemek istiyorum.

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

Nasıl düzgün bir sınıf ekleyebilirim?

Patrick Scheffer'ın cevabına göre, ekstra CSS sınıfları ekleyebileceğim bir alanın ayarlarına baktım, ancak bulamadım. Bu, bağlantı alanında neleri düzenleyebileceğimin bir ekran görüntüsü.

Bu bulduğum bir çözüm, ama kullanmak gerçekten kullanışlı değil ... Gerçekten doğrudan dal şablonlarından bir şey gibi daha iyi bir çözüm istiyorum.

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

Bunu başarmanın en kolay yolu bu iki modülden birini kullanmak olacaktır.

1. Link Sınıfı - Link sınıf modülü Link alan tipi için yeni bir widget formu sağlar. Bu widget, editörün içeriklerine ekli Bağlantı alanlarına sınıf eklemesine izin verir.

2. Bağlantı Nitelikleri - Bağlantı nitelikleri widget'ı, Drupal çekirdeğinde bulunan bağlantı alanı için ek bir widget sağlar. Widget, kullanıcıların bağlantılarında nitelikleri ayarlamasına olanak tanır.

Ayrıca modül, bu widget'ı kullanmak için varsayılan menü bağlantısı içerik bağlantısı alanını değiştirerek menü bağlantılarının da niteliklere sahip olmasını sağlar

id, sınıf, ad, hedef, rel, erişim anahtarı

Bu ikisinden biri etkinleştirildikten sonra, belirli bir bağlantı alanı için "Form Görüntüsünü Yönet" altında "Bağlantı" alanı için widget ayarlarını yapabiliriz.

Referans için ekteki resme bakın.

Bu ayarlandıktan sonra, içerik oluşturma sırasında görünen alanda bir boşlukla ayrılmış her sınıfı girin.

İçerik türünüzde (admin / structure / types / manage / your_contenttype / fields / field_c_button_link) bu bağlantı alanını düzenlerseniz, Ekstra CSS sınıfları alanı vardır .

Ancak, buraya girilen sınıflar 'field_c_buton_link' ile oluşturulan tüm bağlantılar için geçerlidir. Belirli bir konuma bir sınıf eklemek istiyorsanız hook_preprocess_field] 'a ve hatta theme_link'e bakabilirsiniz.

Düzenle:

Drupal 8'de bir theme_preprocess_field de var . Bence böyle bir şey yapabilirsiniz:

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

Bunu test etmedim, bu yüzden bu işi yapmak için bazı ayarlamalar yapmanız gerektiğini düşünüyorum.

Drupal 8.1.2 I denetlemek için gerekli yukarıda Tony Fisler cevabı eklemek için #field_name yerine adıyla bir sınıf ekleyin. İşte benim işime yarayan bu.

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

Bu, <a>etiketi etikette istiyorsanız . Sunulan bağlantı sınıfı çözümü daha kolaydır, ancak denediğimde sadece a'nın sarıcısına sınıfa uygulanır. Bu nedenle, örneğin Bootstrap kullanıyorsanız, bağlantı sınıfı modülü çalışmaz.

Bağlantı alanına sınıf eklemeye izin veren Project Link sınıfını kullanabilirsiniz . Widget'ı "Sınıfla bağlantı oluştur" olarak ayarlamanız gerekir. Ekran görüntüsüne bakın.

Alan şablonunu kullanarak dalda bunu yapmak için (örn. field--field-c-button-link.html.twig)

Normalde alan şablonu aşağıdakileri kullanarak bağlantınızın / bağlantılarınızın üzerinden döner:

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

Ama bunu şu şekilde değiştirebilirsiniz:

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

bağlantı başlığı ve url ile ayrı ayrı ilgilenerek.

Bağlantı biçimlendiricisini geçersiz kılan kendi biçimlendiricinizi oluşturmak kolaydır. Her ne kadar şimdi bu ( Link ) için bir modül olduğunu gördüğüme göre, formatlayıcıda bir ayar yerine alan düzeyinde ayarlayabileceğiniz için bunu kullanmak isteyebilirsiniz. Ancak bunun, sınıf ekleyebileceğiniz bir bağlantı için kendi biçimlendiricisini oluşturmak isteyen biri için yararlı olabileceğini düşündüm.

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

}

Hala herhangi bir hata için test ediyorum, ancak bunu .theme dosyanıza yerleştirerek alanın adını tüm alanlar için bir sınıf olarak ekleyecektir. Bu Drupal 8.2 içindir:

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

Stilleri kolaylaştırmak için her temanın içermesi gereken bir şey gibi görünüyor.

Diğer tüm çözümler alan sarmalayıcısına sınıflar ekler. Bu <a>etiketin kendisine bir sınıf ekler :

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

İşte basit çözüm -

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