神社

2016-04-19 2 views
1

さて{%は%を拡張する}ので、私はこの最初のHTMLファイル(header.html)を有する:神社

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>M4A</title> 
{% load staticfiles %} 
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" /> 
<link rel="icon" href="../../static/image/logo.png"> 
</head> 
<body class="body" style="background-color:#f9f9f9"> 
{% block content %} 
    <ul> 
     <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li> 
     <li><a href="/movies">Movies</a></li> 
     <li><a class="left" href="">Search</a></li> 
     <li><a class="left" href="/profile/">Profile</a></li> 
     <li><a class="left" href="#about">Explore</a></li> 
    </ul> 
{% endblock %} 
</body> 
</html> 

をそして私はこの他方(home.html)を有する:

{% extends "START/header.html" %} 

{% block content %} 

<p> TEST</p> <!-- for example --> 

{% endblock %} 

しかし、2番目のファイルを実行しても実際には拡張されない場合、他のHTMLファイルの本体の内容を置き換えるように見えます。背景色はまだ私のCSSファイルのものですが、読んでいると確信しています。私は何が欠けていますか?

答えて

1

あなたはそれを交換したいいけない場合

{% block content %} 

あなたのheader.htmlに別の名前を使用する必要がありますあなたのhome.htmlの同じブロックのタグを使用するときは、本体を交換します。あなたが使用することができます。また

{{ block.super }} 

あなたはブロックのコンテンツデータを拡張したい場合は、テンプレートを拡張は異なる問題だ気づきます。

+0

ありがとう! {%block content%}タグを{%endblock%}の直前に配置します –

0

あなたが期待していることはわかりません。

Jinja documentation about templatesは、ブロックが何をするかについてかなり明確である:

すべてblockタグは子テンプレートがテンプレートでこれらのプレースホルダを無効にすることができるテンプレートエンジンを教えてくれているん。

この例では、基本テンプレート(header.html)には、そのブロック内のすべてのコンテンツブロックのデフォルト値が設定されています。 home.htmlに値を設定すると、を別のブロックでデフォルト値に上書きします。あなたは、単に次のようにテンプレートを手直し、あなたのナビゲーションメニューの下にコンテンツを追加にしたい場合は

:ボディbackgoundを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>M4A</title> 
{% load staticfiles %} 
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" /> 
<link rel="icon" href="../../static/image/logo.png"> 
</head> 
<body class="body" style="background-color:#f9f9f9"> 
    <ul> 
    <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li> 
    <li><a href="/movies">Movies</a></li> 
    <li><a class="left" href="">Search</a></li> 
    <li><a class="left" href="/profile/">Profile</a></li> 
    <li><a class="left" href="#about">Explore</a></li> 
</ul> 
{% block content %}<p>This will appear if you don't set a block in the inheriting template.</p>{% endblock %} 
</body> 
</html> 
0
<!DOCTYPE html> 
    <html lang="en"> 

    <head> 
    <meta charset="UTF-8"> 
    <title>M4A</title> 
    {% load staticfiles %} 
    <link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" /> 
    <link rel="icon" href="../../static/image/logo.png"> 
    </head> 

    {% block content %} 
    <body class="body" style="background-color:#f9f9f9"> 
     <ul> 
      <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li> 
      <li><a href="/movies">Movies</a></li> 
      <li><a class="left" href="">Search</a></li> 
      <li><a class="left" href="/profile/">Profile</a></li> 
      <li><a class="left" href="#about">Explore</a></li> 
     </ul> 
    </body> 
    {% endblock %} 

    </html> 

が内部ブロックで体を作り、変更

{% extends "START/header.html" %} 

{% block content %} 
<body class="body" style="background-color:#f23d49"> 
    <p> TEST</p> <!-- for example --> 
</body> 
{% endblock %} 
関連する問題