Menggunakan HTML di Express, bukan Jade

103

Bagaimana cara menghilangkan Jade saat menggunakan Express dengan Node.JS? Saya hanya ingin menggunakan html biasa. Di artikel lain, saya telah melihat bahwa orang merekomendasikan app.register () yang sekarang sudah tidak digunakan lagi di versi terbaru.

html node.js express pug Sanchit Gupta
sumber

Jawaban:

78

Anda bisa melakukannya dengan cara ini:

  1. Instal ejs:

    npm install ejs

  2. Setel mesin template Anda di app.js sebagai ejs

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

  3. Sekarang di file rute Anda, Anda dapat menetapkan variabel template 

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

  4. Kemudian Anda dapat membuat tampilan html Anda di direktori / views.

Biwek
sumber
2
Saya baru saja mulai menggunakan node.js. Solusinya tidak jelas bagi saya. Saya memiliki situs web html kecil. Saya membutuhkan node.js untuk mengirim email melalui situs saya menggunakan nodemailer. Saya telah menginstal semua yang diperlukan. Namun, harus tahu apa yang harus masuk dalam file app.js untuk membuat situs web saya berjalan menggunakan express
user2457956
4
Bagaimana cara mencetak variabel titledalam file html?
Master Yoda
3
Jika ada yang masih bertanya-tanya bagaimana cara mencetak variabel, seperti yang ditanyakan @MasterYoda, Anda dapat mencetaknya seperti ini di html: <% = title%>
Lucas Meine
62

Jade juga menerima masukan html.
Cukup tambahkan titik di akhir baris untuk mulai mengirimkan html murni.
Jika itu berhasil untuk Anda, cobalah:

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

PS - Tidak perlu menutup HTML - itu dilakukan secara otomatis oleh Jade.

Martin Sookael
sumber
7
Doctype 5 sekarang tidak digunakan lagi. Gunakan "doctype html" sebagai baris pertama.
snorkelzebra
Docs for the dot: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb
18

Pada express 3 Anda cukup menggunakan response.sendFile

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

Dari referensi api ekspres resmi :

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

Transfer file di jalur yang diberikan.

Secara otomatis menetapkan default bidang header respons Jenis Konten berdasarkan ekstensi nama file. Callback fn(err)dipanggil ketika transfer selesai atau ketika terjadi kesalahan.

Peringatan

res.sendFilemenyediakan cache sisi klien melalui header cache http tetapi tidak menyimpan konten file di sisi server. Kode di atas akan masuk ke disk pada setiap permintaan .

laconbass.dll
sumber
2
Saya yakin OP masih ingin menggunakan semacam templating, hanya dengan sintaks HTML biasa. sendfiletidak mengizinkan Anda untuk melakukan template apa pun karena ini hanya mengirim byte dari sebuah file. Selanjutnya, saya akan merekomendasikan untuk tidak menggunakan sendfileseperti ini karena itu berarti Anda akan mencapai disk setiap kali ada permintaan masuk - kemacetan besar. Untuk halaman dengan lalu lintas tinggi, Anda harus benar-benar melakukan cache dalam memori.
josh3736
1
@ josh3736 jika Anda benar tentang maksud OP, pertanyaannya harus diperbaiki. Anda benar tentang memukul disk pada setiap permintaan, saya akan memperbaiki jawaban saya untuk memperingatkan tentang fakta ini. Harap pertimbangkan untuk meningkatkan milik Anda untuk memperingatkan tentang hal berikut: jika Anda menerapkan mesin yang disesuaikan, Anda harus menerapkan juga fitur penangkap (jika diinginkan), itu tidak ditangani oleh ekspres.
laconbass
17

Menurut pendapat saya, menggunakan sesuatu sebesar ejs hanya untuk membaca file html agak berat. Saya baru saja membuat mesin template saya sendiri untuk file html yang sangat sederhana. File tersebut terlihat seperti ini:

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

Saya memanggil milik saya htmlEngine, dan cara Anda menggunakannya adalah dengan mengatakan:

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

app.register()belum disusutkan, baru saja diubah namanya menjadi app.engine()sejak Express 3 mengubah cara penanganan mesin template .

Kompatibilitas mesin template Express 2.x memerlukan ekspor modul berikut:

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

Mesin template Express 3.x harus mengekspor yang berikut ini:

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

Jika mesin templat tidak mengekspos metode ini, Anda tidak kurang beruntung, app.engine()metode ini memungkinkan Anda memetakan fungsi apa pun ke ekstensi. Misalkan Anda memiliki pustaka penurunan harga dan ingin merender file .md, tetapi pustaka ini tidak mendukung Express, app.engine()panggilan Anda mungkin terlihat seperti ini:

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

Jika Anda mencari mesin templating yang memungkinkan Anda menggunakan HTML 'biasa', saya sarankan doT karena sangat cepat .

Tentu saja, perlu diingat bahwa model tampilan Express 3 menyerahkan cache tampilan kepada Anda (atau mesin template Anda). Dalam lingkungan produksi, Anda mungkin ingin menyimpan pandangan Anda ke dalam memori sehingga Anda tidak melakukan I / O disk pada setiap permintaan.

josh3736
sumber
Silakan lihat jawaban saya, jawaban Anda dengan sempurna menjelaskan cara mendaftarkan mesin templat tetapi ada cara yang jauh lebih mudah untuk mentransfer file html biasa.
laconbass
@ josh3736: Hyperlink "sangat cepat" Anda berfungsi di Firefox 41, tetapi gagal menjalankan pengujian di Chromium Versi 45.0.2454.101 Ubuntu 14.04 (64-bit). Kenapa ya.
Lonnie Terbaik
4

Untuk membuat mesin render menerima html, bukan giok, Anda dapat mengikuti langkah-langkah berikut;

  1. Instal konsolidasi dan swig ke direktori Anda.

     npm install consolidate
 npm install swig

  2. tambahkan baris berikut ke file app.js Anda

    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. tambahkan template tampilan Anda sebagai .html di dalam folder "tampilan". Mulai ulang server node Anda dan mulai aplikasi di browser.

Meskipun ini akan membuat html tanpa masalah, saya akan merekomendasikan Anda untuk menggunakan JADE dengan mempelajarinya. Jade adalah mesin template yang luar biasa dan mempelajari ini akan membantu Anda mencapai desain & skalabilitas yang lebih baik.

AnandShanbhag
sumber
1
Satu-satunya masalah besar dengan Jade adalah lekukannya. Jika Anda salah, kode tidak akan dikompilasi. Juga, saya bertanya-tanya mengapa Jade selain fakta bahwa satu-satunya hal yang dilakukannya adalah menyusutkan kode ...
zapper
4

pertama periksa versi kompatibilitas mesin template dengan menggunakan baris di bawah ini

express -h

maka Anda harus menggunakan tidak ada tampilan dari daftar. pilih tidak ada tampilan 

express --no-view myapp

sekarang Anda dapat menggunakan semua html, css, js, dan gambar Anda di folder publik.

Soubhagya Kumar Barik
sumber
3

Nah, sepertinya Anda ingin menyajikan file statis. Dan ada halaman untuk itu http://expressjs.com/en/starter/static-files.html

Anehnya tidak ada yang menautkan ke dokumentasi.

S Meaden
sumber
"Anehnya tidak ada yang menautkan ke dokumentasi" Saya setuju bahwa menggunakan bahasa tampilan yang berbeda di Express adalah masalah sepele.
piksel 67
1

Mengingat Anda memiliki rute yang sudah ditentukan atau benar-benar tahu cara melakukannya.

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

CATATAN: rute ini harus ditempatkan setelah yang lain karena * menerima semuanya.

João Rodrigues
sumber
1

karena Jade mendukung HTML, jika Anda hanya ingin memiliki .html ext, Anda dapat melakukannya

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

lalu Anda hanya mengubah file dalam tampilan dari giok ke html.

Weijing Jay Lin
sumber
Apakah Anda tidak harus meletakkan 'titik' atau titik sebelum markup html?
Gus Crawford
1

Anda juga dapat langsung memasukkan file html Anda ke file giok Anda

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

Jawaban asli: Generator Ekspres Tanpa Jade

Priyanshu Chauhan
sumber
-10

Jika Anda ingin menggunakan html biasa di nodeJS, tanpa menggunakan giok .. atau apa pun:

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

Secara pribadi saya baik-baik saja dengan itu.

Keuntungannya adalah kesederhanaan saat mengontrol. Anda dapat menggunakan beberapa trik, seperti '<p>' + (name || '') + '</p>', ternary .. dll

Jika Anda menginginkan kode indentasi di browser, Anda dapat melakukan:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

dan gunakan \ t atau \ n sesuka hati. Tapi saya lebih suka tanpa, plus lebih cepat.


sumber
Saya ingin dapat menggunakan file HTML di Express (vs plain Node.JS)
Sanchit Gupta
ooooohh maaf (saya orang Prancis: p), jadi Anda bisa menggunakan fsmodul ini. fs.readFile(htmlfile, 'utf8', function (err, file) {