Использование HTML в Express вместо Jade

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


node.js html express pug
person Sanchit Gupta    schedule 15.07.2012    source источник

Ответы (13)


arrow_upward
79
arrow_downward

Вы можете сделать это следующим образом:

  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.

person Biwek    schedule 01.03.2014
comment
Я только начал использовать node.js. Решение мне непонятно. У меня есть небольшой html-сайт. Мне нужен node.js для отправки писем через мой сайт с помощью nodemailer. Я установил все необходимое. Однако мне нужно понять, что должно быть в файле app.js, чтобы мой сайт работал с использованием экспресс - person user2457956; 10.04.2016
comment
Как напечатать переменную title в html файле? - person Master Yoda; 29.10.2016
comment
Если кто-то все еще задается вопросом, как напечатать переменную, как спросил @MasterYoda, вы можете напечатать ее так в html: ‹%= title %› - person Lucas Meine; 21.09.2017

arrow_upward
62
arrow_downward

Jade также принимает ввод в формате html.
Просто добавьте точку в конце строки, чтобы начать отправку чистого html.
Если это поможет вам, попробуйте:

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

PS — HTML закрывать не нужно — Jade делает это автоматически.

person Martin Sookael    schedule 14.10.2013
comment
Doctype 5 теперь устарел. Используйте doctype html в качестве первой строки. - person snorkelzebra; 27.05.2015
comment
Документы для точки: pugjs.org/language/plain-text .html#block-in-a-tag - person Alexander Taubenkorb; 10.12.2017

arrow_upward
19
arrow_downward

Начиная с Express 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-кэша, но не кэширует содержимое файла на стороне сервера. Приведенный выше код будет попадать на диск при каждом запросе.

person laconbass    schedule 14.12.2013
comment
Я считаю, что ОП все еще хочет использовать какой-то шаблон, только с обычным синтаксисом HTML. sendfile не позволяет вам делать какие-либо шаблоны, поскольку он просто отправляет байты из файла. Кроме того, я бы рекомендовал не использовать sendfile таким образом, потому что это означает, что вы будете обращаться к диску каждый раз, когда приходит запрос, что является огромным узким местом. Для страниц с высоким трафиком вам действительно следует выполнять кэширование в памяти. - person josh3736; 14.12.2013
comment
@ josh3736 josh3736, если вы правы в отношении намерения ОП, вопрос следует улучшить. Вы правы насчет удара по диску при каждом запросе, я улучшу свой ответ, чтобы предупредить об этом факте. Пожалуйста, подумайте над улучшением своего, чтобы предупредить о следующем: если вы внедряете настраиваемый движок, вы также должны реализовать функцию перехвата (при желании), она не обрабатывается экспрессом. - person laconbass; 16.12.2013

arrow_upward
16
arrow_downward

На мой взгляд, использование чего-то такого большого, как 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');
person kevin.groat    schedule 23.05.2014

arrow_upward
10
arrow_downward

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, поскольку он очень быстро.

Конечно, имейте в виду, что модель представления Express 3 оставляет кэширование представления на ваше усмотрение (или на ваш механизм шаблонов). В производственной среде вы, вероятно, захотите кэшировать представления в памяти, чтобы не выполнять дисковый ввод-вывод при каждом запросе.

person josh3736    schedule 15.07.2012
comment
Пожалуйста, взгляните на мой ответ, ваш прекрасно объясняет, как зарегистрировать механизмы шаблонов, но есть гораздо более простой способ передачи простых html-файлов. - person laconbass; 14.12.2013
comment
@josh3736 josh3736: Ваша чрезвычайно быстрая гиперссылка работает в Firefox 41, но не проходит тесты в Chromium версии 45.0.2454.101 Ubuntu 14.04 (64-разрядная версия). Интересно, почему. - person Lonnie Best; 22.10.2015

arrow_upward
4
arrow_downward

Вы можете использовать EJS с выражением, какие шаблоны являются HTML, но поддерживают переменные. Вот хороший учебник по использованию EJS в экспрессе.

http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/

person Pablo Vallejo    schedule 30.03.2013

arrow_upward
4
arrow_downward

Чтобы заставить движок рендеринга принимать html вместо jade, вы можете выполнить следующие шаги;

  1. Установите consolidate и проведите в свой каталог.

     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, изучив его. Jade — удивительный механизм шаблонов, и его изучение поможет вам добиться лучшего дизайна и масштабируемости.

person AnandShanbhag    schedule 14.02.2016
comment
Единственная действительно большая проблема с Jade — это отступы. Если вы ошибетесь, код не скомпилируется. Кроме того, мне интересно, почему Jade, кроме того факта, что единственное, что он делает, это сжимает код... - person zapper; 18.06.2016

arrow_upward
4
arrow_downward

сначала проверьте версию совместимости механизма шаблонов, используя строку ниже

express -h

тогда вам нужно не использовать представление из списка. выберите без представления

express --no-view myapp

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

person Soubhagya Kumar Barik    schedule 18.11.2018

arrow_upward
3
arrow_downward

Ну, похоже, вы хотите обслуживать статические файлы. Для этого есть страница http://expressjs.com/en/starter/static-files.html

Странно, что никто не ссылается на документацию.

person S Meaden    schedule 11.10.2016
comment
Странно, что никто не ссылается на документацию. Я согласен, что использование другого языка представления в Express тривиально. - person pixel 67; 29.05.2017

arrow_upward
1
arrow_downward

Учитывая, что вы уже определили свои маршруты или знаете, как это сделать.

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

ПРИМЕЧАНИЕ: этот маршрут должен быть размещен после всех остальных, так как * принимает все.

person João Rodrigues    schedule 26.12.2015

arrow_upward
1
arrow_downward

поскольку Jade поддерживает HTML, если вы просто хотите иметь расширение .html, вы можете сделать это

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

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

person Weijing Jay Lin    schedule 03.02.2016
comment
Разве вам не нужно ставить точку или точку перед html-разметкой? - person Gus Crawford; 28.09.2016

arrow_upward
1
arrow_downward

Вы также можете напрямую включить свой html-файл в свой нефритовый файл.

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

Исходный ответ: Экспресс-генератор без Jade

person Priyanshu Chauhan    schedule 07.06.2017

arrow_upward
-10
arrow_downward

Если вы хотите использовать обычный html в nodeJS без использования jade.. или чего-то еще:

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

Лично меня это устраивает.

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

Если вам нужен код с отступом в браузере, вы можете сделать:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

и используйте \t или \n по желанию. Но я предпочитаю без, плюс это быстрее.

person Community    schedule 15.07.2012
comment
Я хотел бы иметь возможность использовать файлы HTML в Express (по сравнению с обычным Node.JS) - person Sanchit Gupta; 16.07.2012
comment
оооооо извините (я француз :p), так что вы можете использовать модуль fs. fs.readFile(htmlfile, 'utf8', function (err, file) { - person ; 16.07.2012