jadeテンプレートにnavbarを追加する

Question

私はnodejs、express、およびbootstrapを使用しています。

これはかなり一般的な質問のようですが、私はどこで探しているのか正確には分かりません。私はlayout.jadeファイルとindex.jadeファイルを持っていて、index.jadeファイルにレイアウトを使用しています。で、私はここに...私のナビゲーションバーを表示するために得ることができない問題が私のコードです：

layout.jade

doctype html 
html 
    head 
    title= title 

    block styles 

     link(rel='stylesheet', href='/stylesheets/static/bootstrap.css') 

    body 

    block navBar 
     div.container 
      ul.col-md-12.row 
       a(href="#") 
        li.col-md-3.col-md-offset-1 Register 
       a(href="#") 
        li.col-md-3 Login 
       a(href="#") 
        li.col-md-3 About Chatbox 
    block content 

index.jade

extends layout 

block append styles 

    link(rel='stylesheet', href='/stylesheets/homePage/style.css') 

block navBar  

block content 

    div.box 
     h1.col-md-4.col-md-offset-4 Chatbox 

ここでテンプレートについて理解していないのは何ですか？ブロック部分の下にあったものはすべてページに挿入されるだけで、ブロックコンテンツはnavBarの内部にないので、navBarの下にあるようにコンテンツに追加することができます。

唯一表示されるのは、index.jadeファイルのブロックコンテンツに入れたものです。どうすれば修正できますか？

Answer 1

index.jadeファイルにextends layoutと書き込むと、layout.jadeファイルのすべてが含まれることになります。

ブロックは、どのファイルがレンダリングされているかに応じてコードを変更する場合に使用します。この場合、あなたはlayout.jadeにblock navBarが含まれている必要があることを言っている：

div.container 
      ul.col-md-12.row 
       a(href="#") 
        li.col-md-3.col-md-offset-1 Register 
       a(href="#") 
        li.col-md-3 Login 
       a(href="#") 
        li.col-md-3 About Chatbox 

は、その後、あなたのindex.jadeに再度 block navBarを定義し、layout.jade内の定義を上書きしています。 block navBarにはindex.jadeのコンテンツがないため、何もレンダリングされていないため、index.jadeから block navBar宣言を削除するだけです。

block navBar  
    //nothing here means you are telling it to be empty. 
block content 

基本的に、それはあなたが知っていればあなたはどこでもあなたがいる限り、あなたのlayout.jadeでそれを宣言し、すべてのあなたにextends layoutを使用するように、すべてのそれのためのブロックを必要としないナビゲーションバーを使用しようとしていることを意味し他のファイル。ページ間で変更されるコードに対してのみブロックを使用してください。

Answer 2

tutorialの "Componente Navbar"までスクロールします。 スペイン語ですが、コードを読むだけで済みます。