node.html.twig

Default theme implementation to display a node.

Available variables:

  • node: Full node entity.

    • type: The type of the node, for example, "page" or "article".
    • uid: The user ID of the node author.
    • created: Formatted creation date. Preprocess functions can reformat it by calling format_date() with the desired parameters on $variables['node']->created.
    • promote: Whether the node is promoted to the front page.
    • sticky: Whether the node is 'sticky'. Sticky nodes are ordered above other non-sticky nodes in teaser listings
    • status: Whether the node is published.
    • comment: A value representing the comment status of the current node. May be one of the following:

      • 0: The comment form and any existing comments are hidden.
      • 1: Comments are closed. No new comments may be posted, but existing comments are displayed.
      • 2: Comments are open on this node.
    • comment_count: Number of comments attached to the node.
  • label: The title of the node.
  • content: All node items. Use {{ content }} to print them all, or print a subset such as {{ content.field_example }}. Use {% hide(content.field_example) %} to temporarily suppress the printing of a given element.
  • user_picture: The node author's picture from user-picture.html.twig.
  • date: Formatted creation date. Preprocess functions can reformat it by calling format_date() with the desired parameters on $variables['created'].
  • name: Themed username of node author output from theme_username().
  • node_url: Direct URL of the current node.
  • display_submitted: Whether submission information should be displayed.
  • submitted: Submission information created from name and date during template_preprocess_node().
  • attributes: HTML attributes for the containing element. The attributes.class element may contain one or more of the following classes:

    • node: The current template type (also known as a "theming hook").
    • node-[type]: The current node type. For example, if the node is a "Article" it would result in "node-article". Note that the machine name will often be in a short form of the human readable label.
    • view-mode-[view_mode]: The View Mode of the node; for example, a teaser would result in: "view-mode-teaser", and full: "view-mode-full".
    • preview: Whether a node is in preview mode.

    The following are controlled through the node publishing options.

    • promoted: Appears on nodes promoted to the front page.
    • sticky: Appears on nodes ordered above other non-sticky nodes in teaser listings.
    • unpublished: Appears on unpublished nodes visible only to site admins.
  • title_prefix: Additional output populated by modules, intended to be displayed in front of the main title tag that appears in the template.
  • title_suffix: Additional output populated by modules, intended to be displayed after the main title tag that appears in the template.
  • view_mode: View mode; for example, "teaser" or "full".
  • teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
  • page: Flag for the full page state. Will be true if view_mode is 'full'.
  • readmore: Flag for more state. Will be true if the teaser content of the node cannot hold the main body content.
  • is_front: Flag for front. Will be true when presented on the front page.
  • logged_in: Flag for authenticated user status. Will be true when the current user is a logged-in member.
  • is_admin: Flag for admin user status. Will be true when the current user is an administrator.

In field variables, each field instance attached to the node a corresponding variable is defined; for example, 'node.body' becomes 'body'. When needing to access a field's raw values, developers/themers are strongly encouraged to use these variables. Otherwise they will have to explicitly specify the desired field language; for example, 'node.body.en', thus overriding any language negotiation rule that may have been applied previously.

@todo Remove the id attribute (or make it a class), because if that gets rendered twice on a page this is invalid CSS for example: two lists in different view modes.

See also

template_preprocess()

template_preprocess_node()

1 theme call to node.html.twig
TwigDebugMarkupTest::testTwigDebugMarkup in drupal/core/modules/system/lib/Drupal/system/Tests/Theme/TwigDebugMarkupTest.php
Tests debug markup added to Twig template output.

File

drupal/core/modules/node/templates/node.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a node.
  5. *
  6. * Available variables:
  7. * - node: Full node entity.
  8. * - type: The type of the node, for example, "page" or "article".
  9. * - uid: The user ID of the node author.
  10. * - created: Formatted creation date. Preprocess functions can reformat it by
  11. * calling format_date() with the desired parameters on
  12. * $variables['node']->created.
  13. * - promote: Whether the node is promoted to the front page.
  14. * - sticky: Whether the node is 'sticky'. Sticky nodes are ordered above
  15. * other non-sticky nodes in teaser listings
  16. * - status: Whether the node is published.
  17. * - comment: A value representing the comment status of the current node. May
  18. * be one of the following:
  19. * - 0: The comment form and any existing comments are hidden.
  20. * - 1: Comments are closed. No new comments may be posted, but existing
  21. * comments are displayed.
  22. * - 2: Comments are open on this node.
  23. * - comment_count: Number of comments attached to the node.
  24. * - label: The title of the node.
  25. * - content: All node items. Use {{ content }} to print them all,
  26. * or print a subset such as {{ content.field_example }}. Use
  27. * {% hide(content.field_example) %} to temporarily suppress the printing
  28. * of a given element.
  29. * - user_picture: The node author's picture from user-picture.html.twig.
  30. * - date: Formatted creation date. Preprocess functions can reformat it by
  31. * calling format_date() with the desired parameters on
  32. * $variables['created'].
  33. * - name: Themed username of node author output from theme_username().
  34. * - node_url: Direct URL of the current node.
  35. * - display_submitted: Whether submission information should be displayed.
  36. * - submitted: Submission information created from name and date during
  37. * template_preprocess_node().
  38. * - attributes: HTML attributes for the containing element.
  39. * The attributes.class element may contain one or more of the following
  40. * classes:
  41. * - node: The current template type (also known as a "theming hook").
  42. * - node-[type]: The current node type. For example, if the node is a
  43. * "Article" it would result in "node-article". Note that the machine
  44. * name will often be in a short form of the human readable label.
  45. * - view-mode-[view_mode]: The View Mode of the node; for example, a teaser
  46. * would result in: "view-mode-teaser", and full: "view-mode-full".
  47. * - preview: Whether a node is in preview mode.
  48. * The following are controlled through the node publishing options.
  49. * - promoted: Appears on nodes promoted to the front page.
  50. * - sticky: Appears on nodes ordered above other non-sticky nodes in teaser
  51. * listings.
  52. * - unpublished: Appears on unpublished nodes visible only to site admins.
  53. * - title_prefix: Additional output populated by modules, intended to be
  54. * displayed in front of the main title tag that appears in the template.
  55. * - title_suffix: Additional output populated by modules, intended to be
  56. * displayed after the main title tag that appears in the template.
  57. * - view_mode: View mode; for example, "teaser" or "full".
  58. * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
  59. * - page: Flag for the full page state. Will be true if view_mode is 'full'.
  60. * - readmore: Flag for more state. Will be true if the teaser content of the
  61. * node cannot hold the main body content.
  62. * - is_front: Flag for front. Will be true when presented on the front page.
  63. * - logged_in: Flag for authenticated user status. Will be true when the
  64. * current user is a logged-in member.
  65. * - is_admin: Flag for admin user status. Will be true when the current user
  66. * is an administrator.
  67. *
  68. * In field variables, each field instance attached to the node a corresponding
  69. * variable is defined; for example, 'node.body' becomes 'body'. When needing to
  70. * access a field's raw values, developers/themers are strongly encouraged to
  71. * use these variables. Otherwise they will have to explicitly specify the
  72. * desired field language; for example, 'node.body.en', thus overriding any
  73. * language negotiation rule that may have been applied previously.
  74. *
  75. * @see template_preprocess()
  76. * @see template_preprocess_node()
  77. *
  78. * @todo Remove the id attribute (or make it a class), because if that gets
  79. * rendered twice on a page this is invalid CSS for example: two lists
  80. * in different view modes.
  81. *
  82. * @ingroup themeable
  83. */
  84. #}
  85. <article id="node-{{ node.nid }}" class="{{ attributes.class }} clearfix"{{ attributes }}>
  86. {{ title_prefix }}
  87. {% if not page %}
  88. <h2{{ title_attributes }}>
  89. <a href="{{ node_url }}" rel="bookmark">{{ label }}</a>
  90. </h2>
  91. {% endif %}
  92. {{ title_suffix }}
  93. {% if display_submitted %}
  94. <footer>
  95. {{ user_picture }}
  96. <p class="submitted">{{ submitted }}</p>
  97. </footer>
  98. {% endif %}
  99. <div{{ content_attributes }}>
  100. {# We hide the comments and links now so that we can render them later. #}
  101. {% hide(content.comments) %}
  102. {% hide(content.links) %}
  103. {{ content }}
  104. </div>
  105. {{ content.links }}
  106. {{ content.comments }}
  107. </article>

Related topics