pug

Express 可以处理服务器端模板引擎。模板引擎允许我们向视图中添加数据，并根据数据动态生成 HTML。 Express 默认使用 Jade 作为模板引擎，但 Jade 是 Pug 的旧版，具体来说是 Pug 1.0。 由于商标问题，该项目在 2016 年发布了 2.0 版本时将名称从 Jade 更改为 Pug。你仍然可以使用 Jade，即 Pug 1.0，但未来最好使用 Pug 2.0。 尽管 Jade 的最后一个版本已经有三年时间了（截至文章撰写时的夏季 2018），但在 Express 中仍然是默认设置，这是为了向后兼容。 在任何新项目中，你应该使用 Pug 或其他你选择的引擎。Pug 的官方网站是 https://pugjs.org/。 你可以使用许多不同的模板引擎，包括 Pug、Handlebars、Mustache、EJS 等。 使用 Pug 首先我们需要安装 Pug: npm install pug 在初始化 Express 应用程序时，我们需要设置 Pug： const express = require('express') const app = express() app.set('view engine', 'pug') 现在我们可以开始在 .pug 文件中编写模板了。 创建一个关于页面的视图： app.get('/about', (req, res) => { res....

如何使用Pug模板引擎 Pug介紹 Pug長什麼樣子？ 安裝Pug 設置Pug作為Express的模板引擎 你的第一個Pug模板 在Pug中插入變量 插入函數返回值 為元素添加id和class屬性 設置doctype Meta標籤 添加腳本和樣式 內聯腳本 循環 條件語句 設置變量 增加變量的值 將變量賦值給元素值 迭代變量 包含其他Pug文件 定義塊 擴展基礎模板 注釋 可見 不可見 Pug介紹 什麼是Pug？它是一個用於服務端Node.js應用程序的模板引擎。 Express有能力處理服務端模板引擎。模板引擎允許我們將數據添加到視圖中，動態生成HTML。 Pug是一個舊東西的新名字。它是Jade 2.0。 由於商標問題，當該項目在2016年發布2.0版本時，名稱從Jade更改為Pug。您仍然可以使用Jade（又名Pug 1.0），但未來最好使用Pug 2.0。 也可以參考Jade和Pug之間的差異 Express使用Jade作為默認的模板引擎。如上所述，Jade是Pug的舊版本 - 具體而言是Pug 1.0。 儘管Jade的最後一個版本已經是3年前（在撰寫本文時，2018年夏季），但出於向後兼容的原因，它仍然是Express的默認版本。 Pug的官方網站是https://pugjs.org/。 Pug長什麼樣子？ p 您好，來自Flavio 此模板將創建一個內容為“您好，來自Flavio”的p標簽。 如您所見，Pug非常特殊。它將標簽名作為行中的第一個內容，其餘內容作為標簽中的內容。 如果您習慣使用使用HTML並插入變量的模板引擎（例如Handlebars，下面將進行介紹），您可能會遇到問題，尤其是當您需要將現有的HTML轉換為Pug時。這款將HTML轉換為Jade（非常相似，但與Pug稍有不同）的在線轉換器將非常有幫助：https://jsonformatter.org/html-to-jade 安裝Pug 安裝Pug非常簡單，只需運行npm install： npm install pug 設置Pug作為Express的模板引擎 在初始化Express應用程序時，我們需要設置它： const path = require('path') const express = require('express') const app = express() app.set('view engine', 'pug') app.set('views', path....