当前位置: 首页>>WEB开发>>正文


将类添加到内容字段(链接)

webfans WEB开发 , , , , 去评论

问题描述

我想在包含链接和文本的字段的<a>标记中添加一个类。 (这是Link类型的字段。)字段的名称是content.field_c_button_link。

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

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

如何正确添加课程?

根据Patrick Scheffer的回答,我查看了一个字段的设置,我可以添加额外的CSS类,但我找不到任何。这是我可以在链接字段中编辑的屏幕截图。

screenshot

最佳解决方法

这是我找到的解决方案,但使用它并不是很方便…我真的想要一个更好的解决方案,比如直接来自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';
  }
}

次佳解决方法

如果您在内容类型中编辑该链接字段(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';   
  } 
}

我没有测试过这个,所以我认为你需要做一些调整才能使这个工作。

第三种解决方法

要添加到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>标记上的类,则可以使用此选项。提供的链接类解决方案更容易,但是当我尝试它时,它只应用于类的包装器。因此,如果您使用的是Bootstrap,则链接类模块将无法工作。

第四种方法

您可以使用Project Link class,它允许在Link字段上添加类。您应该将小部件设置为“与类链接”。见截图。

entities,8,theming,navigation,drupal

entities,8,theming,navigation,drupal

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2281.html,转载请务必附带本地址声明。