Node.js, templat pug

Sangat sangat baru dalam menggunakan cara di atas dan sejauh ini bagus. Saya hanya melakukan situs pengujian sederhana untuk memahami berbagai hal.

Punya satu template dan dua halaman (indeks & tentang). Apa yang tidak dapat saya pahami dan saya telah membaca berbagai situs web tentang masalah ini, adalah bagaimana saya dapat memiliki konten berbeda untuk dua halaman menggunakan satu templat. Saya mungkin tidak melakukan sesuatu dengan benar atau melakukan sesuatu yang salah, jadi jika ada yang bisa mengarahkan saya ke arah yang benar atau memberikan contoh kerja yang baik. itu akan membantuku selamanya.

Templat

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='/id_templates/bootstrap336/css/bootstrap.css')
    link(rel='stylesheet', href='/id_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')

Server web dasar

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

File rute.js saya

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 sumber
comment
Lihat pugjs.org/lingual/extends.html ini di index.pug yang perlu Anda gunakan extends layout.pug untuk memperluas layout.pug, Anda juga memerlukan about.pug yang juga memperluas tata letak. Kemudian gunakan res.render('index... dan res.render('about...   -  person Molda    schedule 21.09.2016
comment
Terima kasih banyak @Molda, sudah beres, hanya berpikir berbeda dari cara saya biasanya melakukan sesuatu.   -  person Martin    schedule 22.09.2016


Jawaban (1)


Ini sangat sederhana, Anda hanya perlu menggunakan sintaks extends di file Anda. Saya akan menulis contoh kecil :).

tata letak.pug

//Di sini Anda mendefinisikan template html dasar Anda, dan akan menjadi sebagai berikut

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

Perhatikan, dalam file ini saya baru saja menyertakan kerangka dasar HTML5 halaman Anda. Kemudian di halaman tentang dan indeks Anda, Anda dapat melanjutkan sebagai berikut.

index.pug

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

CATATAN: extends akan mencari layout.pug di direktori Anda, dalam kasus saya templatnya berada di level yang sama, alias direktori yang sama, tetapi jika Anda memiliki yang berikut ini struktur folder seperti:

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

Maka Anda harus meningkatkan skala satu direktori seperti extends ../layout. Semoga ini bisa membantu seseorang yang memulai di dunia templat ini. Bersulang ;)

person sigfried    schedule 04.10.2016