Verwenden von HTML in Express anstelle von Jade

103

Wie entferne ich Jade, wenn ich Express mit Node.JS verwende? Ich möchte nur einfaches HTML verwenden. In anderen Artikeln habe ich gesehen, dass Leute app.register () empfohlen haben, das jetzt in der neuesten Version veraltet ist.

html node.js express pug Sanchit Gupta
quelle

Antworten:

78

Sie können es so machen:

  1. Installieren Sie ejs:

    npm install ejs

  2. Legen Sie Ihre Template-Engine in app.js als ejs fest

    // app.js
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

  3. Jetzt können Sie in Ihrer Routendatei Vorlagenvariablen zuweisen 

    // ./routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

  4. Anschließend können Sie Ihre HTML-Ansicht im Verzeichnis / views erstellen.

Biwek
quelle
2
Ich habe gerade angefangen, node.js zu verwenden. Die Lösung ist mir nicht klar. Ich habe eine kleine HTML-Website. Ich benötige node.js, um E-Mails mit nodemailer über meine Website zu senden. Ich habe alles Notwendige installiert. Ich muss mir jedoch vorstellen, was in der Datei app.js enthalten sein soll, damit meine Website mit Express ausgeführt wird
user2457956
4
Wie drucke ich die Variable titlein einer HTML-Datei?
Meister Yoda
3
Wenn sich noch jemand fragt, wie die Variable gedruckt werden soll, wie @MasterYoda gefragt hat, können Sie sie wie folgt im HTML-Format drucken: <% = title%>
Lucas Meine
62

Jade akzeptiert auch HTML-Eingaben.
Fügen Sie einfach einen Punkt am Zeilenende hinzu, um reines HTML zu senden.
Wenn das den Trick für Sie macht, dann versuchen Sie:

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PS - HTML muss nicht geschlossen werden - das erledigt Jade automatisch.

Martin Sookael
quelle
7
Doctype 5 ist jetzt veraltet. Verwenden Sie "doctype html" als erste Zeile.
Schnorchelbra
Dokumente
Alexander Taubenkorb
18

Ab Express 3 können Sie einfach verwenden response.sendFile

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});)

Aus der offiziellen Express-API-Referenz :

res.sendfile(path, [options], [fn]])

Übertragen Sie die Datei unter dem angegebenen Pfad.

Das Standard-Antwortheaderfeld für den Inhaltstyp basiert automatisch auf der Dateinamenerweiterung. Der Rückruf fn(err)wird aufgerufen, wenn die Übertragung abgeschlossen ist oder wenn ein Fehler auftritt.

Warnung

res.sendFileStellt clientseitigen Cache über http-Cache-Header bereit, zwischenspeichert jedoch keine Dateiinhalte auf der Serverseite. Der obige Code wird bei jeder Anforderung auf die Festplatte übertragen .

Laconbass
quelle
2
Ich glaube, das OP möchte immer noch eine Art Vorlage verwenden, nur mit normaler HTML-Syntax. sendfileSie können keine Vorlagen erstellen, da nur Bytes aus einer Datei gesendet werden. Außerdem würde sendfileich davon abraten, dies zu verwenden, da dies bedeutet, dass Sie jedes Mal, wenn eine Anfrage eingeht, auf die Festplatte stoßen - ein großer Engpass. Bei stark frequentierten Seiten sollten Sie das In-Memory-Caching wirklich durchführen.
Josh3736
1
@ josh3736 Wenn Sie mit der OP-Absicht Recht haben, sollte die Frage verbessert werden. Sie haben Recht, wenn Sie bei jeder Anfrage auf die Festplatte klicken. Ich werde meine Antwort verbessern, um vor dieser Tatsache zu warnen. Bitte überlegen Sie, Ihre zu verbessern, um vor Folgendem zu warnen: Wenn Sie eine angepasste Engine implementieren, müssen Sie auch die Fangfunktion implementieren (falls gewünscht), diese wird nicht per Express verarbeitet.
Laconbass
17

Meiner Meinung nach ist es etwas umständlich, etwas so Großes wie ejs nur zum Lesen von HTML-Dateien zu verwenden. Ich habe gerade meine eigene Template-Engine für HTML-Dateien geschrieben, die bemerkenswert einfach ist. Die Datei sieht folgendermaßen aus:

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

Ich habe meine htmlEngine genannt, und Sie verwenden sie einfach, indem Sie sagen:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');
kevin.groat
quelle
11

app.register()wurde nicht abgeschrieben, sondern wurde nur in umbenannt, app.engine()da Express 3 die Art und Weise ändert, wie Template-Engines behandelt werden .

Die Kompatibilität der Express 2.x Template Engine erforderte den folgenden Modulexport:

exports.compile = function(templateString, options) {
    return a Function;
};

Express 3.x Template Engines sollten Folgendes exportieren:

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

Wenn eine Template-Engine diese Methode nicht verfügbar macht, haben Sie kein Pech. Mit dieser app.engine()Methode können Sie jede Funktion einer Erweiterung zuordnen. Angenommen, Sie hatten eine Markdown-Bibliothek und wollten .md-Dateien rendern, aber diese Bibliothek unterstützte Express nicht. Ihr app.engine()Aufruf sieht möglicherweise folgendermaßen aus:

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

Wenn Sie nach einer Template-Engine suchen, mit der Sie "einfaches" HTML verwenden können, empfehle ich doT, da es extrem schnell ist .

Denken Sie natürlich daran, dass das Express 3-Ansichtsmodell das Zwischenspeichern der Ansicht für Sie (oder Ihre Template-Engine) überlässt. In einer Produktionsumgebung möchten Sie wahrscheinlich Ihre Ansichten im Speicher zwischenspeichern, damit Sie nicht bei jeder Anforderung Festplatten-E / A ausführen.

josh3736
quelle
Bitte werfen Sie einen Blick auf meine Antwort. Ihre Antwort erklärt perfekt, wie Sie Template-Engines registrieren, aber es gibt eine viel einfachere Möglichkeit, einfache HTML-Dateien zu übertragen.
Laconbass
@ josh3736: Ihr "extrem schneller" Hyperlink funktioniert in Firefox 41, führt jedoch keine Tests in Chromium Version 45.0.2454.101 Ubuntu 14.04 (64-Bit) aus. Ich wundere mich warum.
Lonnie Best
4

Führen Sie die folgenden Schritte aus, damit die Render-Engine HTML anstelle von Jade akzeptiert.

  1. Installieren Sie Consolidate und wechseln Sie in Ihr Verzeichnis.

     npm install consolidate
 npm install swig

  2. Fügen Sie Ihrer Datei app.js die folgenden Zeilen hinzu

    var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', ‘html');

  3. Fügen Sie Ihre Ansichtsvorlagen als .html im Ordner "Ansichten" hinzu. Starten Sie Ihren Knotenserver neu und starten Sie die App im Browser.

Obwohl dies HTML ohne Probleme rendert, würde ich Ihnen empfehlen, JADE zu verwenden, indem Sie es lernen. Jade ist eine erstaunliche Vorlagen-Engine. Wenn Sie dies lernen, können Sie ein besseres Design und eine bessere Skalierbarkeit erzielen.

AnandShanbhag
quelle
1
Das einzige wirklich große Problem mit Jade ist die Einrückung. Wenn Sie etwas falsch machen, wird der Code nicht kompiliert. Außerdem frage ich mich, warum Jade außer der Tatsache, dass das einzige, was es tut, Code verkleinert ...
Zapper
4

Überprüfen Sie zunächst die Kompatibilitätsversion der Template-Engine anhand der folgenden Zeile

express -h

dann müssen Sie keine Ansicht aus der Liste verwenden. Wählen Sie keine Ansicht 

express --no-view myapp

Jetzt können Sie alle HTML-, CSS-, JS- und Bilder im öffentlichen Ordner verwenden.

Soubhagya Kumar Barik
quelle
3

Nun, es hört sich so an, als ob Sie statische Dateien bereitstellen möchten. Und dafür gibt es eine Seite http://expressjs.com/en/starter/static-files.html

Seltsam, dass niemand auf die Dokumentation verlinkt.

S Meaden
quelle
"Seltsam, dass niemand auf die Dokumentation verlinkt" Ich stimme zu, dass es eine triviale Angelegenheit ist, in Express eine andere Ansichtssprache zu verwenden.
Pixel 67
1

In Anbetracht dessen, dass Sie Ihre Routen bereits definiert haben oder wissen, wie es geht.

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

HINWEIS: Diese Route muss nach allen anderen platziert werden, da * alles akzeptiert.

João Rodrigues
quelle
1

Da Jade HTML unterstützt, können Sie dies tun, wenn Sie nur .html ext haben möchten

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

Dann ändern Sie einfach die Datei in den Ansichten von Jade zu HTML.

Weijing Jay Lin
quelle
Müssen Sie vor dem HTML-Markup keinen Punkt oder Punkt setzen?
Gus Crawford
1

Sie können Ihre HTML-Datei auch direkt in Ihre Jade-Datei aufnehmen

include ../../public/index.html

Ursprüngliche Antwort: Express Generator ohne Jade

Priyanshu Chauhan
quelle
-10

Wenn Sie einfaches HTML in NodeJS verwenden möchten, ohne Jade zu verwenden .. oder was auch immer:

var html = '<div>'
    + 'hello'
  + '</div>';

Persönlich mache ich das gut.

Der Vorteil ist die Einfachheit bei der Steuerung. Sie können einige Tricks verwenden, wie'<p>' + (name || '') + '</p>' ternäre .. etc.

Wenn Sie einen eingerückten Code im Browser wünschen, können Sie Folgendes tun:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

und benutze \ t oder \ n nach Belieben. Aber ich bevorzuge ohne, und es ist schneller.


quelle
Ich möchte in der Lage sein, HTML-Dateien in Express zu verwenden (vs plain Node.JS)
Sanchit Gupta
ooooohh sorry (ich bin französisch: p), also kannst du das fsModul benutzen . fs.readFile(htmlfile, 'utf8', function (err, file) {