page.html.twig

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
  2. 10 core/themes/stable9/templates/layout/page.html.twig
  3. 10 core/themes/claro/templates/page.html.twig
  4. 10 core/themes/starterkit_theme/templates/layout/page.html.twig
  5. 10 core/modules/system/templates/page.html.twig
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
  2. 9 core/themes/olivero/templates/layout/page.html.twig
  3. 9 core/themes/stable9/templates/layout/page.html.twig
  4. 9 core/themes/seven/templates/page.html.twig
  5. 9 core/themes/claro/templates/page.html.twig
  6. 9 core/themes/bartik/templates/page.html.twig
  7. 9 core/themes/stable/templates/layout/page.html.twig
  8. 9 core/themes/starterkit_theme/templates/layout/page.html.twig
  9. 9 core/themes/classy/templates/layout/page.html.twig
  10. 9 core/modules/system/templates/page.html.twig
  11. 8.9.x core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
  12. 8.9.x core/themes/seven/templates/page.html.twig
  13. 8.9.x core/themes/claro/templates/page.html.twig
  14. 8.9.x core/themes/bartik/templates/page.html.twig
  15. 8.9.x core/themes/stable/templates/layout/page.html.twig
  16. 8.9.x core/themes/classy/templates/layout/page.html.twig
  17. 8.9.x core/modules/system/templates/page.html.twig
  18. 11.x core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
  19. 11.x core/themes/olivero/templates/layout/page.html.twig
  20. 11.x core/themes/stable9/templates/layout/page.html.twig
  21. 11.x core/themes/claro/templates/page.html.twig
  22. 11.x core/themes/starterkit_theme/templates/layout/page.html.twig
  23. 11.x core/modules/system/templates/page.html.twig

Olivero's theme implementation to display a single page.

The doctype, html, head and body tags are not in this template. Instead they can be found in the html.html.twig template normally located in the core/modules/system directory.

Available variables:

General utility variables:

  • base_path: The base URL path of the Drupal installation. Will usually be "/" unless you have installed Drupal in a sub-directory.
  • is_front: A flag indicating if the current page is the front page.
  • logged_in: A flag indicating if the user is registered and signed in.
  • is_admin: A flag indicating if the user has permission to access administration pages.

Site identity:

  • front_page: The URL of the front page. Use this instead of base_path when linking to the front page. This includes the language domain or prefix.

Page content (in order of occurrence in the default page.html.twig):

  • node: Fully loaded node, if there is an automatically-loaded node associated with the page and the node ID is the second argument in the page's path (e.g. node/12345 and node/12345/revisions, but not comment/reply/12345).

Regions:

  • page.header: Items for the header region.
  • page.highlighted: Items for the highlighted region.
  • page.primary_menu: Items for the primary menu region.
  • page.secondary_menu: Items for the secondary menu region.
  • page.content: The main content of the current page.
  • page.sidebar: Items for the first sidebar.
  • page.featured_bottom_first: Items for the first featured bottom region.
  • page.featured_bottom_second: Items for the second featured bottom region.
  • page.footer_first: Items for the first footer column.
  • page.footer_second: Items for the second footer column.
  • page.breadcrumb: Items for the breadcrumb region.
  • page.social: Items for the social region.

See also

template_preprocess_page()

html.html.twig

3 theme calls to page.html.twig
ElementInfoManagerTest::providerTestGetInfoElementPlugin in core/tests/Drupal/Tests/Core/Render/ElementInfoManagerTest.php
Provides tests data for testGetInfoElementPlugin().
ElementInfoManagerTest::testGetInfoElementPlugin in core/tests/Drupal/Tests/Core/Render/ElementInfoManagerTest.php
Tests the getInfo() method when render element plugins are used.
Page::getInfo in core/lib/Drupal/Core/Render/Element/Page.php
Returns the element properties for this element.

File

core/themes/olivero/templates/layout/page.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Olivero's theme implementation to display a single page.
  5. *
  6. * The doctype, html, head and body tags are not in this template. Instead they
  7. * can be found in the html.html.twig template normally located in the
  8. * core/modules/system directory.
  9. *
  10. * Available variables:
  11. *
  12. * General utility variables:
  13. * - base_path: The base URL path of the Drupal installation. Will usually be
  14. * "/" unless you have installed Drupal in a sub-directory.
  15. * - is_front: A flag indicating if the current page is the front page.
  16. * - logged_in: A flag indicating if the user is registered and signed in.
  17. * - is_admin: A flag indicating if the user has permission to access
  18. * administration pages.
  19. *
  20. * Site identity:
  21. * - front_page: The URL of the front page. Use this instead of base_path when
  22. * linking to the front page. This includes the language domain or prefix.
  23. *
  24. * Page content (in order of occurrence in the default page.html.twig):
  25. * - node: Fully loaded node, if there is an automatically-loaded node
  26. * associated with the page and the node ID is the second argument in the
  27. * page's path (e.g. node/12345 and node/12345/revisions, but not
  28. * comment/reply/12345).
  29. *
  30. * Regions:
  31. * - page.header: Items for the header region.
  32. * - page.highlighted: Items for the highlighted region.
  33. * - page.primary_menu: Items for the primary menu region.
  34. * - page.secondary_menu: Items for the secondary menu region.
  35. * - page.content: The main content of the current page.
  36. * - page.sidebar: Items for the first sidebar.
  37. * - page.featured_bottom_first: Items for the first featured bottom region.
  38. * - page.featured_bottom_second: Items for the second featured bottom region.
  39. * - page.footer_first: Items for the first footer column.
  40. * - page.footer_second: Items for the second footer column.
  41. * - page.breadcrumb: Items for the breadcrumb region.
  42. * - page.social: Items for the social region.
  43. *
  44. * @see template_preprocess_page()
  45. * @see html.html.twig
  46. */
  47. #}
  48. <div id="page-wrapper" class="page-wrapper">
  49. <div id="page">
  50. {% if page.header or page.primary_menu or page.secondary_menu %}
  51. <header id="header" class="site-header" data-drupal-selector="site-header" role="banner">
  52. {# Gets fixed by JavaScript at wide widths. #}
  53. <div class="site-header__fixable" data-drupal-selector="site-header-fixable">
  54. <div class="site-header__initial">
  55. <button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'|t }}" aria-checked="false">
  56. <span class="sticky-header-toggle__icon">
  57. <span></span>
  58. <span></span>
  59. <span></span>
  60. </span>
  61. </button>
  62. </div>
  63. {# Needs to extend full width so box shadow will also extend. #}
  64. <div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">
  65. <div class="container site-header__inner__container">
  66. {{ page.header }}
  67. {% if page.primary_menu or page.secondary_menu %}
  68. <div class="mobile-buttons" data-drupal-selector="mobile-buttons">
  69. <button class="mobile-nav-button" data-drupal-selector="mobile-nav-button" aria-label="{{ 'Main Menu'|t }}" aria-controls="header-nav" aria-expanded="false">
  70. <span class="mobile-nav-button__label">{{ 'Menu'|t }}</span>
  71. <span class="mobile-nav-button__icon"></span>
  72. </button>
  73. </div>
  74. <div id="header-nav" class="header-nav" data-drupal-selector="header-nav">
  75. {{ page.primary_menu }}
  76. {{ page.secondary_menu }}
  77. </div>
  78. {% endif %}
  79. </div>
  80. </div>
  81. </div>
  82. </header>
  83. {% endif %}
  84. <div id="main-wrapper" class="layout-main-wrapper layout-container">
  85. <div id="main" class="layout-main">
  86. <div class="main-content">
  87. <a id="main-content" tabindex="-1"></a>
  88. {{ page.hero }}
  89. <div class="main-content__container container">
  90. {{ page.highlighted }}
  91. {{ page.breadcrumb }}
  92. {% if page.sidebar %}
  93. <div class="sidebar-grid grid-full">
  94. <main role="main" class="site-main">
  95. {{ page.content_above }}
  96. {{ page.content }}
  97. </main>
  98. {{ page.sidebar }}
  99. </div>
  100. {% else %}
  101. <main role="main">
  102. {{ page.content_above }}
  103. {{ page.content }}
  104. </main>
  105. {% endif %}
  106. {{ page.content_below }}
  107. </div>
  108. </div>
  109. <div class="social-bar">
  110. {{ page.social }}
  111. </div>
  112. </div>
  113. </div>
  114. <footer class="site-footer">
  115. <div class="site-footer__inner container">
  116. {{ page.footer_top }}
  117. {{ page.footer_bottom }}
  118. </div>
  119. </footer>
  120. <div class="overlay" data-drupal-selector="overlay"></div>
  121. </div>
  122. </div>

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.