Використання HTML у Express замість Jade


103

Як я можу позбутися від Jade під час використання Express з Node.JS? Я хочу просто використовувати звичайний html. В інших статтях я бачив, що люди рекомендували app.register (), який тепер застарілий в останній версії.

Відповіді:


78

Ви можете це зробити так:

  1. Встановити ejs:

    npm install ejs
  2. Встановіть механізм шаблону в app.js як ejs

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. Тепер у файлі маршруту ви можете призначити змінні шаблону

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. Тоді ви можете створити свій HTML-перегляд у каталозі / views.


2
Я щойно почав використовувати node.js. Рішення мені незрозуміле. У мене невеликий html-сайт. Мені потрібен node.js для надсилання електронних листів через мій сайт за допомогою nodemailer. Я встановив все необхідне. Однак, маю уявити, що повинно пройти у файлі app.js, щоб змусити мій веб-сайт працювати за допомогою express
user2457956

4
Як надрукувати змінну titleв HTML-файлі?
Майстер Йода

3
Якщо хтось все ще цікавить, як надрукувати змінну, як-от @MasterYoda запитав, ви можете роздрукувати її на html: <% = title%>
Лукас Мейн

62

Jade також приймає html-введення.
Просто додайте крапку в кінці рядка, щоб почати надсилати чистий html.
Якщо це для вас хитрість, то спробуйте:

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

PS - Не потрібно закривати HTML - це робиться автоматично Jade.


7
Доктіп 5 тепер застарілий. Використовуйте "doctype html" в якості першого рядка.
сноркельзебра


18

З експресу 3 ви можете просто використовувати response.sendFile

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

З офіційного експрес-довідника api :

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

Перенесіть файл по заданому шляху.

Автоматично за замовчуванням поле заголовка відповіді Content-Type на основі розширення імені файлу. Зворотний виклик fn(err)викликається, коли передача завершена або коли виникає помилка.

Увага

res.sendFileзабезпечує кеш на стороні клієнта через заголовки кешу http, але він не кешує вміст файлів на стороні сервера. Код, наведений вище, потрапить на диск при кожному запиті .


2
Я вважаю, що ОП все ж хоче використовувати певні шаблони, лише із звичайним синтаксисом HTML. sendfileне дозволяє робити будь-які шаблони, оскільки він просто надсилає байти з файлу. Крім того, я б рекомендував не використовувати sendfileподібне, оскільки це означає, що ви будете вдарятись про диск щоразу, коли надходить запит - величезне вузьке місце. Для сторінок з високим трафіком потрібно дійсно кешувати в пам'яті.
josh3736

1
@ josh3736 Якщо ви маєте рацію щодо наміру ОП, питання слід вдосконалити. Ви маєте рацію щодо удару диска на кожен запит, я вдосконалю свою відповідь, щоб попередити про цей факт. Будь ласка, подумайте про вдосконалення вашого, щоб попередити про наступне: якщо ви реалізуєте підганяний двигун, ви повинні також застосувати функцію лову (за бажанням), це не обробляється експресом.
лаконбас

17

На мою думку, використання чогось такого великого, як ejs, просто для читання html-файлів, є дещо важким. Я тільки що написав свій власний механізм шаблонів для html-файлів, що надзвичайно просто. Файл виглядає приблизно так:

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

Я зателефонував до свого htmlEngine, і спосіб, яким ви користуєтесь, просто сказав:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()не амортизований, він був перейменований, app.engine()оскільки Express 3 змінює спосіб обробки двигунів шаблонів .

Сумісність двигуна шаблону Express 2.x вимагала експорту наступного модуля:

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

Двигуни шаблону Express 3.x повинні експортувати такі:

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

Якщо двигун шаблону не піддається цьому методу, вам не пощастить, app.engine()метод дозволяє зіставити будь-яку функцію з розширенням. Припустимо, у вас була бібліотека розмітки і хотіли відтворити .md файли, але ця бібліотека не підтримує Express, ваш app.engine()дзвінок може виглядати приблизно так:

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

Якщо ви шукаєте движок шаблонів, який дозволяє використовувати "звичайний" HTML, я рекомендую doT, оскільки це надзвичайно швидко .

Звичайно, майте на увазі, що модель перегляду «Експрес 3» залишає кешування перегляду для вас (або вашого двигуна-шаблону). У виробничому середовищі, ймовірно, ви хочете кешувати свої погляди в пам'яті, щоб ви не робили дисковий введення / вивід на кожен запит.


Погляньте, будь ласка, на мою відповідь, ваша ідеально пояснює, як зареєструвати двигуни шаблонів, але є набагато простіший спосіб передачі простих HTML-файлів.
лаконбас

@ josh3736: Ваш "надзвичайно швидкий" гіперпосилання працює у Firefox 41, але не вдається запустити тести у Chromium Version 45.0.2454.101 Ubuntu 14.04 (64-розрядна). Цікаво, чому.
Lonnie Best


4

Щоб заставити движок візуалізації приймати html замість нефриту, ви можете виконати наступні кроки;

  1. Установка консолідації і ковток в каталог.

     npm install consolidate
     npm install swig
  2. додайте наступні рядки у файл 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. додайте шаблони перегляду як .html у папку "перегляди". Перезапустіть сервер вузлів і запустіть додаток у браузері.

Хоча це видасть HTML без жодних проблем, я рекомендую вам використовувати JADE, вивчивши його. Нефрит - це дивовижний двигун шаблону, і це допоможе вам досягти кращого дизайну та масштабування.


1
Єдина справді велика проблема з Джейд - це відступ. Якщо ви помилилися, код не буде компілюватися. Крім того, мені цікаво, чому Джейд, крім того, що єдине, що це робить, - це скорочення коду ...
zapper

4

спочатку перевірте версію сумісності двигуна шаблонів, використовуючи нижній рядок

express -h

тоді вам не потрібно використовувати жодного виду з list.select no view

express --no-view myapp

тепер ви можете використовувати всі html, css, js та зображення у загальній папці.


3

Ну, це здається, що ви хочете подавати статичні файли. І є сторінка для цього http://expressjs.com/en/starter/static-files.html

Дивно, що ніхто не посилається на документацію.


"Химерно, що ніхто не посилається на документацію" Я погоджуюся, що використання експрес-мови перегляду в Експресі є тривіальною справою.
піксель 67,

1

Враховуючи, що у вас вже визначені маршрути чи ви знаєте, як це зробити.

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

ПРИМІТКА: цей маршрут повинен бути розміщений після всіх інших, оскільки * приймає все.


1

оскільки Jade підтримує HTML, якщо ви просто хочете мати .html ext, ви можете це зробити

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

тоді ви просто зміните файл у видах від нефриту до html.


Чи не потрібно ставити «крапку» або період перед розміткою html?
Gus Crawford


-10

Якщо ви хочете використовувати звичайний html у nodeJS, не використовуючи нефрит .. чи що завгодно:

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

Персоналі, я добре в цьому справи.

Перевага - простота при управлінні. Ви можете використовувати деякі хитрощі, як '<p>' + (name || '') + '</p>', наприклад , потрійний тощо

Якщо вам потрібен відступний код у браузері, ви можете зробити:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

і використовуйте \ t або \ n за бажанням. Але я віддаю перевагу без, плюс це швидше.


Я хотів би мати можливість використовувати HTML-файли в Express (vs plain Node.JS)
Sanchit Gupta

ooooohh вибачте (я по-французьки: p), тому ви можете використовувати fsмодуль. fs.readFile(htmlfile, 'utf8', function (err, file) {
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.