Usando HTML no Express em vez de Jade

103

Como me livro do Jade enquanto uso o Express with Node.JS? Eu quero usar apenas html simples. Em outros artigos, vi que as pessoas recomendaram app.register (), que agora está obsoleto na versão mais recente.

html node.js express pug Sanchit Gupta
fonte

Respostas:

78

Você pode fazer desta forma:

  1. Instale ejs:

    npm install ejs

  2. Defina seu mecanismo de modelo em app.js como ejs

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

  3. Agora, em seu arquivo de rota, você pode atribuir variáveis ​​de modelo 

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

  4. Então você pode criar sua visão html no diretório / views.

Biwek
fonte
2
Acabei de começar a usar node.js. A solução não é clara para mim. Eu tenho um pequeno site em html. Eu preciso de node.js para o envio de e-mails através do meu site usando nodemailer. Eu instalei tudo o que é necessário. No entanto, tenho uma ideia do que deve constar no arquivo app.js para que meu site seja executado usando express
user2457956
4
Como imprimir a variável titleem arquivo html?
Mestre Yoda
3
Se alguém ainda está se perguntando como imprimir a variável, como @MasterYoda perguntou, você pode imprimi-la assim no html: <% = title%>
Lucas Meine
62

Jade também aceita entrada html.
Basta adicionar um ponto ao final da linha para começar a enviar html puro.
Se isso funcionar para você, tente:

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

PS - Não há necessidade de fechar o HTML - isso é feito automaticamente pela Jade.

Martin Sookael
fonte
7
Doctype 5 agora está obsoleto. Use "doctype html" como a primeira linha.
snorkelzebra de
Docs para o ponto: pugjs.org/language/plain-text.html#block-in-a-tag
Alexander Taubenkorb
18

A partir do expresso 3, você pode simplesmente usar response.sendFile

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

Da referência oficial expressa da API :

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

Transfira o arquivo no caminho fornecido.

Padroniza automaticamente o campo de cabeçalho de resposta Content-Type com base na extensão do nome do arquivo. O retorno de chamada fn(err)é invocado quando a transferência é concluída ou quando ocorre um erro.

Aviso

res.sendFilefornece cache do lado do cliente por meio de cabeçalhos de cache http, mas não armazena o conteúdo do arquivo no lado do servidor. O código acima irá para o disco em cada solicitação .

Laconbass
fonte
2
Acredito que o OP ainda queira usar algum tipo de template, apenas com sintaxe HTML normal. sendfilenão permite que você faça modelos, uma vez que apenas envia bytes de um arquivo. Além disso, eu não recomendaria usar sendfileassim porque significa que você acessará o disco toda vez que uma solicitação chegar - um grande gargalo. Para páginas de alto tráfego, você realmente deve fazer o cache na memória.
josh3736
1
@ josh3736 se você estiver certo sobre a intenção do OP, a questão deve ser melhorada. Você está certo sobre acertar o disco a cada solicitação, vou melhorar minha resposta para alertar sobre esse fato. Por favor, considere melhorar o seu para avisar sobre o seguinte: se você implementar um motor personalizado, você deve implementar também o recurso de captura (se desejado), ele não é tratado por expresso.
laconbass
17

Na minha opinião, usar algo tão grande como ejs apenas para ler arquivos html é um pouco pesado. Acabei de escrever meu próprio mecanismo de modelo para arquivos html que é extremamente simples. O arquivo tem a seguinte aparência:

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

Liguei para o meu htmlEngine, e a maneira como você o usa é simplesmente dizendo:

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

app.register()não foi depreciado, ele apenas foi renomeado para app.engine()desde que o Express 3 muda a forma como os mecanismos de modelo são tratados .

A compatibilidade do mecanismo de modelo Express 2.x exigia a seguinte exportação de módulo:

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

Os motores de modelo Express 3.x devem exportar o seguinte:

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

Se um mecanismo de modelo não expõe esse método, você não está sem sorte, o app.engine() método permite mapear qualquer função para uma extensão. Suponha que você tenha uma biblioteca de markdown e queira renderizar arquivos .md, mas esta biblioteca não suporta Express, sua app.engine()chamada pode ser algo assim:

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

Se você está procurando um mecanismo de modelagem que permite usar HTML 'puro', recomendo o doT porque é extremamente rápido .

Obviamente, tenha em mente que o modelo de visualização do Express 3 deixa o cache de visualização por sua conta (ou seu mecanismo de modelagem). Em um ambiente de produção, você provavelmente deseja armazenar em cache suas visualizações na memória para que não faça E / S de disco a cada solicitação.

Josh3736
fonte
Por favor, dê uma olhada na minha resposta, a sua explica perfeitamente como registrar motores de modelo, mas há uma maneira muito mais fácil de transferir arquivos html simples.
laconbass de
@ josh3736: Seu hiperlink "extremamente rápido" funciona no Firefox 41, mas falha ao executar testes no Chromium versão 45.0.2454.101 Ubuntu 14.04 (64 bits). Eu quero saber porque.
Lonnie Best,
4

Para fazer o mecanismo de renderização aceitar html em vez de jade, você pode seguir os seguintes passos;

  1. Instale consolidate e gire em seu diretório.

     npm install consolidate
 npm install swig

  2. adicione as seguintes linhas ao seu arquivo 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. adicione seus modelos de visualização como .html dentro da pasta “visualizações”. Reinicie seu servidor de nó e inicie o aplicativo no navegador.

Embora isso renderize html sem nenhum problema, recomendo que você use JADE aprendendo. Jade é um mecanismo de modelo incrível e aprender isso o ajudará a obter um design e escalabilidade melhores.

AnandShanbhag
fonte
1
O único problema realmente grande com Jade é o recuo. Se você errar, o código não será compilado. Além disso, eu me pergunto por que Jade além do fato de que a única coisa que faz é encolher o código ...
zapper
4

primeiro verifique a versão de compatibilidade do mecanismo de modelo usando a linha abaixo

express -h

então você tem que usar nenhuma visão da lista. selecionar nenhuma visão 

express --no-view myapp

agora você pode usar todos os seus html, css, js e imagens na pasta pública.

Soubhagya Kumar Barik
fonte
3

Bem, parece que você deseja servir arquivos estáticos. E há uma página para isso http://expressjs.com/en/starter/static-files.html

Bizarro que ninguém está ligando para a documentação.

S Meaden
fonte
"Bizarro que ninguém esteja vinculando à documentação" Concordo que é uma questão trivial usar uma linguagem de visão diferente no Express.
pixel 67 de
1

Considerando que você já tem suas rotas definidas ou sabe como fazer.

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

NOTA: esta rota deve ser colocada depois de todas as outras, pois * aceita tudo.

João rodrigues
fonte
1

uma vez que o Jade suporta HTML, se você quiser apenas ter .html ext, você pode fazer isso

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

então você apenas muda o arquivo nas visualizações de jade para html.

Weijing Jay Lin
fonte
Você não precisa colocar um 'ponto' ou ponto antes da marcação html?
Gus Crawford
1

Você também pode incluir diretamente seu arquivo html em seu arquivo jade

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

Resposta original: Express Generator Without Jade

Priyanshu Chauhan
fonte
-10

Se você quiser usar html simples em nodeJS, sem usar jade .. ou qualquer outra coisa:

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

Pessoalmente, estou bem com isso.

A vantagem é a simplicidade no controle. Você pode usar alguns truques, como'<p>' + (name || '') + '</p>' ternário .. etc.

Se quiser um código recuado no navegador, você pode fazer:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

e use \ t ou \ n à vontade. Mas prefiro sem, além disso, é mais rápido.


fonte
Eu gostaria de poder usar arquivos HTML no Express (vs
Node.JS
ooooohh desculpe (eu sou francês: p), então você pode usar o fsmódulo. fs.readFile(htmlfile, 'utf8', function (err, file) {