PugJS 基本标签(1) - 芒果文档

📌 相关文章

📜 PugJS 基本标签(1)

📅 最后修改于: 2023-12-03 14:45:41.588000 🧑 作者: Mango

PugJS 基本标签

PugJS 是一个高性能的模板引擎，功能强大且易于使用。它使用简洁的语法以及一些特殊的标签来帮助你构建动态的Web页面。

安装

可以通过 npm 进行安装:

npm install pug

基本语法

Pug 使用缩进来表示HTML元素之间的父子关系，没有使用闭合标签。下面是一个Pug模板的示例：

html
  head
    title PugJS 基本标签
  body
    h1 欢迎使用 PugJS
    p Pug 是一个强大的模板引擎
    ul
      li 有简洁的语法
      li 无需闭合标签
      li 缩进表示父子关系

上述代码生成的HTML如下：

<html>
  <head>
    <title>PugJS 基本标签</title>
  </head>
  <body>
    <h1>欢迎使用 PugJS</h1>
    <p>Pug 是一个强大的模板引擎</p>
    <ul>
      <li>有简洁的语法</li>
      <li>无需闭合标签</li>
      <li>缩进表示父子关系</li>
    </ul>
  </body>
</html>

基本标签

类

类用于给HTML元素添加一个或多个CSS类。它的格式为 .类名称。例如：

h2.subtitle.title Pug is awesome!

上述代码生成的HTML为：

<h2 class="subtitle title">Pug is awesome!</h2>

ID

ID用于给HTML元素添加一个唯一的标识符。它的格式为 #ID名称。例如：

div#content
  p This is the main content.

上述代码生成的HTML为：

<div id="content">
  <p>This is the main content.</p>
</div>

属性

属性用于给HTML元素添加额外的特性。它的格式为 (属性名称=属性值)。例如：

a(href="https://www.pugjs.org", target="_blank") Pug官方网站

上述代码生成的HTML为：

<a href="https://www.pugjs.org" target="_blank">Pug官方网站</a>

注释

Pug使用 // 来添加单行注释，使用 //- 来添加块注释。例如：

// 这是单行注释
//- 这是块注释

总结

PugJS 提供了简洁的语法和一些特殊的标签来帮助你构建动态的Web页面。以上介绍了Pug的基本标签，包括标签、类、ID、属性和注释。希望这些信息能帮助你更好地使用PugJS模板引擎。