一个比较好的Nodejs Jade语法文档

一个比较好的Nodejs Jade语法文档

http://naltatis.github.io/jade-syntax-docs/#for 挺好的的一个jade文档

2 回复

一个比较好的Node.js Jade语法文档

Jade（现在称为Pug）是一种简洁、优雅的模板引擎，用于生成HTML。它提供了一种更简洁的方式来编写HTML，使得HTML文件更加易读且易于维护。以下是一个简短的介绍和一些示例代码，帮助你快速上手Jade。

安装Jade

首先，确保你已经安装了Node.js环境。然后可以通过npm来安装Jade：

npm install pug --save

基本语法

Jade的基本语法非常简单。例如，创建一个简单的HTML页面可以这样写：

doctype html
html
  head
    title My Webpage
  body
    h1 Hello, World!
    p This is a Jade template.

上面的代码会被编译成如下HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a Jade template.</p>
  </body>
</html>

循环

循环结构在Jade中也非常直观。例如，你可以使用each来遍历数组并生成HTML元素：

ul
  each item in ['Apple', 'Banana', 'Orange']
    li= item

这段代码会生成如下HTML：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

条件语句

Jade还支持条件语句，如if、else if、else等。例如：

- var isLoggedIn = true
if isLoggedIn
  p Welcome back!
else
  p Please sign in.

这将生成：

<p>Welcome back!</p>

如果你想要了解更多详细的Jade语法和高级功能，可以参考以下链接：

希望这些示例能帮助你开始使用Jade进行开发！


针对“一个比较好的Node.js Jade语法文档”这个问题，可以推荐一个非常有用的资源——Naltatis 的 Jade 语法文档。这个文档不仅包含了详细的语法说明，还提供了许多示例，方便开发者理解和使用Jade模板引擎。

示例代码

假设我们有一个简单的HTML页面，需要通过Jade模板引擎来生成。以下是一个基本的Jade模板代码示例：

doctype html
html
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
        bar();
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      ul
        each val in items
          li= val

上述代码将渲染成如下的HTML结构：

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <script type="text/javascript">
      if (foo) {
        bar();
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <!-- 更多列表项 -->
      </ul>
    </div>
  </body>
</html>

解释

  • doctype 定义了文档类型。
  • html, head, 和 body 是HTML的基本结构标签。
  • title= pageTitle 表示动态设置页面标题。
  • script(type='text/javascript'). 允许嵌入JavaScript代码块。
  • if 和 else 条件语句用于根据条件插入不同的内容。
  • each 循环遍历数组或对象，并生成相应的列表项。

通过访问 Naltatis 的 Jade 语法文档链接（http://naltatis.github.io/jade-syntax-docs/#for），你可以查看更多关于循环、条件语句以及其他高级功能的详细信息。

回到顶部