templates

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....

學習如何在Svelte中使用模板，特別是如何使用條件語句。 任何一個好的Web模板語言都至少提供了兩樣東西：條件結構和循環。 Svelte也不例外，在本篇文章中，我將介紹條件結構。 您希望能夠查看一個值/表達式，如果它指向一個真值，則執行某些操作；如果它指向一個假值，則執行其他操作。 Svelte提供了一組非常強大的控制結構。 首先是if： {#if isRed} <p>紅色</p> {/if} 有一個開始標記{#if}和一個結束標記{/if}。開始標記檢查一個值或語句是否為真值。在這個例子中，isRed可以是一個具有true值的布爾值： <script> let isRed = true </script> 一個空字符串是假值，但帶有內容的字符串是真值。 0是假值，但大於0的數字是真值。 布爾值true是真值，當然，false是假值。 如果開始標記的條件不滿足（提供了一個假值），則不會發生任何事情。 如果條件不滿足，需要執行其他操作，我們可以使用適當命名的else語句： {#if isRed} <p>紅色</p> {:else} <p>不是紅色</p> {/if} 在模板中，要麼渲染第一個代碼塊，要麼渲染第二個代碼塊。沒有其他選項。 您可以在if塊條件中使用任何JavaScript表達式，因此可以使用!運算符對一個選項進行取反： {#if !isRed} <p>不是紅色</p> {:else} <p>紅色</p> {/if} 現在，在else內部，您可能還想檢查其他條件。這就是{:else if somethingElse}語法的用法： {#if isRed} <p>紅色</p> {:else if isGreen} <p>綠色</p> {:else} <p>既不是紅色也不是綠色</p> {/if} 您可以擁有多個這樣的代碼塊，不僅僅是一個，並且可以對它們進行嵌套。以下是一個更複雜的示例： {#if isRed} <p>紅色</p> {:else if isGreen} <p>綠色</p> {:else if isBlue} <p>它是藍色</p> {:else} {#if isDog} <p>它是一隻狗</p> {/if} {/if}

在 Hugo 中，如何傳遞多個參數給 partial？這並不像看起來那麼簡單，你需要使用一個技巧。讓我們看一下。 我使用 Hugo 來管理這個網站，它非常方便。 今天遇到的一個問題是如何將 2 個參數傳遞給 partial。 由於在 partial 中無法訪問 .Site.Pages 以獲取網站頁面列表（由於作用域問題），我不得不創建一個字典並填充其中 2 個項目： {{ partial "my-partial.html" (dict "context" . "pages" $.Site.Pages) }} 這裡的關鍵是將 (dict "context" . "pages" $.Site.Pages) 作為參數傳遞，而不是像通常在 partial 中使用的 .。 現在，在 partial 中，我們需要使用 .context 來訪問當前上下文變量，而不是使用 .。 如果要訪問 pages 的值，可以使用 .pages。 當然，您也可以傳遞多個項目。只需將更多項目添加到字典中即可。