web-dev-qa-db-fra.com

Utilisation de HTML dans Express au lieu de Jade

Comment me débarrasser de Jade en utilisant Express avec Node.JS? Je veux juste utiliser du HTML simple. Dans d'autres articles, j'ai vu que les gens recommandaient app.register (), qui est maintenant obsolète dans la dernière version.

htmlnode.jsexpresspug
97
Sanchit Gupta

Vous pouvez le faire de cette façon:

  1. Installez ejs:

    npm install ejs

  2. Définissez votre moteur de template dans app.js comme ejs

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

  3. Maintenant, dans votre fichier de route, vous pouvez affecter des variables de modèle

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

  4. Ensuite, vous pouvez créer votre vue html dans le répertoire/views.

73
Biwek

Jade accepte également les entrées HTML.
Ajoutez simplement un point à la fin de la ligne pour commencer à soumettre du code HTML pur.
Si cela vous convient, essayez:

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

PS - Inutile de fermer HTML - cela est fait automatiquement par Jade.

61
Martin Sookael

À mon avis, utiliser quelque chose d'aussi gros que ejs pour lire des fichiers HTML est un peu lourd. Je viens d'écrire mon propre moteur de template pour les fichiers HTML qui est remarquablement simple. Le fichier ressemble à ceci:

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

J'ai appelé mine htmlEngine, et vous l'utilisez simplement en disant:

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

À partir de l’expédition 3, vous pouvez simplement utiliser response.sendFile

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

De la référence officielle de l'API express :

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

Transférez le fichier dans le chemin indiqué.

Définit automatiquement par défaut le champ d’en-tête de réponse Content-Type en fonction de l’extension du nom de fichier. Le rappel fn(err) est appelé à la fin du transfert ou en cas d'erreur.

Attention

res.sendFile Fournit un cache côté client via des en-têtes de cache http, mais ne cache pas le contenu du fichier sur le serveur. Le code ci-dessus va frapper le disque à chaque requête .

16
laconbass

app.register() n'a pas été amorti, il a été renommé en app.engine() depuis Express 3 modifie la façon dont les moteurs de gabarit sont gérés .

La compatibilité du moteur de modèle Express 2.x a nécessité l'exportation du module suivant:

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

Les moteurs de modèle Express 3.x doivent exporter les éléments suivants:

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

Si un moteur de modèle n'expose pas cette méthode, vous n'avez pas de chance, la méthode app.engine() vous permet de mapper n'importe quelle fonction à une extension. Supposons que vous ayez une bibliothèque de démarques et que vous vouliez rendre les fichiers .md, mais que cette bibliothèque ne prend pas en charge Express. Votre appel app.engine() peut ressembler à ceci:

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

Si vous êtes à la recherche d'un moteur de gabarit qui vous permette d'utiliser du HTML 'ordinaire', je recommande doT car c'est extrêmement rapide .

Bien entendu, gardez à l'esprit que le modèle de vue Express 3 laisse la mise en cache de la vue à vous (ou à votre moteur de modélisation). Dans un environnement de production, vous souhaiterez probablement mettre en mémoire cache vos vues afin que vous ne fassiez pas d'E/S disque à chaque requête.

10
josh3736

Pour que le moteur de rendu accepte le code HTML au lieu de jade, procédez comme suit:

  1. Installez consolider et swig dans votre répertoire.

     npm install consolidate
 npm install swig

  2. ajoutez les lignes suivantes à votre fichier 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. ajoutez vos modèles de vues au format .html dans le dossier "views". Redémarrez votre serveur de nœud et démarrez l'application dans le navigateur.

Bien que cela rende le contenu HTML sans problème, je vous recommanderais d'utiliser JADE en l'apprenant. Jade est un formidable moteur de templates et cet apprentissage vous aidera à améliorer la conception et l'évolutivité.

4
AnandShanbhag

Vous pouvez utiliser EJS avec express quels modèles sont du HTML mais des variables de support. Voici un bon tutoriel sur la façon d'utiliser EJS dans Express.

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

4
Pablo Vallejo

vérifiez d'abord la version de compatibilité du moteur de gabarit en utilisant la ligne ci-dessous

express -h

alors vous devez utiliser aucune vue de la liste.sélectionnez aucune vue

express --no-view myapp

maintenant, vous pouvez utiliser tous vos fichiers html, css, js et images dans des dossiers publics.

3
Soubhagya Kumar

On dirait que vous voulez servir des fichiers statiques. Et il y a une page pour ça http://expressjs.com/fr/starter/static-files.html

Bizarre que personne ne lie à la documentation.

3
S Meaden

Vous pouvez également directement inclure votre fichier HTML dans votre fichier jade

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

Réponse originale: Express Generator Without Jade

1
Priyanshu Chauhan

puisque Jade supporte le HTML, si vous voulez juste avoir .html ext, vous pouvez le faire

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

alors vous changez simplement le fichier dans les vues de jade en html.

1
Weijing Jay Lin

Considérant que vos itinéraires sont déjà définis ou que vous savez le faire.

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

NOTE: cette route doit être placée après toutes les autres puisque * accepte tout.

0
João Rodrigues