Drupal 8 - 向链接添加类答案

【问题标题】：Drupal 8 - Adding classes to linksDrupal 8 - 向链接添加类
【发布时间】：2017-01-22 20:05:40
【问题描述】：

我是 Drupal 的新手，我非常喜欢它。我正在自学，但我现在遇到了一个问题。

我创建了一个显示标题和链接列表的自定义块。因此，该块中的唯一字段是链接类型。这是我的页脚区域的一个块。因此，当用户点击时，它会在新标签页中打开一个新网站。

我想改变这个块类型的 html 输出，所以我拿出了这个主题建议： field--block-content--field-links--footer-links.html.twig

我的问题是如何为每个<a>tag 添加一个类？

我尝试使用模块“链接类”。它工作马车。它只在安装模块之前读取 css 中已经存在的类。它不会读取安装模块后创建的新类。我尝试了不同的东西，多次清除缓存但很奇怪。必须有更好的方法来添加没有模块的类。

谁能帮助我并向我展示将类添加到我的<a> 标签的最佳方法？

谢谢你:)

这是默认模板

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes }}>
      {% for item in items %}
        <div{{ item.attributes }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
     {{ item.content }}   -------------> add class here
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes }}>
    <div{{ title_attributes }}>{{ label }}</div>
    {% if multiple %}
      <div>
    {% endif %}
    {% for item in items %}
      <div{{ item.attributes }}>{{ item.content }}</div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}

【问题讨论】：

标签： drupal-8

【解决方案1】：

这取决于您如何构建自定义块。但是就像你说的那样，创建一个新模板只是为了添加一些类有点过头了。

所以这里有一些关于如何创建链接以及如何向链接添加属性（如类）的好答案： https://drupal.stackexchange.com/questions/144992/how-do-i-create-a-link

对于不同的情况，答案略有不同，因此请自行寻找最适合您情况的答案。

【讨论】：

【解决方案2】：

将 {{ item.content }} 替换为硬编码链接：

<a href="{{ item.content['#url']|render }}" {% if item.content['#options']['external'] %} target="_blank" {% endif %} class="some class here">{{ item.content['#title'] }}</a>

或者如果你愿意，你可以合并类选项：

{{ item.content|merge({'#options': {'attributes': {'class': ['some', 'class', 'here']}}}) }}

【讨论】：

如何防止内容|合并影响现有属性？在我的例子中，它删除了 title 属性。锚部分也从 URL 中删除了

【解决方案3】：

我也无法在 Drupal 8 中扩展链接。菜单链接，评论表单链接，Drupal 想要呈现系统链接值的任何时候。

我的尝试通常是这样的： 1.尝试在使用字段时在视图中添加类，用树枝覆盖。

如果不可能，请检查主题挂钩，通过属性添加类。（Chrome Drupal Template Helper 扩展有帮助。）我能够向父 UL 添加一个类，但不是 A。
检查 twig 模板中的键并显式使用 {{ var.name[#url] }} 进行渲染。（Bootstrap Drupal 主题在他们的 menu.html.twig 中执行此操作！）示例：
```
 a href="{{ item.url }}" class="dropdown-toggle" data-target="#" data-toggle="dropdown">{{ item.title }} 
```
如果这 3 次尝试失败...我通过 Javascript 添加属性。

jQuery('.comment-forbidden').parent().addClass('list-unstyled');

我尝试在 node.html.twig 中向节点链接（登录或注册以发布 cmets）添加类，并提示错误：

$variables['content']['links']['#attributes']['class'][] = 'list-unstyled';

指定#lazy_builder 回调时，不能存在任何属性；所有属性都必须由 #lazy_builder 回调生成。您指定了以下属性：#attributes。在 Drupal\Core\Render\Renderer->doRender()

【讨论】：

【解决方案4】：

对于那些喜欢使用 php 构建 html 渲染元素的人。一个非常典型的链接：

  $elements[$delta] = [
    '#type'      => 'link',
    '#title'     => $value,
    '#url'       => Url::fromUri('mailto:' . $value),
    '#attributes' => [
      'class' => ['myClass']
    ]
  ];

【讨论】：