谁有关Nodejs于jade模板的学习资料，共享下

谁有关Nodejs于jade模板的学习资料，共享下

最近正在学习nodejs，刚接触jade，希望大家能分享下自己的资料。。。不胜感激。。

6 回复

当然可以！以下是一份关于Node.js与Jade（现在称为Pug）模板的学习资料。我会包括一些基本的示例代码和简要说明，以帮助你快速入门。

Node.js与Jade模板学习资料

1. 安装Node.js和Jade

首先，确保你已经安装了Node.js。你可以从Node.js官网下载并安装。

然后，通过npm（Node.js包管理器）安装Jade（现称为Pug）：

npm install pug --save

2. 基本概念

Jade是一种简洁的模板引擎，它允许你使用简单的语法来生成HTML。以下是一个基本的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

用Jade（Pug）语法表示如下：

doctype html
html
  head
    title Page Title
  body
    h1 This is a Heading
    p This is a paragraph.

3. 示例代码

假设我们有一个简单的Express应用，使用Jade作为视图引擎。以下是完整的示例：

项目结构

myapp/
├── package.json
├── app.js
└── views/
    └── index.pug

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "pug": "^3.0.2"
  }
}

app.js

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

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

// 路由
app.get('/', (req, res) => {
  res.render('index', { title: 'Hello World' });
});

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

views/index.pug

doctype html
html
  head
    title #{title}
  body
    h1 Welcome to My App!
    p This is a simple example using Pug.

4. 运行项目

在项目根目录运行以下命令启动应用：

npm start

打开浏览器访问 http://localhost:3000，你应该能看到一个简单的页面显示 “Welcome to My App!” 和 “This is a simple example using Pug.”

希望这些示例代码和解释能够帮助你快速上手Node.js和Jade模板。如果你有任何问题或需要进一步的帮助，请随时提问！


http://jade-lang.com/

http://naltatis.github.io/jade-syntax-docs/

http://www.learnjade.com/

https://github.com/jadejs/jade/blob/master/Readme_zh-cn.md

在实践中使用就是学习

http://www.lellansin.com/jade-模板引擎使用.html 我也贴一个

当然可以！Jade 模板引擎现在叫做 Pug。Pug 是一个高性能的模板引擎，广泛应用于 Node.js 应用中。这里我将提供一些基本的学习资源以及示例代码帮助你快速上手。

学习资源

  1. 官方文档：这是最权威的资料。

  2. 视频教程：

    • YouTube 上有很多教程，例如 “Node.js Tutorial for Beginners” 系列视频中包含了关于 Pug 的介绍。

  3. 书籍：

    • 《Node.js 8 实战》这本书中有关于 Pug 的章节。

  4. 在线课程：

    • Udemy 或 Coursera 上有很多 Node.js 和 Pug 相关的课程。

  5. 博客文章：

    • Medium 或个人博客上有许多经验分享和教程。

示例代码

Pug 的语法非常简洁和直观。下面是一些基本示例：

1. 基本 HTML 结构

doctype html
html(lang='en')
  head
    title= pageTitle
    script(src='script.js')
  body
    h1=title
    #container.col-6
      ul
        each val in items
          li= val

编译后的 HTML 输出：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Title</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Title</h1>
    <div id="container" class="col-6">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <!-- 更多列表项 -->
      </ul>
    </div>
  </body>
</html>

2. 变量与条件语句

block content
  if user
    p Welcome #{user}
  else
    p Please sign up or log in

3. 循环结构

ul
  each item, i in ['apple', 'banana', 'orange']
    li #{i}: #{item}

以上就是一些基本的 Pug 语法示例。希望这些信息对你有所帮助！如果你有任何疑问或需要进一步的帮助，请随时留言。

回到顶部