【问题标题】:Using HTML in Express instead of Jade在 Express 中使用 HTML 而不是 Jade
【发布时间】:2012-07-14 18:52:22
【问题描述】:

在 Node.JS 中使用 Express 时如何摆脱 Jade?我只想使用纯 html。在其他文章中,我看到人们推荐了 app.register(),它现在已在最新版本中被弃用。

【问题讨论】:

    标签: html node.js express pug


    【解决方案1】:

    首先使用下面一行检查模板引擎的兼容性版本

    express -h
    

    那么你必须使用列表中的无视图。选择无视图

    express --no-view myapp
    

    现在您可以使用公共文件夹中的所有 html、css、js 和图像了。

    【讨论】:

      【解决方案2】:

      你可以这样做:

      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. 然后你就可以在/views目录下创建你的html视图了。

      【讨论】:

      • 我刚开始使用node.js。我不清楚解决方案。我有一个小的 html 网站。我需要 node.js 来使用 nodemailer 通过我的网站发送电子邮件。我已经安装了所有需要的东西。但是,必须知道 app.js 文件中应该包含哪些内容才能使我的网站使用 express 运行
      • 如何在html文件中打印变量title
      • 如果有人仍然想知道如何打印变量,就像@MasterYoda 询问的那样,您可以在 html 上这样打印:
      【解决方案3】:

      你也可以直接将你的html文件包含到你的jade文件中

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

      原答案:Express Generator Without Jade

      【讨论】:

        【解决方案4】:

        Jade 也接受 html 输入。
        只需在行尾添加一个点即可开始提交纯 html。
        如果这对您有用,请尝试:

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

        PS - 无需关闭 HTML - 这是 Jade 自动完成的。

        【讨论】:

        【解决方案5】:

        嗯,听起来您想提供静态文件。并且有一个页面 http://expressjs.com/en/starter/static-files.html

        奇怪的是没有人链接到文档。

        【讨论】:

        • “奇怪的是没有人链接到文档”我同意在 Express 中使用不同的视图语言是一件小事。
        【解决方案6】:

        要让渲染引擎接受html而不是jade,您可以按照以下步骤操作;

        1. consolidateswig 安装到您的目录。

           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 添加到“views”文件夹中。重新启动节点服务器并在浏览器中启动应用程序。

        虽然这会毫无问题地呈现 html,但我建议您通过学习来使用 JADE。 Jade 是一个了不起的模板引擎,学习它可以帮助您实现更好的设计和可扩展性。

        【讨论】:

        • Jade 唯一真正的大问题是缩进。如果你弄错了,代码将无法编译。另外,我想知道为什么 Jade 除了它唯一做的就是收缩代码这一事实之外......
        【解决方案7】:

        由于 Jade 支持 HTML,如果你只想拥有 .html ext,你可以这样做

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

        然后您只需将视图中的文件从jade 更改为html。

        【讨论】:

        • 您不必在 html 标记之前放置一个“点”或句点吗?
        【解决方案8】:

        考虑到您已经定义了路线或知道如何去做。

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

        注意:这条路由必须放在所有其他路由之后,因为 * 接受所有内容。

        【讨论】:

          【解决方案9】:

          在我看来,使用像 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');
          

          【讨论】:

            【解决方案10】:

            app.register() 没有贬值,只是从 Express 3 changes the way template engines are handled 起重命名为app.engine()

            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,因为它是extremely fast

            当然,请记住,Express 3 视图模型将视图缓存留给您(或您的模板引擎)。在生产环境中,您可能希望将视图缓存在内存中,这样您就不会对每个请求进行磁盘 I/O。

            【讨论】:

            • 请看我的回答,你的回答完美地解释了如何注册模板引擎,但是有一个更简单的方法来传输纯 html 文件。
            • @josh3736 :您的“极快”超链接在 Firefox 41 中有效,但无法在 Chromium 版本 45.0.2454.101 Ubuntu 14.04(64 位)中运行测试。我想知道为什么。
            【解决方案11】:

            从 express 3 开始,您可以简单地使用 response.sendFile

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

            来自the official express api reference

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

            在给定路径传输文件。

            自动默认 Content-Type 响应头字段基于 文件名的扩展名。回调fn(err) 在 传输完成或发生错误时。

            警告

            res.sendFile 通过 http 缓存头提供客户端缓存,但它不会在服务器端缓存文件内容。 上面的代码将在每次请求时都会写入磁盘

            【讨论】:

            • 我相信 OP 仍然想使用某种模板,只是使用常规的 HTML 语法。 sendfile 不允许你做任何模板,因为它只是从文件中发送字节。此外,我建议不要像这样使用sendfile,因为这意味着每次收到请求时都会碰到磁盘——这是一个巨大的瓶颈。对于高流量页面,你真的应该做内存缓存。
            • @josh3736 如果您对 OP 的意图是正确的,那么应该改进这个问题。您对每个请求都点击磁盘是正确的,我会改进我的答案以警告这一事实。请考虑改进您的引擎以警告以下内容:如果您实现自定义引擎,则您也必须实现捕获功能(如果需要),它不会由 express 处理。
            【解决方案12】:

            您可以将 EJS 与 express 一起使用,哪些模板是 HTML 但支持变量。 这是一个很好的教程,教你如何在 express 中使用 EJS。

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

            【讨论】:

              【解决方案13】:

              如果你想在nodeJS中使用plain html,而不使用jade..或其他:

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

              我个人觉得很好。

              优点是控制时简单。 你可以使用一些技巧,比如'&lt;p&gt;' + (name || '') + '&lt;/p&gt;'、三元......等

              如果你想在浏览器中缩进代码,你可以这样做:

              + 'ok \
                my friend \
                sldkfjlsdkjf';
              

              并随意使用 \t 或 \n。但我更喜欢没有,而且速度更快。

              【讨论】:

              • 我希望能够在 Express 中使用 HTML 文件(与普通 Node.JS 相比)
              • ooooohh 抱歉(我是法国人:p),所以您可以使用 fs 模块。 fs.readFile(htmlfile, 'utf8', function (err, file) {
              猜你喜欢
              • 2013-02-01
              • 1970-01-01
              • 2011-11-23
              • 1970-01-01
              • 1970-01-01
              • 2011-07-09
              • 2013-03-18
              • 1970-01-01
              • 2012-09-21
              相关资源
              最近更新 更多