基础篇31. 内容的覆写(中)

{#
/**
 * @file
 * Theme override to display a node.
 *
 * Available variables:
 * - node: The node entity with limited access to object properties and methods.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - node.getCreatedTime() will return the node creation timestamp.
 *   - node.hasField('field_example') returns TRUE if the node bundle includes
 *     field_example. (This does not indicate the presence of a value in this
 *     field.)
 *   - node.isPublished() will return whether the node is published or not.
 *   Calling other methods, such as node.delete(), will result in an exception.
 *   See \Drupal\node\Entity\Node for a full list of public properties and
 *   methods for the node object.
 * - 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
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - author_picture: The node author user entity, rendered using the "compact"
 *   view mode.
 * - metadata: Metadata for this node.
 * - date: Themed creation date field.
 * - author_name: Themed author name field.
 * - url: Direct URL of the current node.
 * - display_submitted: Whether submission information should be displayed.
 * - 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-[type]: The current node type. For example, if the node is an
 *     "Article" it would result in "node--type-article". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
 *     teaser would result in: "node--view-mode-teaser", and
 *     full: "node--view-mode-full".
 *   The following are controlled through the node publishing options.
 *   - node--promoted: Appears on nodes promoted to the front page.
 *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
 *     teaser listings.
 *   - node--unpublished: Appears on unpublished nodes visible only to site
 *     admins.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - content_attributes: Same as attributes, except applied to the main
 *   content tag that appears in the template.
 * - author_attributes: Same as attributes, except applied to the author of
 *   the node tag that appears in the template.
 * - 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.
 * - 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.
 *
 * @see template_preprocess_node()
 *
 * @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.
 */
#}
<article{{ attributes }}>

  {{ title_prefix }}
  {% if not page %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
  {% endif %}
  {{ title_suffix }}

  {% if display_submitted %}
    <footer>
      {{ author_picture }}
      <div{{ author_attributes }}>
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      </div>
    </footer>
  {% endif %}

  <div{{ content_attributes }}>
    {{ content }}
  </div>

</article>

鼎鼌鼋鼇鼅鼃黿黾黺黷鼅黶黴黰黬

黴黰黫黷黩黦黢鼃黿點黛黙默黗黕黓黷黏黍黋黈黆黂麾黩黦黫麽麹麵麴麱麰黷麮麪麩麦麣黬

鼎麢鼃黿麠麜麙麴麘麖麔黷麒鼇麏麎

page麎 鼎麢黷page麦麊麆麃鼌麁鼌鼅黶鹽鹹黋默鹵黋鼅黶1黋鼌鼃黿鹱鹯黷鹫鼇麴鼅黶黬鹧鼎麴鼅黶鹤鹡鹞麾鹚鹙黫黷鹗鹔黋默鹵鹒鹽黷鹚鹙黋鹏鹌鹈鼌鼇麴鹽鹹黋鹄鼌鼇麴鹀麔黋鸿黏鸻鸺teaser鸷鸳鸰黋鼃黿鼎麴node黴黰黋鸭鸬麆麃鼌麁黢page黋鸫黆黂鸪鸨鼅黶鹽鹹黷html黋鸧黆黂鸪鸨鼅黶鹀麔黷html黬

鹧鸤黋黈鸧黆黂鹈鸢麦麆麃黋鹄鸡鸠鸢麦node--[鸟鸞鸛鸗]--teaser.html.twig鼎麴黴黰鸖鸡鸠鸪鸨鼅黶麾鸟鸞鹚鹙黫黷鸒鸎黬鼎鸊黷鸉黋黈鹌鹈鸆麔麾node黴黰黫鸄黢鸁鷿鷾鷺黺鷹鷵黬

label麎麦麊鹱鷲鼅黶黷鷯鷭黬鼃黿黆黂鷩麹鷹鷵黫鷧麾鼅黶黢teaser鷦鷥麏鷢鹱鷲鷯鷭黋麾鹽鹹鷦鷥麏鷠鷝鹱鷲鷯鷭黋鼎鼌鸳黢黋麾鹽鹹鼋黋鷝鼇麴鷜鷛點黛黷鷯鷭鷙鷘黬鼃黿鸭鷕鷒黆黂鷏鷌鼎麴鷙鷘黋鷋麾node黴黰黫鸢麦label麱麰鸖鹱鷲鷯鷭黬麾鼎麢黋鼃黿麦bootstrap黢鼃黿點黛黷黏鷊鷇黫鸛鷆text-align-center鸖鷂鷯鷭鷇黫黬鹄鶾黋鶺麊鼎麢鼌鹽鹹黷鷯鷭黋鸳鸰黋鹈鸆麔鶷麾teaser黫鶳鸊黋鶰鼇麴鶬鸠黬

title_ prefix

title_ suffix

鼎鸁麴鼌黢鶪鹏黴鷘鶦鶤黷黋鶡黿麵鶟麾鷯鷭黷鶞鹹麩鶚鹹鶙鹯鶪鹏黴鷘鶕麔鹱鷲黷鶔鶑黋黈鹈鶐鶍鶌鶋鶡黿黬默鹵Contextual Links黴鷘黋鷒麾鷯鷭黷鶇鶃鼇麴麦鸖鶀鵼鼅黶黷鵸鵴鵰鷯黬鹵鸎黈鵬鼎鸁鵪鷹鷵鶌鶋黙黋鵨鶐黷鵰鷯鹌鷒鵤鵠黬

display_ submitted麎

麦麊麆麃鼌麁鹡鹞點鵝鵚鵖黋鹵鸎鹡鹞黋鵕鶇鶃鵔鵒鵎鶷麩鷆鵊黋黂鵉鵇鵃鴿鴼黬黈黆黂麾鸟鸞鸛鸗黷鶀鵼鹽鹹麽麹鼎麴麜鴺黬鶞鹹鴸鴵鴱鸬黙黋鼅黶鴰麊鹈鴬黷鸟鸞鸛鸗黋鸳鸰黋黾黺鼅黶黴黰黷鹗鹔黋麩鼅黶鴫鴰黷鸟鸞鸛鸗鵖鵖鵨鷏黬

content麎鶡鴨鴦黙鼅黶黷鴫鷝鷊鴥黬鼃黿鴤麾黷鼅黶鴰麊article鸟鸞鸛鸗黋鸳鸰黋麾黴黰黫鶇鶃鷲content黷鹗鹔黋鹌鷒鵬article鸟鸞鸛鸗黷鴫鷝鷊鴥鴡鶇鶃鷲鸖黋鹏鴨鴠鵰鶷鴝鷯鴜鴝鴚黏麩鴙鴗黬

鴖鴒鹗鹔黋黢黙鴑鴎鸊鴍黋黈鸆麔鴊鴆麴鷊鴥鴄鴁鶇鶃鷲鸖黋鶳鴀黈黆黂鸢麦鸛鳽鼎鸊黷鳺鳷麎

{{ content.field_name }}

麾content鶚鹹麦黶鳵鸠鷊鴥黷鳳鳯鷆黬黈黆黂麾鸟鸞鸛鸗黷鷊鴥鹚鹙鹽鹹鳬鷩鳨鼇麴鷊鴥黷鳳鳯鷆黬

鸳鸰黋鼎麢鼃黿麦鼋鹹黷鳤麣鸖鶇鶃鵰鳣麩鴚黏鷊鴥黬鷋鶾鵬鵰鳣鶰麹鼇鳢div麢鹹黋鷋鶾鳞鼎麴div鼇麴鶞鹹麦鸬黷css鸛鷆黋鸖鸢鳚鵰鳣鷇黫黬

鸰鳙黋鳕鳔鴖鸞鳓鳏鼇麴鳋鳊麎麾node鹽鹹黴黰黫黋麦鼋鹹黷鷹鷵鸄鶇鶃鴫鷝黷鷊鴥黬鼎鸊鸺黷鳈鳙鼌黋鹵鸎鶪鶡鳅鳂鳁鲽鲺黢鼎麴鸟鸞鸛鸗鳕鲸鲶黙鼇麴鷊鴥黷鸉黋鼎麴鳕鷊鴥鹌鲴麣鹤鹡鹞鷲鸖黙黬鼎鸊鹌鷒鲳鲰鳅鳂鲮鲬黷鲩鵠黬鵔黢鼇麴themer黋黈黷鲥黢鹈鶐鶍鲣鲟鳅鳂黷鲮鲬黬

鸳鸰黋黢黙鲝鲛鼎鷿鳋鳊黋鼃黿鲘鼌麔鵬content鶇鶃鷲鸖黋鸤鶚麦without鸄鲔鲒鶞鴸鴵鶇鶃鸬黷鷊鴥黋鼎鸊黷鸉黋黂鶚鳕鲎鲶黷鷊鴥鲘鼌鷒鹤鼎鵪鷹鷵鶇鶃鷲鸖黬

{{ content|without('field_image','body','comment','field_tags') }}

黩鲌鼎麢黋鼃黿鶋黙鵬鵰鳣麩鴚黏鲊鶋黙鲒鲆黋鲘鲊鶋黙鴙鴗麩鷯鴜黬鼎鸊黋鹽鹹鼋鹌鹈鷒鶇鶃鴙鴗麩鷯鴜鷊鴥黬鼎麢鼎鸧鸺鷧鼌黢黙鼅鲃鹗鲂黋鸳黢黋黈鶐鶍麾鸟鸞鸛鸗黷鳁鲽鹡鹞鹽鹹鸄鱿麦鹈鸆麔黷鷊鴥黬

鱼鲆黋鱸鳚黩鲌黷鼌黋麾鼎麴鳁鲽鹡鹞黷鹽鹹鼋黋鲘黆黂鴑鴎鷊鴥鶇鶃黷鱴鱲黋鱰鼌鼎麴鲮鲬鷧鷝麾黈鸢麦content鶇鶃鴫鷝鷊鴥黷鹗鹔鷢鱬鸒黬鹵鸎黈麾黴黰黫鸢麦content.field_name鴄鴁鶇鶃黙鴆麴鷊鴥黷鸉黋鹏黷鱴鱲鶺鹏麾黴黰黏鱫黫鷲鴤黷鱩鱦鸖鱣麮

鸤鶚鼃黿鱡鵬麏鹹鼎鱞麦麊鹱鷲鷊鴥黷鷹鷵鱜鱛鶰麹鼇麴if麆麃黫黋鷧麦麾鹽鹹鼋鷢鶇鶃鼎鱞鷊鴥黋鹄鹀麔黷鱛鱙黋鸧鶐鶍鶰麾鱼鼇麴if麆麃黫黋鷋鶾鲘麔鴑鴎鼇麏title prefix 麩 suffix黷鱩鱦黬麘鶚黋鹈麔鱘鱖鷏鷌鳕鲎鲶黷if鳤鱔黬

鸤鶚鼃黿鱒麹鷙鷘鵃鱏鹽鹹黋鱿麦page title鷙鷘黋鹌黆黂鲝鲛鹽鹹鼋鷯鷭麖鱍鸁鱋黷鴤鱊黬鹧鸤黋黈鲘黆黂鴑鴎鶀鵼鱇鴄黷鸊鴍黋鼎麢鹌鲃鱄黙黬

黂麏鼌鱀鰿鲒鶚黷node--article.html.twig黴黰黷鷹鷵鰾鰺鰶鰳鰱麎

{#
/**
 * @file
 * Theme override to display a node.
 *
 * Available variables:
 * - node: The node entity with limited access to object properties and methods.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - node.getCreatedTime() will return the node creation timestamp.
 *   - node.hasField('field_example') returns TRUE if the node bundle includes
 *     field_example. (This does not indicate the presence of a value in this
 *     field.)
 *   - node.isPublished() will return whether the node is published or not.
 *   Calling other methods, such as node.delete(), will result in an exception.
 *   See \Drupal\node\Entity\Node for a full list of public properties and
 *   methods for the node object.
 * - 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
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - author_picture: The node author user entity, rendered using the "compact"
 *   view mode.
 * - metadata: Metadata for this node.
 * - date: Themed creation date field.
 * - author_name: Themed author name field.
 * - url: Direct URL of the current node.
 * - display_submitted: Whether submission information should be displayed.
 * - 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-[type]: The current node type. For example, if the node is an
 *     "Article" it would result in "node--type-article". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
 *     teaser would result in: "node--view-mode-teaser", and
 *     full: "node--view-mode-full".
 *   The following are controlled through the node publishing options.
 *   - node--promoted: Appears on nodes promoted to the front page.
 *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
 *     teaser listings.
 *   - node--unpublished: Appears on unpublished nodes visible only to site
 *     admins.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - content_attributes: Same as attributes, except applied to the main
 *   content tag that appears in the template.
 * - author_attributes: Same as attributes, except applied to the author of
 *   the node tag that appears in the template.
 * - 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.
 * - 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.
 *
 * @see template_preprocess_node()
 *
 * @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.
 */
#}



  {% if not page %}
<article{{ attributes }}>
    {{ title_prefix }}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
    {{ title_suffix }}
  {% endif %}


  {% if page %}
<article{{ attributes }}>
    <h1 class="text-align-center">
      {{ title_prefix }}
      {{ label }}
      {{ title_suffix }}
    </h1>

    <div{{ content_attributes }}>
      <div class="text-align-center">
          {{ content.field_image }}
      </div>

        {{ content.body }}
    </div>

    {% if display_submitted %}
      <footer>
          {{ author_picture }}
        <div{{ author_attributes }}>
            {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
            {{ metadata }}
        </div>
      </footer>
    {% endif %}

    {{ content|without('field_image','body','comment','field_tags') }}
  {% endif %}
</article>

本书共66小节:

评论 (4)

    • 2017-10-20

    想获取node--article.html.twig模版上的标题title变量,听了您的课程,装了devel kint 模块,写上{{ kint() }} 页面就没反应了。现在只知道page模版上的title 变量为{{ page['#title'] }},那么在node模版上怎么表示呢?{{ kint() }}撤掉就没事,写上就没反应,是我哪里搞错了吗?

    • 2017-10-21

    In reply to by silence

    label用于输出节点标题,文档中有的。   kint会消耗大量内存,因此开启之前应该先提高内存限制,详见第五节。

  • 29
    • 2018-05-27

    主题开发教程写的真不错,有的文字怎么是乱码啊

  • 你好,谢谢支持,文字做了加密,只支持符合标准的现代浏览器比如Chrome、Firefox、Edge