基础篇21. 模板中的变量，devel kint，html模板

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

在之前的章节中，我们讲述了覆写模板和定义库，我们通过覆写的方式来改变html标签，通过库来引入CSS和JS。而页面是由HTML来定义结构，CSS定义样式，JS定义行为（或者说交互），作为前端工程师，我们应该对这些东西非常熟悉了，把这些东西都排除在外的话，那页面上就只剩下内容了。但是内容是怎么来的呢？这一节，我们将讨论这个问题。

模板中的变量

在上一节中我们覆写了page模板，并在其中添加了一行代码，也就是一对h1标签。在这对h1标签中是我们自己输入的文字内容“hello drupal”。这个文字就是我们添加到页面上的内容。

我们在覆写模板的时候，并不经常这么做，因为这种“写死”在模板中的内容，是无法使用drupal系统来管理和修改的，如果要修改，则必须编辑这个模板文件。而drupal作为一个CMS（content management system）也就是内容管理系统，它的作用就在于将各种内容保存在数据库中，然后将他们以变量的形式输出到页面上。

所以，让我们把这个“hello drupal”的文字改为一个变量，在模板文件的注释中，我们可以看到几个在page模板中常用的变量，拷贝其中一个，比如 {{ logged_in }} 替换“hello drupal” 。 两对大括号是twig用来输出表达式结果的，关于twig，我们以后还会专门讲。

这是一个布尔类型的变量，用于判断用户是否注册并登陆。我们现在是登陆状态，因此，在页面顶部输出的是1。

注释中列出的仅仅是page模板中最常用的变量，除此之外，还有一些其他的变量可以使用。这些变量有的是由Drupal核心提供的，有的是因为你安装了其它模块，由这些模块提供的。

devel kint

然后，我们在模板文件的注释下方，代码的顶部，添加一个语句，你可以在文档中找到这行命令。

{{ kint() }}

这个语句是由我们在第15节所安装的devel kint模块提供的。它可以为我们在页面上打印模板中所有的变量。在使用它之前，你还需要开启twig debug功能。关于这个，我们在第11节中演示过。

kint在页面上生成了一个区域，点击展开以后，你可以看到所有的变量以及它们的相关信息。

这里的page是一个数组，展开之后你可以看到这个数组中的元素，其中有一个title。

在这里，我们把之前的logged in 替换为 page title ，它的写法与php中数组的写法是一致的，你可以查看文档中的代码。

<h1 class=“v1”> {{ page['#title'] }} </h1>

保存后再次刷新页面，可以看到，首页因为没有标题，因此，页面顶部并没有输出这个变量。展开kint生成的区域，找到page中的title，我们可以看到这里是一个空字符串。

我们切换到文章页面，页面顶部重复打印了两次页面标题，其中的第一个，即是我们添加的这行代码的结果。展开kint生成的区域，找到page中的title，我们可以看到这里显示了相应的信息。

因此，借助twig debug模式和devel kint，我们可以使用kint命令来打印模板中所有的可用变量，以此来找到我们所需要的变量，并将它们在模板中打印出来。

在本节视频中，我们仅仅展示了在page模板中使用kint来打印变量，你还可以在其他的模板中，使用类似的方法来查看他们各自可用的变量。

最后，你要注意的是，这个kint生成的区域左边的加号，一般情况下，不要点击。因为，这个按钮会展开这个区域的每一层。这样，往往会导致页面卡死。

html.html.twig模板

之前我们打开了page模板，并对他做了修改。

这里我们再来看一下html模板。这个模板的代码很短：

{#
/**
 * @file
 * Theme override for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain one or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 */
#}
<!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>

在这个模板中输出了DOCTYPE、html、head、body标签，这些是html页面所不可缺少的东西。然后还有一些变量，比如用于输出标题、css和js的变量，用于输出页面模板的变量page。这里的js，会根据库中的声明来判断应该将文件放在页面的顶部head标签中，还是放在页面的底部。

{{ page }}

这条语句用于输出嵌套在html模板中的page模板。

{{ page_top }}
{{ page_bottom }}

用于输出页面上方和下方附加的区域，比如我们之前提到过的管理员登录之后，在页面顶部显示的管理菜单就是从这里的page top输出的。

而page模板（page.html.twig），则用来输出body标签中的全部内容。

本书共102小节。


评论 (1)