基础篇17. 添加一篇内容，drupal网站的页面结构

预告：接下来的两篇是付费内容，是Drupal主题入门环节最重要的几个知识点之一，配有比较详细的文档说明，由于视频的篇幅限制，很多细节并没有出现在视频中，因此，请仔细阅读文档内容，谢谢支持。晴空在这里先谢过了。 ：）

让我们来添加一篇内容，然后来讲解一下drupal页面的结构。

首先，点击添加内容链接。选择Article，这里的article和basic page是网站安装以后的两个默认内容类型。

我们先随意创建一篇Article，也就是文章。分别填入标题、摘要、正文和标签。点击保存，我们可以看到，这就是我们在这个网站上创建的第一篇文章。

我们可以看到，这个由Drupal生成的页面，是由很多不同的部分构成的。让我们一层一层，由外向内来介绍。

首先，任何一个页面都是HTML构成的，而所有的HTML页面都会包含，HTML、head、body等标签。在Drupal的主题层，这些由一个叫做html.html.twig的模板文件来负责。他是所有drupal页面最外层的模板。

接下来，在html的body标签中，包含着页面上的大部分的元素，这些元素都会被放置在page.html.twig模板中。因为我们是作为管理员登录到这个网站上的，所以，还会在页面顶部有一个相应的管理菜单。这个菜单是独立于页面的，所以它并不包含在page.html.twig中。而是放在toolbar.html.twig中。在层级关系上，两者是同级的。如果是匿名用户打开这个网页，就不会显示这个菜单的。

页面page中，又包含不同的区域，也就是region。区域相对应的模板文件是region.html.twig。然后在同一个区域中，又会包含不同的区块，block。区块相对应的模板文件是block.html.twig。

你可以看到，页面上绿色线框标示的是区域，黄色线框是区域中的区块。你可以把区域想象成超市中的区域，比如水果区，肉食区，在水果区中，会有不同的区块，比如，香蕉，梨子，苹果。

在主内容区块中，还有一个node.html.twig,他用来输出每一个drupal的节点，也就是你刚才添加的这篇文章。这个文章属于article内容类型，而每一个内容类型又都是由不同的字段构成的，因此，node中还会包含不同的字段模板，在添加文字的时候，我们填写了正文字段和标签字段，以及我们没有填写的评论字段。

你可以在元素检查区域利用twig debug模式分别找到上述模板。

twig debug模式会分别声明每一个模板的开始和结束。并且会告诉你被启用的模板在项目文件夹中所处的位置。这里我就不一一演示了。

我们会在后续的课程中学到：区域在info文件中定义，在模板文件中输出，在区块布局页面管理并放置区块到区域中。

隐藏区域和默认区域

Drupal会为我们提供2个隐藏区域，他们分别是page top和page bottom区域，之所以叫他们隐藏区域是因为你无法在区块布局页面看到它们，也不需要你在info文件中定义它们。

在html.thml.twig中输出，以下是stable主题的html.html.twig文件代码：

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

其中倒数第6和第4行的代码就是用于输出这两个隐藏区域。前面提到的管理工具条，即toolbar.html.twig就是从倒数第六行的page top区域中输出的。

如果，我们不在info文件中定义任何区域，那么Drupal会为我们提供10个默认区域。

它们分别是：

  1. page.header
  2. page.primary_menu
  3. page.secondary_menu
  4. page.highlighted
  5. page.help (dynamic help text, mostly for admin pages)
  6. page.content (main content of current page)
  7. page.sidebar_first
  8. page.sidebar_second
  9. page.footer
  10. page.breadcrumb

你还可以在page模板的注释中找到对于他们的说明。

如果在info文件中定义了自己的区域，那么默认的区域就不再起作用了，这同样也被视作覆写。同理，如果你的页面布局正好符合这10个默认的区域，那么你就不需要在你的info文件中对区域进行定义。

再强调一次：一旦你在自己的.info文件中定义了一个区域，就会覆写掉全部的默认区域。

如果你定义了自己的区域，你还需要用对应的代码将它输出到页面上，这个内容将在下一节讲述。目前，你只需要知道，page top和page bottom区域是在html.html.twig中输出的，而其他所有的区域都是在page.html.twig中输出的。

本书共102小节。


评论 (2)