【问题标题】：Node.js, pug templatesNode.js，哈巴狗模板
【发布时间】：2016-09-21 14:54:53
【问题描述】：

使用上述方法非常新，到目前为止一切都很好。我只是在做一个简单的测试站点来了解情况。

有一个模板和两个页面（索引和关于）。我无法弄清楚并且我已经阅读了有关此事的各种网站，是如何使用单个模板为两个页面提供不同的内容。我可能没有做对或做错事，所以如果有人能指出我正确的方向或提供好的工作示例。它会帮助我无穷无尽。

模板

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

基本网络服务器

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

}

【问题讨论】：

在你的 index.pug 中看到这个pugjs.org/language/extends.html 你需要使用extends layout.pug 来扩展 layout.pug，你还需要 about.pug 来扩展布局。然后使用res.render('index... 和res.render('about...
非常感谢@Molda，整理好了，只是想与我平时做事的方式不同。

标签： javascript node.js templates pug

【解决方案1】：

这真的很简单，你只需要在你的文件中使用 extends 语法。我会写一个小例子:)。

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

注意：extends 将在您的目录中查找 layout.pug，在我的情况下，模板位于同一级别，也称为同一目录，但如果您具有以下文件夹结构，如：

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

然后您必须像扩展 ../layout 那样扩展一个目录。希望这对从这个模板世界开始的人有所帮助。干杯；）

【讨论】：