第三章：模板扩展.pdfVIP

第三章：模板扩展 在第⼆章中，我们看到了Tornado模板系统如何简单地传递信息给⽹页，使你在插⼊ 态数据时保持⽹页标记的整洁。然⽽，⼤多数站点希望复⽤像header 、footer和布局 ⽹格这样的内容。在这⼀章中，我们将看到如何使⽤扩展Tornado模板或UI模块完成 这⼀⼯作。 3.1 块和替换 3.1.1 块基础 3.1.2 模板练习：Burts Book 3.1.3 ⾃ 转义 3.2 UI模块 3.2.1 基础模块使⽤ 3.2.2 模块深⼊ 3.2.3 嵌⼊JavaScript和CSS 3.3 总结 3.1 块和替换 当你花时间为你的Web应⽤建⽴和制定模板时，希望像你的后端 ython代码⼀样重⽤ 你的前端代码似乎只是合逻辑的，不是吗？幸运的是，Tornado可以让你做到这⼀ 点。Tornado通过extends和block语句⽀持模板继承，这就让你拥有了编写能够在合适 的地⽅复⽤的流体模板的控制权和灵活性。 为了扩展⼀个已经存在的模板，你只需要在新的模板⽂件的顶部放上⼀句{% extends filename.html %}。⽐如，为了在新模板中扩展⼀个⽗模板 （在这 ⾥假设为main .html ），你可以这样使⽤： {% extends main.html %} 这就使得新⽂件继承main .html的所有标签，并且覆写为期望的内容。 3.1.1 块基础 扩展⼀个模板使你复⽤之前写过的代码更加简单，但是这并不会为你提供所有的东 西，除⾮你可以适应并改变那些之前的模板。所以，block语句出现了。 ⼀个块语句压缩了⼀些当你扩展时可能想要改变的模板元素。⽐如，为了使⽤⼀个能 够根据不同页覆写的 态header块，你可以在⽗模板main .html 中添加如下代码： header {% block header %}{% end %} /header 然后，为了在⼦模板index .html 中覆写{% block header %}{% end %}部分，你 可以使⽤块的名字引⽤，并把任何你想要的内容放到其中。 {% block header %}{% end %} {% block header %} h1Hello world!/h1 {% end %} 任何继承这个模板的⽂件都可以包含它⾃⼰的{% block header %}和{% end %}，然后把⼀些不同的东西加进去。 为了在Web应⽤中调⽤这个⼦模板，你可以在你的 ython脚本中很轻松地渲染它，就 像之前你渲染其他模板那样： class MainHandler tornado.web.RequestHandler): def get self): self.render index .html) 所以此时，main .html 中的body块在加载时会被以index .html 中的信息Hello world !填充 （参见图3-1）。 图3-1 Hello world ! 我们已经可以看到这种⽅法在处理整体页⾯结构和节约多页⾯⽹站的开发时间上多么 有⽤。更好的是，你可以为每个页⾯使⽤多个块，此时像header和footer这样的 态元 素将会被包含在同⼀个流程中。 下⾯是⼀个在⽗模板main .html 中使⽤多个块的例⼦： html body header {% block header %}{% end %} /header content {% block body %}{% end %} /content footer {% block footer %}{% end %} /footer /body /html 当我们扩展⽗模板main .html时，可以在⼦模板index .html 中引⽤这些块。 {% extends main.html %} {% block header %} h1{{ header_text }}/h1 {% end %} {% block body %} pHello from the child templat