gpt4 book ai didi

python - 如何正确继承使用 Bootstrap 的 flask 中的模板?

转载 作者:太空狗 更新时间:2023-10-29 13:51:04 28 4
gpt4 key购买 nike

似乎如果我使用 {% extends "base.html"%} 它会正确继承模板,但导航栏不使用 Bootstrap 。

如果我使用 {% 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 %}

最佳答案

当使用模板继承时,通常在基础模板中定义布局结构,然后在 block 中提供每个子模板的具体细节(如 contentpage_content 等)。

在上面的例子中,base模板本身是一个子模板(“bootstrap/base.html”),可以使用相同的模式。

与其定义 HTML 标签(如 <html><head> 等),不如使用相应的 block 。 Flask Bootstrap defines这些 block 对应于这些 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 中 block ,我们正在使用 super()带上 Flask bootstrap 在 head 中定义的任何内容 block (可能正在加载 CSS、JS 文件等)。这允许 base.html用于自定义 head 的模板部分。但是,如果您不需要此控件而只想指定页面标题,则可以避免覆盖 head block 并定义 title堵塞。为此更改 base.html文件开始如:

{% extends "bootstrap/base.html" %}

{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}

删除 {% block head %} ...部分。然后修改你的index.html定义 page_name 的模板 block 而不是 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阻止在那里,覆盖 title阻止 base.html .

关于python - 如何正确继承使用 Bootstrap 的 flask 中的模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33272131/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com