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='/th_templates/bootstrap336/css/bootstrap.css')
    link(rel='stylesheet', href='/th_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');
})

ไฟล์เส้นทางของฉัน 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'
    });
});

}

person Martin    schedule 21.09.2016    source แหล่งที่มา
comment
ดู pugjs.org/ language/extends.html ใน index.pug ของคุณที่คุณต้องใช้ extends layout.pug เพื่อขยายlayout.pug คุณต้องมี about.pug ซึ่งขยายเลย์เอาต์ด้วย จากนั้นใช้ res.render('index... และ res.render('about...   -  person Molda    schedule 21.09.2016
comment
ขอบคุณมาก @Molda จัดการได้แล้ว แค่ต้องคิดให้แตกต่างจากวิธีที่ฉันทำตามปกติ   -  person Martin    schedule 22.09.2016


คำตอบ (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 พื้นฐานของหน้าเว็บของคุณไว้ด้วย จากนั้นในหน้าเกี่ยวกับและดัชนีของคุณคุณสามารถดำเนินการดังต่อไปนี้

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

จากนั้น คุณต้องขยายหนึ่งไดเรกทอรีขึ้น เช่น extends ../layout หวังว่านี่จะช่วยคนที่เริ่มต้นในโลกเทมเพลตนี้ ไชโย ;)

person sigfried    schedule 04.10.2016