基础篇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小节。


目前全部收费内容共235.00元。购买全部

评论 (2)