Nodejs jade怎样将参数传入layout

Nodejs jade怎样将参数传入layout

如题 比如有一个header 根据载入页面不同header的显示不一样 但是header写在layout里面 怎样变化呢

3 回复

Node.js Jade 如何将参数传递到 Layout

在使用 Node.js 和 Jade（现在称为 Pug）时，经常会遇到需要在不同的视图中共享相同的布局文件（layout），但同时又需要根据具体页面的不同来动态改变部分内容的情况。比如，你有一个全局的头部（header），但根据载入的页面不同，头部的内容或样式可能会有所变化。

解决方案

解决这个问题的一种方法是利用 Jade/Pug 的 block 和 extends 特性，结合动态数据传递。你可以通过在路由处理函数中传递数据给布局模板，然后在布局模板中使用这些数据来动态渲染内容。

示例代码

  1. 创建一个基本的布局文件 (layout.pug)

    doctype html
html
  head
    title= title
  body
    block header
      // 默认头部内容
      h1 Default Header
    
    block content
      p This is the default content.
    
    block footer
      p © 2023 Your Company

  2. 创建一个具体的视图文件 (home.pug)

    extends layout.pug

block header
  // 覆盖默认的头部内容
  h1 Welcome to Home Page

block content
  p This is the home page content.

  3. Node.js 路由处理函数

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

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

// 定义路由
app.get('/', (req, res) => {
  // 渲染首页，并传递一些数据
  res.render('home', { title: 'Home' });
});

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

关键点解释

  • Block 和 Extends: 使用 block 和 extends 可以让你定义可重用的部分，比如头部、页脚等，并允许子模板覆盖这些部分。
  • 动态数据传递: 在路由处理函数中，你可以传递动态数据给视图模板，这些数据可以在布局模板中被访问。
  • Pug 模板引擎: Pug 提供了强大的模板继承和块替换功能，使得在不重复代码的情况下实现页面个性化变得简单。

通过这种方式，你可以轻松地在不同的页面之间共享相同的布局，同时又能保持每个页面的独特性。


= =吼吼 写完发现node传入的参数貌似layout里面也可以用 我又2了

要在 Node.js 中使用 Jade（现在称为 Pug）将参数传递给布局文件（layout），可以通过在渲染视图时将数据作为对象的一部分传递来实现。布局文件可以访问这些数据，并根据传递的参数动态生成不同的内容。

示例代码

假设目录结构如下：

views/
├── layout.pug
└── index.pug

layout.pug 文件

doctype
html
  head
    title= title
  body
    block content

index.pug 文件

extends layout

block content
  if headerType === 'home'
    include ./includes/header-home.pug
  else if headerType === 'about'
    include ./includes/header-about.pug
  else
    include ./includes/header-default.pug

Node.js 服务器端代码 (app.js)

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

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

// 渲染首页时传递 headerType 参数
app.get('/', function(req, res) {
  res.render('index', {
    title: '主页',
    headerType: 'home' // 可以根据需要改变这个值
  });
});

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

在这个例子中：

  1. layout.pug 是一个基础布局文件，定义了HTML的基本结构。
  2. index.pug 文件继承了基础布局，并使用 block content 定义了一个可以被替换的部分。它检查传递的 headerType 参数并根据其值包含不同的头部文件。
  3. 在服务器端，当渲染 index.pug 文件时，我们通过传递 headerType 参数来决定包含哪个头部文件。

这种方法使得可以根据上下文动态地改变页面布局中的部分，例如不同的头部内容。

回到顶部