すべてのテンプレートにナビゲーションバーを追加します

すべてのページにナビゲーションバーを表示します。 PHPでは、ナビゲーションバーを作成して他のページに含めることにしました。ナビゲーションバーテンプレートを他のテンプレートに含めるか拡張しようとしましたが、動作しませんでした。「これはホームページです」と表示されます。すべてのテンプレートにナビゲーションバーを正しく含めるにはどうすればよいですか？すべてのテンプレートにナビゲーションバーを追加します

layout.html

<!doctype html> 
<html> 
    <body> 
     {% block navbar %} 
      <style> 
       body { 
        margin: 0; 
        padding: 0; 
       } 

       div{ 
        background: #333; 
        color: #f9f9f9; 
        width: 100%; 
        height: 50px; 
        line-height: 50px; 
        text-align: center; 
       } 
      </style> 

      <div>NAVBAR</div> 
     {% endblock %} 

     {% block content %} 
     {% endblock %} 
    </body> 
</html>

index.html

This is the home page. 
{% extends "layout.html" %} 

{% block navbar %} {% endblock %} 

{% block content %} 
    <h1>This is the homepage!</h1> 
{% endblock %}

出典

2015-09-14 Tony Lee

すべてのページに共通するレイアウトとナビゲーションで基本テンプレートを作成します。次に、このテンプレートを拡張して実際のページを作成します。他のテンプレートで上書きできるブロックを基本テンプレートに追加します。

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title>{% block title %} - My Site</title> 
    </head> 
    <body> 
     <div>Navbar</div> 
     {% block content %}{% endblock %} 
    </body> 
</html>

index.html

{% extends 'base.html' %} 

{% block content %} 
<h3>{% block title %}Home{% endblock %}</h3> 
<p>Hello, World!</p> 
{% endblock %}

ナビゲーションバーは、単にベーステンプレートに定義されていることを注意base.html

。それはブロックを必要とせず、子テンプレートからのコンテンツはそれの後に置かれます。

出典

2015-09-14 14:39:05 davidism

@TonyLeeはあなたの次の質問に反抗するために、[各テンプレートのナビゲーションバーにアクティブリンクを設定する方法はこちら]（http://stackoverflow.com/a/21992246/400617） – davidism

-1

あなたはすべてのページに同じナビゲーションバーを使用する場合は、layout.htmlで{% block navbar %}...{% endblock %}を必要としません。あるいは、hereのように{{ super() }}を使用する必要があります。

出典

2015-09-14 14:34:22 David

すべてのページにナビゲーションバーを含めることができます。

nav.html

<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 

    div{ 
     background: #333; 
     color: #f9f9f9; 
     width: 100%; 
     height: 50px; 
     line-height: 50px; 
     text-align: center; 
    } 
</style> 

<div>NAVBAR</div>

layout.html：時々、それはあなたのWebページをデザインするための良い方法です{% include 'nav.html' %}

<!doctype html> 
<html> 
    <body> 
    {% include 'nav.html' %} 

    {% block content %} 
    {% endblock %} 
    </body> 
</html>

index.html

{% extends "layout.html" %} 

{% block content %} 
    <h1>This is the homepage!</h1> 
{% endblock %}

に注意してください。たとえば、head.html、nav.html、footer.htmlなどのようにページを分割します。それらを使用するにはlayout.htmlに含めることができます。

出典

2015-09-15 13:04:06

ありがとうございました。 '{％include 'nav.html'％}'は私が探していたものです。私は明示的に私のベースとnavbar（等）をnavbarのスワッピング、簡単な編集を可能にするために別のファイルに保管したかった。しかし、navbar.htmlをbase.htmlに "インポート"する方法が見つかりませんでした。 –

すべてのテンプレートにナビゲーションバーを追加します

答えて

関連する問題