Как мне оформить ссылку с помощью twig для определенного типа контента?


Я пытаюсь создать пользовательский файл-link.html.twig для определенного типа контента. Я посмотрел на https://www.drupal.org/node/2354645 , который не связывает ветки темы плагина, такие как ссылка на файл, но все равно пытался file-link--<CONTENTYPE>.html.twig. Это не работает.

Ни одна из переданных переменных не включает узел или тип контента. Есть идеи, как действовать дальше?

 4
Author: kiamlaluno, 2016-05-28

3 answers

Для этого вам нужно будет сделать ряд вещей.

  1. Включить отладку веток
  2. Создайте функцию предварительной обработки предложений по теме крючка
  3. Получите объект узла в вашей теме.
  4. Создайте предложение по теме, чтобы получить имя шаблона с типом узла в нем.

Как только у вас включена отладка Twig, вы можете проверить ссылку на файл. По умолчанию для file_link я вижу:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'file_link' -->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/field/file-link.html.twig' -->

В моем случае я использую Стильный в качестве базовой темы для моей подтемы, таким образом, классный путь выше. но чего здесь не хватает, так это любых полезных предложений по тематическому крючку из коробки. Затем мы исправим это.

Поскольку нам дано имя крючка темы выше, я могу создать предложение крючка темы на основе этого и путем получения типа узла и включения его в предложение крючка темы. (см. функция hook_theme_suggestions_HOOK_alter для функций)

Тогда моя тема будет изменена следующим образом:

  function MYTHEME_theme_suggestions_file_link_alter(&$suggestions, $vars, $hook) {

  // Get the node type.
  $node = \Drupal::routeMatch()->getParameter('node');
  $type = $node->getType();

  // Create the theme hook suggestion. 
  $suggestions[] = 'file__link__' . 'type_' . $type;

}

Как только я сделаю это и drush cr, я увижу свое новое предложение по шаблону темы как таковое:

<!-- THEME DEBUG -->
    <!-- THEME HOOK: 'file_link' -->
<!-- FILE NAME SUGGESTIONS:
   * file--link--type-news.html.twig
   x file-link.html.twig
-->

В моем случае мой тип узла - "Новости", и вы можете видеть это в названии предложения шаблона:

file--link--type-news.html.twig

Теперь вы можете создать этот файл и тему прямо сейчас! Для получения более подробной информации об этом я только что написал сообщение в блоге об этом: Учебное пособие по тематике Drupal 8: Как создавать пользовательские предложения и шаблоны тематических крючков

 7
Author: Danny Englander, 2016-05-29 04:18:51

У вас есть отличный ответ от @Danny-Englander, как получить предложение по теме для twig. Но я думаю, что вопрос слишком узкий, он должен быть шире, без веточки:

Как создать ссылку на файл для определенного типа контента?

Для этого поместите класс с типом содержимого в тег <article> в ветке узла и класс для ссылки на файл в ветке file_link. Затем используйте css, чтобы выбрать все ссылки на файлы внутри этого тега статьи. Вы можете использовать те же селекторы для язык JavaScript.

Если вы используете стильную тему, вы уже должны были установить классы.

Причина этого в том, что узел может отображаться по-разному. Например, в качестве ссылки на сущность или внутри представления. Тогда вы получите неправильный маршрут или вообще не получите никакого маршрута. Используя тег статьи, вы можете справиться с этой гибкостью. У вас может быть несколько узлов на одной странице, и все они могут иметь разные типы контента.

 1
Author: 4k4, 2016-05-29 10:08:18

Я нашел решение, которое сработало в этой ситуации, и поэтому публикую его для дальнейшего использования.

Я добавил это в наш пользовательский модуль:

/**
 * Implements hook_template_preprocess_default_variables_alter().
 */
function MYMODULE_template_preprocess_default_variables_alter(&$variables) {

  /** @var Node $node */
  $node = Drupal::routeMatch()->getParameter('node');
  if ($node) {
    $variables['nid'] = $node->id();
    $variables['node_type'] = $node->getType();
  }

}

Затем взял копию file-link.html.twig в нашу пользовательскую тему и добавил:

{% if (node_type == 'CONTENTTYPE') %}
    <a class="filelink" href="{{ link.url }}" title="{{ description }}">
        <img src="/const8/img/icon-pdf-128.png" alt="Download PDF" title="" class="img-responsive" style="float:right;">Download PDF
        <span class="visible-xs-inline-block">({{ file_size }})</span></a>
{% else %}
  {# All other content types.... #}
 1
Author: Nic, 2016-05-30 08:49:15