Когда вам нужно создать PDF-документ с использованием библиотеки mPDF, бывает необходимо сделать так, чтобы на первой странице отображался отдельный футер (или хидер), отличающийся от остальных страниц. В этом примере мы рассмотрим, как использовать селектор @page :first для задания различных футеров для первой страницы и всех остальных страниц в вашем документе. Этот подход будет полезен не только для проектов на Drupal, но и для любых других случаев, где используется mPDF.
Основы подхода: использование @page :first
Для начала, вам нужно настроить CSS стили для страницы и футеров. Примерно так это выглядит:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@page { header: print-page-header; footer: print-page-footer; } @page :first { footer: print-page-footer-first; } @media screen { htmlpagefooter[name="print-page-footer"] { display: none; } } Здесь мы задаем два основных правила: |
Для всех страниц (кроме первой) используется стандартный футер print-page-footer.
Для первой страницы мы устанавливаем особый футер print-page-footer-first.
Дополнительно для рендера в браузере (например, при просмотре на экране) мы скрываем общий футер, чтобы не отображать оба футера сразу.
HTML-шаблон (Twig)
Чтобы настроить рендеринг футеров, нужно воспользоваться специализированными тегами htmlpagefooter из mPDF. Для этого создадим два отдельных контейнера для футеров — один для всех страниц, второй только для первой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<htmlpagefooter name="print-page-footer"> {% include '@themename/../src/components/page-foot.twig' with { ... isFirst: 0 } %} </htmlpagefooter> <htmlpagefooter name="print-page-footer-first"> {% include '@themename/../src/components/page-foot.twig' with { ... isFirst: 1 } %} </htmlpagefooter> |
Как видно, мы подключаем один и тот же подшаблон футера (page-foot.twig), но оборачиваем его в разные контейнеры htmlpagefooter. Первый футер будет использоваться для всех страниц, кроме первой, а второй — только для первой страницы. В подшаблон передается параметр isFirst, который определяет, какой контент отобразить.
Логика внутри подшаблона
Теперь давайте разберемся с логикой внутри самого подшаблона page-foot.twig, где вы можете задать условие на отображение различного контента в зависимости от значения флага isFirst.
|
1 2 3 4 5 6 7 |
{% if isFirst == 1 %} <!-- Футер для первой страницы --> <div>Этот футер отображается только на первой странице.</div> {% else %} <!-- Стандартный футер для всех остальных страниц --> <div>Этот футер отображается на всех страницах, кроме первой.</div> {% endif %} |
Здесь мы используем проверку флага isFirst, чтобы определить, какой контент выводить в футере. Когда isFirst равен 1, выводится футер для первой страницы, иначе — стандартный футер.