基础篇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模板中常用的变量,拷贝其中一个,比如 loggedin 替换“hello drupal” 。 两对大括号是twig用来输出表达式结果的,关于twig,我们以后还会专门讲。

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

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

devel kint

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

{{ kint() }}

这个语句是由我们在第14节所安装的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标签中的全部内容。

本书共83小节:

评论 (写第一个评论)