Nodejs 请教：express + jade 输出漂亮的html，默认为一行

Nodejs 请教：express + jade 输出漂亮的html，默认为一行

请教：如果让jade输出漂亮的 html代码 默认jade 输出的html 在一行上。

4 回复

当然可以。在使用Express框架配合Jade模板引擎时，默认情况下生成的HTML可能会被压缩到一行中，这通常不是我们期望的效果。为了使生成的HTML格式更加美观，我们可以调整Jade的配置来实现这一目标。

解决方案

我们需要修改Jade的渲染选项，使其在输出HTML时保留换行符和缩进。具体来说，可以在Express应用中设置pretty选项为true。这样Jade在渲染模板时会生成格式化的HTML代码。

示例代码

首先确保你的项目已经安装了Express和Jade（现在更推荐使用Pug作为Jade的后继版本）：

npm install express

接下来是一个简单的Express应用示例，演示如何配置Jade以生成格式化的HTML：

const express = require('express');
const app = express();

// 设置视图引擎为Jade，并开启美化功能
app.set('views', './views'); // 设置视图文件夹路径
app.set('view engine', 'jade');
app.locals.pretty = true; // 设置Jade的pretty选项为true

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: '首页', message: '欢迎访问!' });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Jade模板文件示例 (views/index.jade)

doctype html
html
  head
    title= title
  body
    h1 #{message}
    p 这是一段示例文本。

解释

  • app.locals.pretty = true; 这行代码告诉Jade在渲染模板时添加适当的缩进和换行，使得生成的HTML代码更加可读。
  • 当你访问根路径/时，服务器将渲染index.jade模板并返回一个格式化的HTML页面。

通过这种方式，你可以轻松地让Express和Jade生成的HTML代码更加美观和易于阅读。


http://stackoverflow.com/questions/5276892/expressjs-how-to-output-pretty-html

感谢回复。

Express3.x

app.configure(‘development’, function(){ app.use(express.errorHandler()); app.locals.pretty = true; }); Express 2.x

app.configure(‘development’, function(){ app.use(express.errorHandler()); app.set(‘view options’, { pretty: true }); });

express 3 已取消了 view options

为了使 Jade（现称为 Pug）输出格式化的 HTML，你可以使用 Pug 的缩进来确保生成的 HTML 具有良好的格式。此外，可以使用 pretty 选项来明确指定输出格式化的 HTML。

示例代码

首先，确保你已经安装了 Express 和 Pug 模板引擎：

npm install express pug

然后，在你的 Express 应用中配置 Pug，并启用 pretty 选项：

const express = require('express');
const app = express();

// 设置模板引擎为 Pug
app.set('view engine', 'pug');

// 使用 pretty 选项使输出的 HTML 更加美观
app.locals.pretty = true;

// 定义路由
app.get('/', (req, res) => {
    res.render('index', {
        title: '主页',
        content: '这是首页的内容'
    });
});

app.listen(3000, () => {
    console.log('应用运行在 http://localhost:3000');
});

Pug 模板文件 (views/index.pug)

接下来，编写一个简单的 Pug 模板文件 views/index.pug：

doctype
html
  head
    title= title
  body
    h1 页面标题
    p= content

解释

  • app.locals.pretty = true;：这行代码确保渲染的所有 Pug 模板都将生成格式化的 HTML。
  • Pug 模板中的缩进：Pug 会根据缩进来生成对应的 HTML 标签。保持缩进的一致性可以使生成的 HTML 更美观。

通过以上设置，当你访问 http://localhost:3000/ 时，你会看到格式化的 HTML 输出，而不是默认的一行。

如果你希望在每个请求时都独立地控制是否输出格式化的 HTML，可以在调用 res.render() 方法时传递 pretty 选项：

app.get('/', (req, res) => {
    res.render('index', {
        title: '主页',
        content: '这是首页的内容',
        pretty: true // 或者 false 来禁用格式化
    });
});

这样，你就可以灵活地控制每个页面是否需要格式化的 HTML 输出。

回到顶部