求Nodejs中jade引擎渲染语法，详细点的，包括加css，js的。

求Nodejs中jade引擎渲染语法，详细点的，包括加css，js的。

7 回复

求Nodejs中Jade引擎渲染语法，详细点的，包括加CSS、JS的方法

Jade（现称为Pug）是一种简洁且高效的模板引擎，用于生成HTML。本帖将详细介绍如何使用Jade进行页面渲染，并展示如何在渲染的HTML中加入CSS和JavaScript文件。

1. 安装Jade

首先，确保你已经安装了Node.js。然后，在你的项目目录下运行以下命令来安装Jade：

npm install pug --save

注意：由于Jade已经更名为Pug，但其核心功能保持不变。因此，本文档将继续使用Jade作为库的名称。

2. 基本语法

Jade的基本语法非常简洁，可以大大减少HTML模板的编写工作量。以下是一个简单的例子：

doctype html
html
  head
    title= pageTitle
    script(src='https://code.jquery.com/jquery-3.6.0.min.js')
  body
    h1 My Page
    #container
      p Welcome to my page.

上述代码将被编译成：

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <h1>My Page</h1>
    <div id="container">
      <p>Welcome to my page.</p>
    </div>
  </body>
</html>

3. 引入CSS和JS

在Jade中，你可以通过link标签引入外部CSS文件，通过script标签引入外部JavaScript文件。这里是一个例子：

doctype html
html
  head
    title= pageTitle
    link(rel='stylesheet', href='styles.css')
    script(src='https://code.jquery.com/jquery-3.6.0.min.js')
  body
    h1 My Page
    #container
      p Welcome to my page.

在这个例子中，styles.css文件需要与HTML文件位于同一目录下，或者提供正确的路径。

4. 使用变量

Jade支持动态内容插入。例如，你可以通过变量传递数据到模板中：

const pug = require('pug');

// 编译模板
const compiledFunction = pug.compileFile('template.pug');
const html = compiledFunction({ pageTitle: 'Hello World' });

console.log(html);

对应的template.pug文件：

doctype html
html
  head
    title= pageTitle
    link(rel='stylesheet', href='styles.css')
  body
    h1= pageTitle

这将输出包含Hello World标题的HTML页面。

以上就是关于Node.js中使用Jade引擎的基本介绍和如何添加CSS和JavaScript文件的方法。希望对你有所帮助！


ejs 不够好?

我安装这个版本，自带的是jade。

装一个ejs就好了的吧= =

恩，我现在就在找ejs模板的包下载

你可有好的地址？

Node.js 中 Jade 引擎渲染语法详解

Jade（现在称为Pug）是一种简洁、清晰的模板引擎，常用于生成HTML。在Node.js项目中使用Jade进行页面渲染时，可以方便地添加CSS和JavaScript文件。以下将详细介绍如何使用Jade模板引擎以及如何嵌入CSS和JavaScript。

安装Jade

首先，确保已经安装了Jade。如果还没有安装，可以通过npm来安装：

npm install pug --save

注意：Jade现已更名为Pug，但其功能与使用方式不变。

基本语法

  1. 声明DOCTYPE:

    doctype html

  2. HTML标签:

    html
  head
    title My Page Title
  body
    h1 Hello, Pug!

  3. 嵌入变量：

    - var title = 'Hello World'
h1= title

  4. 条件语句：

    - if isLoggedIn
  p You are logged in.
- else
  p Please log in to continue.

  5. 循环语句：

    ul
  each val in ['one', 'two', 'three']
    li= val

添加CSS和JS

  1. 引入外部CSS文件:

    link(rel='stylesheet', href='/stylesheets/style.css')

  2. 引入外部JS文件:

    script(src='/javascripts/main.js')

  3. 内联CSS和JS:

    style
  .highlight { font-weight: bold; }
script.
  console.log('Hello from Pug!');

示例代码

假设我们有一个简单的Node.js应用，使用Express框架，并且使用Jade作为模板引擎。以下是一个完整的示例：

app.js

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

app.set('view engine', 'pug');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', { title: 'Welcome!' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

views/index.pug

doctype html
html
  head
    title #{title}
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1 Welcome to our site!
    script(src='/javascripts/main.js')

在这个例子中，index.pug模板文件渲染了一个包含CSS和JavaScript引用的基本HTML页面。CSS和JS文件分别位于public/stylesheets/和public/javascripts/目录下。

希望这些示例能帮助你更好地理解和使用Jade/Pug模板引擎。

回到顶部