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.

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.


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.


7
Doctype 5 agora está obsoleto. Use "doctype html" como a primeira linha.
snorkelzebra de


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 .


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

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.


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.


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.



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.


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.


Você não precisa colocar um 'ponto' ou ponto antes da marcação html?
Gus Crawford


-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.


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) {
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.