You are here

Home » API reference » Drupal 10

page.html.twig in Drupal 10

Same filename in this branch
  1. 10 core/themes/claro/templates/page.html.twig
  2. 10 core/themes/seven/templates/page.html.twig
  3. 10 core/themes/bartik/templates/page.html.twig
  4. 10 core/modules/system/templates/page.html.twig
  5. 10 core/themes/starterkit_theme/templates/layout/page.html.twig
  6. 10 core/themes/classy/templates/layout/page.html.twig
  7. 10 core/themes/olivero/templates/layout/page.html.twig
  8. 10 core/themes/stable9/templates/layout/page.html.twig
  9. 10 core/themes/stable/templates/layout/page.html.twig
  10. 10 core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
Same filename and directory in other branches
  1. 9 core/themes/olivero/templates/layout/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. 

  49. <div id="page-wrapper" class="page-wrapper">

  50.   <div id="page">

  51. 

  52.     {% if page.header or page.primary_menu or page.secondary_menu %}

  53.       <header id="header" class="site-header" data-drupal-selector="site-header" role="banner">

  54. 

  55.         {# Gets fixed by JavaScript at wide widths. #}

  56.         <div class="site-header__fixable" data-drupal-selector="site-header-fixable">

  57.           <div class="site-header__initial">

  58.             <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">

  59.               <span class="sticky-header-toggle__icon">

  60.                 <span></span>

  61.                 <span></span>

  62.                 <span></span>

  63.               </span>

  64.             </button>

  65.           </div>

  66. 

  67.           {# Needs to extend full width so box shadow will also extend. #}

  68.           <div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">

  69.             <div class="container site-header__inner__container">

  70. 

  71.               {{ page.header }}

  72. 

  73.               {% if page.primary_menu or page.secondary_menu %}

  74.                 <div class="mobile-buttons" data-drupal-selector="mobile-buttons">

  75.                   <button class="mobile-nav-button" data-drupal-selector="mobile-nav-button" aria-label="{{ 'Main Menu'|t }}" aria-controls="header-nav" aria-expanded="false">

  76.                     <span class="mobile-nav-button__label">{{ 'Menu'|t }}</span>

  77.                     <span class="mobile-nav-button__icon"></span>

  78.                   </button>

  79.                 </div>

  80. 

  81.                 <div id="header-nav" class="header-nav" data-drupal-selector="header-nav">

  82.                   {{ page.primary_menu }}

  83.                   {{ page.secondary_menu }}

  84.                 </div>

  85.               {% endif %}

  86.             </div>

  87.           </div>

  88.         </div>

  89.       </header>

  90.     {% endif %}

  91. 

  92.     <div id="main-wrapper" class="layout-main-wrapper layout-container">

  93.       <div id="main" class="layout-main">

  94.         <div class="main-content">

  95.           <a id="main-content" tabindex="-1"></a>

  96.           {{ page.hero }}

  97.           <div class="main-content__container container">

  98.             {{ page.highlighted }}

  99.             {{ page.breadcrumb }}

  100. 

  101.             {% if page.sidebar %}

  102.               <div class="sidebar-grid grid-full">

  103.                 <main role="main" class="site-main ie11-autorow">

  104.                   {{ page.content_above }}

  105.                   {{ page.content }}

  106.                 </main>

  107. 

  108.                 {{ page.sidebar }}

  109.               </div>

  110.             {% else %}

  111.               <main role="main">

  112.                 {{ page.content_above }}

  113.                 {{ page.content }}

  114.               </main>

  115.             {% endif %}

  116.             {{ page.content_below }}

  117.           </div>

  118.         </div>

  119.         <div class="social-bar">

  120.           {{ page.social }}

  121.         </div>

  122.       </div>

  123.     </div>

  124. 

  125.     <footer class="site-footer">

  126.       <div class="site-footer__inner container">

  127.         {{ page.footer_top }}

  128.         {{ page.footer_bottom }}

  129.       </div>

  130.     </footer>

  131. 

  132.     <div class="overlay" data-drupal-selector="overlay"></div>

  133. 

  134.   </div>

  135. </div>