Używanie HTML w Express zamiast Jade

103

Jak pozbyć się Jade podczas korzystania z Express z Node.JS? Chcę po prostu użyć zwykłego HTML. W innych artykułach widziałem, że ludzie polecali aplikację app.register (), która jest obecnie przestarzała w najnowszej wersji.

html node.js express pug Sanchit Gupta
źródło

Odpowiedzi:

78

Możesz to zrobić w ten sposób:

  1. Zainstaluj ejs:

    npm install ejs

  2. Ustaw silnik szablonów w app.js jako ejs

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

  3. Teraz w pliku trasy możesz przypisać zmienne szablonu 

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

  4. Następnie możesz utworzyć widok html w katalogu / views.

Biwek
źródło
2
Właśnie zacząłem używać node.js. Rozwiązanie nie jest dla mnie jasne. Mam małą witrynę HTML. Potrzebuję node.js do wysyłania e-maili przez moją witrynę przy użyciu nodemailer. Zainstalowałem wszystko, co wymagane. Jednak mam pomysłu, co powinno iść w pliku app.js aby moje strony działały przy użyciu express
user2457956
4
Jak wydrukować zmienną titlew pliku html?
Master Yoda,
3
Jeśli ktoś nadal zastanawia się, jak wydrukować zmienną, jak zapytał @MasterYoda, możesz wydrukować ją w ten sposób w html: <% = title%>
Lucas Meine
62

Jade akceptuje również dane wejściowe HTML.
Po prostu dodaj kropkę na końcu linii, aby rozpocząć przesyłanie czystego kodu HTML.
Jeśli to wystarczy, spróbuj:

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

PS - Nie ma potrzeby zamykania HTML - to robi automagicznie Jade.

Martin Sookael
źródło
7
Doctype 5 jest teraz przestarzały. Użyj „doctype html” jako pierwszego wiersza.
snorkelzebra
Dokumenty do kropki: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb,
18

Od Express 3 możesz po prostu użyć response.sendFile

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

Z oficjalnego odniesienia do wyraźnego interfejsu API :

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

Prześlij plik na podaną ścieżkę.

Automatycznie ustawia domyślne pole nagłówka odpowiedzi Content-Type na podstawie rozszerzenia nazwy pliku. Wywołanie zwrotne fn(err)jest wywoływane po zakończeniu przesyłania lub w przypadku wystąpienia błędu.

Ostrzeżenie

res.sendFileudostępnia pamięć podręczną po stronie klienta za pośrednictwem nagłówków pamięci podręcznej http, ale nie buforuje zawartości plików po stronie serwera. Powyższy kod trafi na dysk przy każdym żądaniu .

laconbass
źródło
2
Uważam, że OP nadal chce używać jakiegoś szablonu, tylko ze zwykłą składnią HTML. sendfilenie pozwala na tworzenie szablonów, ponieważ wysyła tylko bajty z pliku. Ponadto odradzałbym używanie w sendfileten sposób, ponieważ oznacza to, że będziesz uderzać w dysk za każdym razem, gdy pojawi się żądanie - ogromne wąskie gardło. W przypadku stron o dużym natężeniu ruchu naprawdę należy wykonywać buforowanie w pamięci.
josh3736
1
@ josh3736, jeśli masz rację co do zamiaru OP, pytanie powinno zostać poprawione. Masz rację, uderzając w dysk przy każdym żądaniu, poprawię swoją odpowiedź, aby ostrzec o tym fakcie. Rozważ ulepszenie swojego, aby ostrzec o następujących kwestiach: jeśli zaimplementujesz niestandardowy silnik, musisz zaimplementować również funkcję przechwytywania (jeśli chcesz), nie jest ona obsługiwana przez ekspres.
bas laconbass
17

Moim zdaniem używanie czegoś tak dużego jak ejs tylko do odczytu plików html jest nieco uciążliwe. Właśnie napisałem własny silnik szablonów dla plików html, który jest niezwykle prosty. Plik wygląda następująco:

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 = {};

Nazwałem mój htmlEngine, a sposób, w jaki go używasz, jest po prostu mówiąc:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');
kevin.groat
źródło
11

app.register()nie został zdeprecjonowany, po prostu zmieniono jego nazwę na app.engine()odkąd Express 3 zmienia sposób obsługi silników szablonów .

Zgodność z silnikiem szablonów Express 2.x wymagała następującego eksportu modułu:

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

Silniki szablonów Express 3.x powinny eksportować następujące elementy:

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

Jeśli silnik szablonów nie ujawnia tej metody, nie pecha, app.engine()metoda umożliwia mapowanie dowolnej funkcji do rozszerzenia. Załóżmy, że masz bibliotekę Markdown i chcesz renderować pliki .md, ale ta biblioteka nie obsługuje Express, twoje app.engine()wywołanie może wyglądać mniej więcej tak:

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

Jeśli szukasz silnika do tworzenia szablonów, który pozwala używać „zwykłego” HTML-a, polecam doT, ponieważ jest niezwykle szybki .

Oczywiście pamiętaj, że model widoku Express 3 pozostawia buforowanie widoku Tobie (lub Twojemu silnikowi szablonów). W środowisku produkcyjnym prawdopodobnie chcesz buforować swoje widoki w pamięci, aby nie wykonywać operacji we / wy dysku przy każdym żądaniu.

josh3736
źródło
Proszę spojrzeć na moją odpowiedź, twoja doskonale wyjaśnia, jak zarejestrować silniki szablonów, ale istnieje znacznie łatwiejszy sposób na przeniesienie zwykłych plików html.
bas laconbass,
@ josh3736: Twoje „niezwykle szybkie” hiperłącze działa w przeglądarce Firefox 41, ale nie uruchamia testów w wersji Chromium 45.0.2454.101 Ubuntu 14.04 (64-bit). Zastanawiam się dlaczego.
Lonnie Best
4

Aby silnik renderujący akceptował html zamiast jade, możesz wykonać następujące kroki;

  1. Zainstaluj konsolidację i przenieś do swojego katalogu.

     npm install consolidate
 npm install swig

  2. dodaj następujące wiersze do pliku app.js.

    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. dodaj szablony widoków jako .html do folderu „widoki”. Zrestartuj swój serwer węzłowy i uruchom aplikację w przeglądarce.

Chociaż spowoduje to bezproblemowe renderowanie html, polecam korzystanie z JADE, ucząc się go. Jade to niesamowity silnik szablonów, którego poznanie pomoże Ci osiągnąć lepszy projekt i skalowalność.

AnandShanbhag
źródło
1
Jedyny naprawdę duży problem z Jade to wcięcie. Jeśli zrobisz to źle, kod się nie skompiluje. Również zastanawiam się, dlaczego Jade poza faktem, że jedyną rzeczą, robi to kod skurczy ...
zapper
4

najpierw sprawdź kompatybilność wersji silnika szablonów, używając poniższego wiersza

express -h

wtedy nie musisz używać żadnego widoku z listy. wybierz brak widoku 

express --no-view myapp

teraz możesz używać wszystkich swoich html, css, js i obrazów w folderze publicznym.

Soubhagya Kumar Barik
źródło
3

Cóż, wygląda na to, że chcesz obsługiwać pliki statyczne. Jest też taka strona http://expressjs.com/en/starter/static-files.html

Dziwne, że nikt nie łączy się z dokumentacją.

S Meaden
źródło
„Dziwne, że nikt nie tworzy linków do dokumentacji”. Zgadzam się, że użycie innego języka widoku w Expressie jest sprawą banalną.
piksel 67
1

Biorąc pod uwagę, że masz już zdefiniowane trasy lub wiesz, jak to zrobić.

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

UWAGA: ta trasa musi być umieszczona po wszystkich innych, ponieważ * akceptuje wszystko.

João Rodrigues
źródło
1

ponieważ Jade obsługuje HTML, możesz to zrobić, jeśli chcesz mieć tylko rozszerzenie .html

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

następnie po prostu zmień plik w widokach z jade na html.

Weijing Jay Lin
źródło
Nie musisz umieszczać kropki lub kropki przed znacznikami HTML?
Gus Crawford,
1

Możesz również bezpośrednio dołączyć plik html do pliku jade

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

Oryginalna odpowiedź: ekspresowy generator bez jadeitu

Priyanshu Chauhan
źródło
-10

Jeśli chcesz używać zwykłego html w nodeJS, bez używania jade .. lub cokolwiek innego:

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

Osobiście dobrze sobie z tym radzę.

Zaletą jest prostota podczas sterowania. Możesz użyć kilku sztuczek, takich jak '<p>' + (name || '') + '</p>'trójskładnik ... itd

Jeśli chcesz mieć wcięty kod w przeglądarce, możesz zrobić:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

i używaj \ t lub \ n do woli. Ale wolę bez, a do tego jest szybszy.


źródło
Chciałbym móc używać plików HTML w Express (w porównaniu do zwykłego Node.JS)
Sanchit Gupta.
ooooohh przepraszam (jestem francuskim: p), więc możesz użyć fsmodułu. fs.readFile(htmlfile, 'utf8', function (err, file) {