1. Documentation
  2. 8.x-3.x
  3. page.html.twig

file page.html.twig

Default 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 in this 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):
  • title_prefix: Additional output populated by modules, intended to be displayed in front of the main title tag that appears in the template.
  • title: The page title, for use in the actual content.
  • title_suffix: Additional output populated by modules, intended to be displayed after the main title tag that appears in the template.
  • messages: Status and error messages. Should be displayed prominently.
  • tabs: Tabs linking to any sub-pages beneath the current page (e.g., the view and edit tabs when displaying a node).
  • 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.navigation: Items for the navigation region.
  • page.navigation_collapsible: Items for the navigation (collapsible) region.
  • page.highlighted: Items for the highlighted content region.
  • page.help: Dynamic help text, mostly for admin pages.
  • page.content: The main content of the current page.
  • page.sidebar_first: Items for the first sidebar.
  • page.sidebar_second: Items for the second sidebar.
  • page.footer: Items for the footer region.

See Also

  1. {#

  2. /**

  3.  * @file

  4.  * Default 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 in this directory.

  8.  *

  9.  * Available variables:

  10.  *

  11.  * General utility variables:

  12.  * - base_path: The base URL path of the Drupal installation. Will usually be

  13.  *   "/" unless you have installed Drupal in a sub-directory.

  14.  * - is_front: A flag indicating if the current page is the front page.

  15.  * - logged_in: A flag indicating if the user is registered and signed in.

  16.  * - is_admin: A flag indicating if the user has permission to access

  17.  *   administration pages.

  18.  *

  19.  * Site identity:

  20.  * - front_page: The URL of the front page. Use this instead of base_path when

  21.  *   linking to the front page. This includes the language domain or prefix.

  22.  *

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

  24.  * - title_prefix: Additional output populated by modules, intended to be

  25.  *   displayed in front of the main title tag that appears in the template.

  26.  * - title: The page title, for use in the actual content.

  27.  * - title_suffix: Additional output populated by modules, intended to be

  28.  *   displayed after the main title tag that appears in the template.

  29.  * - messages: Status and error messages. Should be displayed prominently.

  30.  * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the

  31.  *   view and edit tabs when displaying a node).

  32.  * - node: Fully loaded node, if there is an automatically-loaded node

  33.  *   associated with the page and the node ID is the second argument in the

  34.  *   page's path (e.g. node/12345 and node/12345/revisions, but not

  35.  *   comment/reply/12345).

  36.  *

  37.  * Regions:

  38.  * - page.header: Items for the header region.

  39.  * - page.navigation: Items for the navigation region.

  40.  * - page.navigation_collapsible: Items for the navigation (collapsible) region.

  41.  * - page.highlighted: Items for the highlighted content region.

  42.  * - page.help: Dynamic help text, mostly for admin pages.

  43.  * - page.content: The main content of the current page.

  44.  * - page.sidebar_first: Items for the first sidebar.

  45.  * - page.sidebar_second: Items for the second sidebar.

  46.  * - page.footer: Items for the footer region.

  47.  *

  48.  * @ingroup templates

  49.  *

  50.  * @see template_preprocess_page()

  51.  * @see html.html.twig

  52.  */

  53. #}

  54. {% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}

  55. {# Navbar #}

  56. {% if page.navigation or page.navigation_collapsible %}

  57.   {% block navbar %}

  58.     {%

  59.       set navbar_classes = [

  60.         'navbar',

  61.         theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',

  62.         theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container,

  63.       ]

  64.     %}

  65.     <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">

  66.       {% if not navbar_attributes.hasClass(container) %}

  67.         <div class="{{ container }}">

  68.       {% endif %}

  69.       <div class="navbar-header">

  70.         {{ page.navigation }}

  71.         {# .btn-navbar is used as the toggle for collapsed navbar content #}

  72.         {% if page.navigation_collapsible %}

  73.           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">

  74.             <span class="sr-only">{{ 'Toggle navigation'|t }}</span>

  75.             <span class="icon-bar"></span>

  76.             <span class="icon-bar"></span>

  77.             <span class="icon-bar"></span>

  78.           </button>

  79.         {% endif %}

  80.       </div>

  81. 

  82.       {# Navigation (collapsible) #}

  83.       {% if page.navigation_collapsible %}

  84.         <div id="navbar-collapse" class="navbar-collapse collapse">

  85.           {{ page.navigation_collapsible }}

  86.         </div>

  87.       {% endif %}

  88.       {% if not navbar_attributes.hasClass(container) %}

  89.         </div>

  90.       {% endif %}

  91.     </header>

  92.   {% endblock %}

  93. {% endif %}

  94. 

  95. {# Main #}

  96. {% block main %}

  97.   <div role="main" class="main-container {{ container }} js-quickedit-main-content">

  98.     <div class="row">

  99. 

  100.       {# Header #}

  101.       {% if page.header %}

  102.         {% block header %}

  103.           <div class="col-sm-12" role="heading">

  104.             {{ page.header }}

  105.           </div>

  106.         {% endblock %}

  107.       {% endif %}

  108. 

  109.       {# Sidebar First #}

  110.       {% if page.sidebar_first %}

  111.         {% block sidebar_first %}

  112.           <aside class="col-sm-3" role="complementary">

  113.             {{ page.sidebar_first }}

  114.           </aside>

  115.         {% endblock %}

  116.       {% endif %}

  117. 

  118.       {# Content #}

  119.       {%

  120.         set content_classes = [

  121.           page.sidebar_first and page.sidebar_second ? 'col-sm-6',

  122.           page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',

  123.           page.sidebar_second and page.sidebar_first is empty ? 'col-sm-9',

  124.           page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'

  125.         ]

  126.       %}

  127.       <section{{ content_attributes.addClass(content_classes) }}>

  128. 

  129.         {# Highlighted #}

  130.         {% if page.highlighted %}

  131.           {% block highlighted %}

  132.             <div class="highlighted">{{ page.highlighted }}</div>

  133.           {% endblock %}

  134.         {% endif %}

  135. 

  136.         {# Help #}

  137.         {% if page.help %}

  138.           {% block help %}

  139.             {{ page.help }}

  140.           {% endblock %}

  141.         {% endif %}

  142. 

  143.         {# Content #}

  144.         {% block content %}

  145.           <a id="main-content"></a>

  146.           {{ page.content }}

  147.         {% endblock %}

  148.       </section>

  149. 

  150.       {# Sidebar Second #}

  151.       {% if page.sidebar_second %}

  152.         {% block sidebar_second %}

  153.           <aside class="col-sm-3" role="complementary">

  154.             {{ page.sidebar_second }}

  155.           </aside>

  156.         {% endblock %}

  157.       {% endif %}

  158.     </div>

  159.   </div>

  160. {% endblock %}

  161. 

  162. {% if page.footer %}

  163.   {% block footer %}

  164.     <footer class="footer {{ container }}" role="contentinfo">

  165.       {{ page.footer }}

  166.     </footer>

  167.   {% endblock %}

  168. {% endif %}

Related topics

Templates
List of theme templates used in the Drupal Bootstrap base theme.