非常非常新的使用上述和迄今如此好。我只是在做一個簡單的測試網站來讓我的頭腦發生變化。Node.js，帕格模板

得到了一個單一的模板和兩個頁面（索引&左右）。我無法弄清楚，我已閱讀過有關此問題的各種網站，我是如何使用單個模板爲這兩個頁面提供不同內容的。我可能沒有找到正確的東西或做錯事情，所以如果有人能指出我的方向正確或提供良好的工作實例。它會幫助我無盡的結局。

模板

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' 
    }); 
}); 

}

來源

2016-09-21 Martin

在你的index.pug中看到這個https://pugjs.org/language/extends.html你需要使用'extends layout.pug'來擴展layout.pug，你也需要about.pug，擴展布局。然後使用'res.render（'index ...'和'res.render（'about ...' – Molda

）非常感謝@Molda，對它進行排序，只是與我平常做事情的方式有所不同。 – Martin

它非常簡單，你只需要使用延伸語法您文件。我會寫一個小例子:)。

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你的頁面。然後在您的關於和索引頁面中，您可以按照以下步驟操作。

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。希望這有助於在這個模板世界開始的人。乾杯;）

來源

2016-10-04 18:34:25 sigfried

Node.js，帕格模板

回答

layout.pug

index.pug

相關問題