Node.js、pug templates

Question

上記を使用するのは非常に新しいもので、今のところとても良いです。私は物事の周りに頭を浮かべるために簡単なテストサイトをやっています。

は、単一のテンプレートと2ページ（約インデックス&）を得ました。私が理解できないことと、この問題に関するさまざまなウェブサイトを読んだことは、単一のテンプレートを使用して2つのページにどのように異なるコンテンツを持たせることができるかです。私はおそらく何か正しいことをしていないか、まったく間違っているので、誰かが正しい方向に私を向けることができたり、良い動作例を提供したりすることができます。それは私の終わりを助けるだろう。

テンプレート

doctype html 
html(lang="en") 
head 
    title= metaTitle 
    meta(charset='utf-8') 
    meta(http-equiv="X-UA-Compatible", content="IE=edge") 
    meta(name="viewport", content="width=device-width, initial-scale=1") 
    link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Open+Sans') 
    link(rel='stylesheet', href='_templates/bootstrap336/css/bootstrap.css') 
    link(rel='stylesheet', href='_templates/css/generic.css') 

body 
    .container 
     header 
      #header 
       h1 Node.js 

     nav.navbar.navbar-default 
      include shared/nav.pug 

     section 

      h3 #{pageHeading} 

      <!-- Want my content here --> 

      p 
       img(src='/_templates/images/reg_icon.png') 

     footer 
      .row 
       .col-xs-12.col-sm-6 
        Copyright &copy; 2016 
       .col-xs-12.col-sm-6.text-right 
        Privacy 

    script(src='_includes/jquery/jquery-2.2.3.min.js') 
    script(src='_includes/jquery/jquery-ui-1114/jquery-ui.js') 
    script(src='_templates/bootstrap336/js/bootstrap.min.js') 

基本的なWebサーバ

//Basic webserver 
var express = require('express'), 
app = express(); 

require('./routes')(app); 

module.exports=app; 

//config 
app.set('view engine','pug'); 
app.set('views',__dirname + '/public/_templates'); 

//standard 
app.use(express.static(__dirname + '/public')); 

//Starts and listens 
var port = process.env.PORT || 3000; 
app.listen(port, function() { 
    console.log("Listening on " + port+" | In folder " + __dirname + '\\public'); 
}) 

マイroutes.jsが

module.exports = function(app){ 

var coretitle="Node.js :: Test"; 

app.get('/', function (req, res) { 
    res.render('index', { 
     metaTitle : coretitle, 
     pageHeading : 'First attempt' 
    }); 
}); 

app.get('/about', function (req, res) { 
    res.render('index', { 
     metaTitle : coretitle, 
     pageHeading : 'All About This' 
    }); 
}); 

} 

Answer 1

を提出それはあなただけがあなたに構文を拡張使用する必要があり、本当に簡単ですファイル。私は小さな例を書く:)。

layout.pug

//ここでは、あなたの基本的なHTMLテンプレートを定義し、

doctype html 
html 
    head 
    title Pug Example 
    meta(name="viewport" content="width=device-width, initial-scale=1") 
    link(rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.min.css") 
    link(rel="stylesheet" href="/css/payment.css") 
    script(src="/components/jquery/dist/jquery.min.js") 
    script(src="/components/bootstrap/dist/js/bootstrap.min.js") 

    body 
    div.container 
    block content 

お知らせに従って、このファイルには、私はちょうどの基本的なHTML5骨格を含めましたようになりますあなたのページ。あなたのaboutとindexページでは、次のように進むことができます。

index.pug

extends layout 
block content 
    .row 
    .col-md-8 
     p Some info right here :D 

注：が、私の場合には、テンプレートが同じディレクトリ別名、同じレベルにある、はlayout.pugのためにあなたのディレクトリになります拡張あなたのような、以下のフォルダ構造がある場合しかし：

/public/views/ 
-layout.pug 
/main/ 
-index.pug 
-about.pug 

を次に、電子のように一つのディレクトリをスケールアップしなければなりませんxtends ../layout。このテンプレートの世界で始まる誰かを助けてくれることを願っています。乾杯;）