Drupal分页模板优化方式

zhangzhijun 61次浏览 0个评论

Drupal分类术语下的文章列表样式相对丑陋，如果需要进行样式修改的话，需要对views-mini-pager.html.twig模板进行覆写。一般的操作步骤可分为以下几个步骤：

1、确定分页显示的样式

由于我的博客样式是基于tailwind CSS的，所以我是直接复用了一些现成的组件，如果你也是tailwind CSS，可以参考这个链接https://sailboatui.com/docs/components/pagination/

2、修改theme文件

如果默认视图提供的参数不够的话，需要通过themename.theme文件增加视图中的变量，以便在twig模板中使用。比如我的分页组件需要显示含当前文章在内的5篇文章，以及调转第一页和最后一页的需要，因此我在theme文件中增加了一个beginner_preprocess_views_mini_pager函数，用于提供新增加的变量，新增函数代码如下：

function beginner_preprocess_views_mini_pager(&$variables)
{
  $pager_manager = \Drupal::service('pager.manager');
  if (empty($variables['pagination_heading_level'])) {
    $variables['pagination_heading_level'] = 'h4';
  }
  $tags = &$variables['tags'];
  $element = $variables['element'];
  $parameters = $variables['parameters'];
  $pager = $pager_manager->getPager($element);
  if (!$pager) {
    return;
  }
  $current = $pager->getCurrentPage();
  $total = $pager->getTotalPages();

  // $variables['current'] = $current + 1; 
  $variables['items']['current'] = $current + 1;

  // 添加首页链接
  $options_first = [
    'query' => $pager_manager->getUpdatedParameters($parameters, $element, 0),
  ];

  $variables['items']['first']['href'] = Url::fromRoute('<current>', [], $options_first)->toString();
  // 添加末页链接
  $options_last =  [
    'query' => $pager_manager->getUpdatedParameters($parameters, $element, $total - 1),
  ];
  $variables['items']['last']['href'] = Url::fromRoute('<current>', [], $options_last)->toString();

  if ($total > 1 && $current > 0) {
    $options = [
      'query' => $pager_manager->getUpdatedParameters($parameters, $element, $current - 1),
    ];
    $variables['items']['previous']['href'] = Url::fromRoute('<current>', [], $options)->toString();
    if (isset($tags[1])) {
      $variables['items']['previous']['text'] = $tags[1];
    }
    $variables['items']['previous']['attributes'] = new Attribute();
  }
  if ($current < $total - 1) {
    $options = [
      'query' => $pager_manager->getUpdatedParameters($parameters, $element, $current + 1),
    ];
    $variables['items']['next']['href'] = Url::fromRoute('<current>', [], $options)->toString();
    if (isset($tags[3])) {
      $variables['items']['next']['text'] = $tags[3];
    }
    $variables['items']['next']['attributes'] = new Attribute();
  }

  // 计算显示的页码范围（中间5页）
  $variables['items']['pager_pages'] = [];
  if ($total <= 5) {
    $start = 0;
    $end = $total - 1;
  } else {
    $start = max(0, $current - 2);
    $end = min($total - 1, $current + 2);
  }

  // 生成页码数据
  for ($i = $start; $i <= $end; $i++) {
    $options_i =  [
      'query' => $pager_manager->getUpdatedParameters($parameters, $element, $i),
    ];
    $url = Url::fromRoute('<current>', [], $options_i)->toString();;

    $variables['items']['pager_pages'][] = [
      'key' => $i + 1,
      'href' => $url,
      'attributes' => new \Drupal\Core\Template\Attribute(),
    ];
  }
}

注意，需要在文件开始增加use Drupal\Core\Url; ，否则会报错。

3、覆写views-mini-pager.html.twig模板

复制默认的views-mini-pager.html.twig到主题目录下，根据你选择的样式，进行代码重写，将代码中涉及上一页，下一页，以及你在步骤二中新增的变量，都可以在模板中引用。

下面是我覆写的views-mini-pager.html.twig模板，供参考：

{% if items.previous or items.next %}
  <nav class="flex justify-center" role="navigation" aria-labelledby="{{ heading_id }}">
    <ul class="inline-flex items-center -space-x-px rounded-md text-sm shadow-sm">
      <li>
        <a
          href="{{ items.first.href }}"
          title="{{ 'Go to first page'|t }}"
          rel="prev"
          class="inline-flex items-center space-x-2 rounded-l-md border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
          <span>首页</span>
        </a>
      </li>
      {% if items.previous %}
        <li>
          <a
            href="{{ items.previous.href }}"
            title="{{ 'Go to previous page'|t }}"
            rel="prev"
            class="inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
            <svg
              class="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true">
              <path
                fill-rule="evenodd"
                d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                clip-rule="evenodd" />
            </svg>
            <span>上一页</span>
          </a>
        </li>
      {% else %}
        <li
          class="inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true">
            <path
              fill-rule="evenodd"
              d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
              clip-rule="evenodd" />
          </svg>
          <span>上一页</span>
        </li>
      {% endif %}

      {# 页码列表（显示5页） #}
      {% for page in items.pager_pages %}
        {% if page.key == items.current %}
          <li
            class="z-10 inline-flex items-center border border-gray-300 bg-gray-100 px-4 py-2 font-medium text-gray-700">
            <span>{{ items.current }}</span>
          </li>
        {% else %}
          <li>
            <a
              href="{{ page.href }}"
              class="inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:bg-gray-50"
              title="{{ 'Go to page @key'|t({
                '@key': page.key
              }) }}">
              <span>{{ page.key }}</span>
            </a>
          </li>
        {% endif %}
      {% endfor %}

      {% if items.next %}
        <li>
          <a
            href="{{ items.next.href }}"
            title="{{ 'Go to next page'|t }}"
            rel="next"
            class="inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
            <span>下一页</span>
            <svg
              class="h-5 w-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true">
              <path
                fill-rule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clip-rule="evenodd" />
            </svg>
          </a>
        </li>
      {% else %}
        <li
          class="inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
          <span>下一页</span>
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true">
            <path
              fill-rule="evenodd"
              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
              clip-rule="evenodd" />
          </svg>
        </li>
      {% endif %}
      <li>
        <a
          href="{{ items.last.href }}"
          title="{{ 'Go to last page'|t }}"
          rel="prev"
          class="inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-white px-4 py-2 font-medium text-gray-500 hover:bg-gray-50">
          <span>末页</span>
        </a>
      </li>
    </ul>
  </nav>
{% endif %}

以上就是Drupal分页模板定制的一些步骤和方法，总结一下就是选样式，定变量，覆写模板。

版权申明：

本博客所有文章除特别声明外均采用 BY-NC-SA 4.0 许可协议。依据 BY-NC-SA 4.0 许可协议，转载请附上原文出处链接及本声明。

原文链接： https://zhangzhijun.life/drupalfenyemobanyouhuafangshi.html

Drupal Drupal 主题

相关文章

Default Avatar

客官，说点什么吧!

此字段内容将保密，不会被其他人看见。
关于文本格式