Nodejs 如何在一个地方统一设定layout

Nodejs 如何在一个地方统一设定layout

用的是express3.0，我整个项目只有一个layout。因为涉及到路径问题，所以在每个页面都要写不同的layout路径。经常会出现…/…/…/…/layout这样夸张的路径 升级3.0之后很多东西都很陌生。想问一下，怎么统一在一个地方设定，本项目所有文件用同一个layout。jade和ejs的都可以。

4 回复

Node.js 如何在一个地方统一设定 layout

在使用 Express 3.0 进行开发时，你可能会遇到需要为多个视图模板（如 Jade 或 EJS）设置统一的布局文件的情况。这通常会导致在每个视图中重复编写冗长的路径，特别是在不同层级的目录结构中。本文将介绍如何在一个地方统一设定布局文件，以便在整个项目中重用。

步骤 1: 安装依赖

首先，确保你已经安装了 express 和对应的模板引擎。如果你使用的是 Jade 或 EJS，可以通过以下命令安装：

npm install express --save
npm install ejs --save  # 如果使用 EJS
# npm install pug --save  # 如果使用 Jade (现在称为 Pug)

步骤 2: 配置 Express

接下来，在你的 Express 应用中配置视图引擎，并指定一个默认的布局文件。假设我们使用 EJS 作为模板引擎。

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

const app = express();

// 设置视图引擎为 EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 设置默认布局文件
app.engine('ejs', require('ejs').__express);
app.set('view options', { layout: 'layouts/default' });

// 定义路由
app.get('/', function(req, res) {
    res.render('index', { title: '主页' });
});

// 启动服务器
app.listen(3000);
console.log('Server started on port 3000');

步骤 3: 创建布局文件

在上面的代码中，我们指定了 layout 选项为 'layouts/default'。这意味着 Express 将在渲染每个视图时使用 views/layouts/default.ejs 作为布局文件。

创建 views/layouts/default.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <main>
        <%= body %>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

步骤 4: 创建视图文件

最后，创建一个简单的视图文件 views/index.ejs：

<h2>欢迎来到主页</h2>
<p>这是一个示例页面。</p>

通过这种方式，你可以轻松地在多个视图中重用相同的布局文件，而无需在每个视图中重复指定路径。这样不仅提高了代码的可维护性，也简化了开发过程。


同求mustache的，连partial都不支持，好桑感

为什么不试试这个Liquid模板呢？ https://github.com/leizongmin/express-liquid

对于使用 Express 3.0 的项目，可以通过在应用初始化时设置一个默认的布局模板来简化整个项目的模板配置。下面以 Jade 和 EJS 模板引擎为例，提供一种简单的解决方案。

示例代码（使用 Jade）

  1. 安装 Jade（如果还没有安装）：

    npm install jade --save

  2. 配置 Express 应用程序：

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

// 设置视图引擎为 Jade
app.set('views', './views');  // 指定视图文件夹
app.set('view engine', 'jade');

// 统一设置默认布局
app.locals.layout = 'layouts/default';

app.get('/', function(req, res) {
    res.render('index', { title: '首页' });
});

app.listen(3000);

    在上面的代码中，app.locals.layout 设置了一个默认布局路径，这将被所有渲染的视图所使用，除非在特定的视图中显式覆盖它。

  3. 创建默认布局文件 (./views/layouts/default.jade)：

    doctype html
html
  head
    title= title
  body
    block content

  4. 创建具体视图文件 (./views/index.jade)：

    extends layouts/default

block content
  h1= title

示例代码（使用 EJS）

  1. 安装 EJS（如果还没有安装）：

    npm install ejs --save

  2. 配置 Express 应用程序：

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

// 设置视图引擎为 EJS
app.set('views', './views');  // 指定视图文件夹
app.set('view engine', 'ejs');

// 统一设置默认布局
app.engine('html', require('ejs').renderFile);

app.get('/', function(req, res) {
    res.render('index', { title: '首页' });
});

app.listen(3000);

  3. 创建默认布局文件 (./views/layouts/default.ejs)：

    <!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <%- body %>
  </body>
</html>

  4. 创建具体视图文件 (./views/index.ejs)：

    <%- include layouts/default.ejs -%>
<h1><%= title %></h1>

通过上述方法，你可以为整个项目设置一个默认的布局文件，从而避免在每个视图中重复指定布局路径。这不仅简化了代码，还使得布局更改更加方便。

回到顶部