使用{% extends "base.html" %}するとテンプレートが正しく継承されるようですが、ナビゲーションバーはブートストラップを使用しません。
私が使用{% extends "bootstrap/base.html" %}した場合、それも機能しません。エラーは発生しませんが、タイトルをIndexに設定するだけで、ページが空白になります。
別の注意：ナビゲーションバーを表示する唯一の方法は、ナビゲーションバーを直接中に入れてindex.html使用することです{% extends "bootstrap/base.html" %}
私はMiguelGrinbergによるFlaskWeb Developmentを使用していますが、コードは明らかな内容を除いて同じです。
私は何が間違っているのですか？そして、最初に頭に飛び込むだけでなく、ゆっくりとフラスコに飛び込むための良いリソースを持っている人はいますか？私は少し厄介な詳細を理解するのに苦労しています。
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 %}
テンプレートの継承を使用する場合には、ベーステンプレートのレイアウトの構造を定義し、ブロック内のそれぞれの子テンプレート（のような特定の詳細を提供することが一般的であるcontent、page_contentなど）。
baseテンプレート自体が（「bootstrap / base.html」の）子テンプレートである上記の例では、同じパターンを使用できます。
代わりに（のようなHTMLタグを定義する<html>、<head>など）には対応し使用することをお勧めしますブロックを。Flaskブートストラップは、子テンプレートがオーバーライドできる、これらの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()Flaskブートストラップがheadブロックで定義したものをすべて取得するために使用していることに注意してください（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オーバーライドし、そこにブロックをtitleブロックしますbase.html。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加