如何正确继承烧瓶中使用引导程序的模板？
Posted
技术标签:
【中文标题】如何正确继承烧瓶中使用引导程序的模板？【英文标题】：How do I correctly inherit templates in flask that use bootstrap? 【发布时间】：2016-01-21 04:57:56 【问题描述】：似乎如果我使用% extends "base.html" % 它会正确继承模板，但导航栏不使用引导程序。
如果我使用% extends "bootstrap/base.html" %，它甚至都不起作用。我没有收到错误，但它只是将标题设置为索引，然后页面为空白。
另一个注意事项：我让导航栏显示的唯一方法是直接将其放入 index.html 并使用 % extends "bootstrap/base.html" %
我正在使用 Miguel Grinberg 的 Flask Web Development，除了明显的内容外，代码是相同的。
我做错了什么？有没有人有很好的资源来慢慢跳入 Flask，而不仅仅是先潜水？我无法理解那些挑剔的细节。
base.html：
% extends "bootstrap/base.html" %
<html>
<head>
% block head %
<title>% block title %% endblock % - MyFlask</title>
% endblock %
</head>
<body>
% block navbar %
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/bootstrap"></a></li>
</ul>
</div>
</div>
</div>
% endblock %
% block content %
<div class="container">
% block page_content %% endblock %
</div>
% endblock %
</body>
</html>
index.html：
% extends "base.html" %
% block title %Index% endblock %
% block page_content %
<h3>Session info:</h3>
<p><b>Browser:</b> browser </p>
% endblock %
【问题讨论】：
【参考方案1】：使用模板继承时，通常在基本模板中定义布局结构，然后在块中提供每个子模板的具体细节（如content、page_content 等）。
在上面的示例中，base 模板本身是子模板（属于“bootstrap/base.html”），可以使用相同的模式。
与其定义 HTML 标记（如<html>、<head> 等），不如使用相应的块。 Flask bootstrap defines 这样的块对应每个 HTML 标签，子模板可以覆盖。
所以如果你改变base.html模板如下，那么index模板可以使用bootstrap/base中定义的布局：
% extends "bootstrap/base.html" %
% block head %
super()
<title>% block title %% endblock % - MyFlask</title>
% endblock %
% block navbar %
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/bootstrap"></a></li>
</ul>
</div>
</div>
</div>
% endblock %
% block content %
<div class="container">
% block page_content %% endblock %
</div>
% endblock %
请注意，在head 块中，我们使用super() 来引入在head 块中定义的任何Flask 引导程序（可以加载CSS、JS 文件等）。这允许base.html 模板自定义head 部分。但是，如果您不需要此控件并且只想指定页面的标题，那么您可以避免覆盖head 块并只需定义title 块。为此，请更改 base.html 文件以开始：
% extends "bootstrap/base.html" %
% block title %% block page_name %% endblock % - MyFlask% endblock %
删除 % block head % ... 部分。
然后修改您的index.html 模板以定义page_name 块而不是title：
% extends "base.html" %
% block page_name %Index% endblock %
% block page_content %
<h3>Session info:</h3>
<p><b>Browser:</b> browser </p>
% endblock %
现在索引页面的标题将是“Index - MyFlask”，因此您可以为所有页面的标题设置一个通用后缀。
或者，如果您需要每个页面都有自己的特定标题，您可以在其中定义 title 块，覆盖 base.html 中的 title 块。
【讨论】：
非常感谢！你是救生员。只有一个问题，它显示<title>和块% block title %。可能只使用% block title % 是更好的方法。以上是关于如何正确继承烧瓶中使用引导程序的模板？的主要内容，如果未能解决你的问题，请参考以下文章