इसे पूरा करना चाहते हैं:

<html>
<!-- head -->
<head>
    <title>SpaceGame2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="css/spaceGame.css">
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
</head>
<body>

    <p class="testing"></p> html page

    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>

</html>

इसे 3 अलग-अलग फाइलों, head.html, footer.html और main.html में अलग करके। main.html अलग-अलग होंगे लेकिन अन्य दो समान होंगे।

कोड:

var express = require('express');
var partial = require('express-partial');
var app = express();

app.listen(3000, function() {
    console.log('Listening on port 3000');
});

var path = require("path");
app.use(express.static(path.resolve('./')));
app.use(express.static(path.resolve('./Static')))
app.use(express.static(path.resolve('./Views')))
var partial = require('express-partial');
var url = require('url');

app.get('/*', function(req, res) {
    var path = require("path");

    var pathname = url.parse(req.url).pathname;
    var originPoint = GetOriginPoint(pathname);
    if (pathname == "" || pathname == "/") {
        pathname = "/OverView";
    }

    // res.renderPartials({
    //     Head: { data: path.resolve('./Views/Layout/head') },
    //     Main: { data: path.resolve('./Views' + originPoint + pathname + '.html') },
    //     Head: { data: path.resolve('./Views/Layout/footer') },
    // });


     res.sendFile(path.resolve('./Views' + originPoint + pathname + '.html'));
});

एचटीएमएल टैग में फाइलों को आयात करने का प्रयास किया, रेंडरपार्टियल का उपयोग करने का प्रयास किया और यह काम नहीं किया, एकमात्र तरीका मुझे पता है कि मैं यह कर सकता हूं मुख्य पृष्ठ लोड करके और एक कस्टम स्क्रिप्ट है जो सर्वर से दो एचटीएमएल पेज लाती है लेकिन यह है वांछित नहीं, मुझे लगता है कि ऐसा कुछ है:

    app.get('/', function(req, res) {
       var content = [];

      content.push("head.html")
      content.push("main.html")
      content.push("footer.html")

     res.sendFile(content);

    });
2
ThunD3eR 1 सितंबर 2017, 17:27

2 जवाब

सबसे बढ़िया उत्तर

कुछ विचार करने के बाद मैंने इसे हल करने के लिए एक्सप्रेस-हैंडलरबार के साथ जाने का फैसला किया:

var hbs = require('express-handlebars');

app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: orgininPath.resolve('./Views/Layout/') }));
app.set('view engine', 'hbs');

एचबीएस फ़ाइल:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" type="text/css" href="/Static/css/spaceGame.css">
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
    <title>{{title}}</title>
</head>
<body>
    {{{body}}}

        <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="/Static/script/someTest.js"></script>
</body>
</html>
2
ThunD3eR 4 सितंबर 2017, 16:21

EJS टेम्प्लेटिंग भाषा w/ एक्सप्रेस का उपयोग करके आप अपने HTML को चिह्नित करने के किसी भी लक्ष्य तक पहुंचने में सक्षम होंगे। बस npm के माध्यम से इंस्टॉल करें (उदाहरण: npm link ejs अपने प्रोजेक्ट स्थान पर)।

फिर एक्सप्रेस इंजन को ejs `app.set('view engine', 'ejs') पर सेट करें;

ऐसा करने के बाद बस एक render विधि को कॉल करें

app.get('/', (req, res) => {
  // render `index.ejs` with some data
  res.render('index', { variable: 'value' })
});
1
Adam Bright 1 सितंबर 2017, 17:38
एक तेजी से पढ़ने के रूप को देखते हुए मुझे अपने एचटीएमएल में कुछ प्रकार के मूल्य संकेतक की आवश्यकता होगी, जैसे <% यहां हेड%> जो मुझे नहीं चाहिए। मैं एक के रूप में 3 एचटीएमएल दस्तावेज़ जोड़ना चाहता हूं और उन्हें क्लाइंट को भेजना चाहता हूं, क्या यह संभव है?
 – 
ThunD3eR
1 सितंबर 2017, 17:43