appweb ejs

Hi! Welcome. Today, we are going to look at EJS partials. EJS Partials help us avoid repetition of the same code on several web pages.

嗨！ 歡迎。 今天，我們將看EJS局??部函數(shù) 。 EJS Partials幫助我們避免在多個網(wǎng)頁上重復(fù)相同的代碼。

For example, you may want the same header for several web pages.

例如，您可能希望多個網(wǎng)頁使用相同的標(biāo)題。

EJS partials work like EJS layouts too in creating a single fix content on a web page.

在網(wǎng)頁上創(chuàng)建單個修訂內(nèi)容時， EJS局??部函數(shù)也類似于EJS布局 。

Take Note! You should have Node.js installed in your before you can start using EJS in this article.

做記錄！ 在開始使用EJS之前，您應(yīng)該已經(jīng)安裝了Node.js。

To download Node JS, visit nodejs.org, then install.

要下載Node JS，請訪問nodejs.org ，然后安裝。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

*需要基本NODE.JS /表達(dá)知識

To begin, ensure you have EJS and express installed via npm.

首先，請確保您已通過npm安裝了EJS和express。

To install EJS, simply open a terminal/command prompt and type the following command:

要安裝EJS，只需打開終端/命令提示符并鍵入以下命令：

npm install ejsornpm install ejs –save

Unlike EJS Layouts, EJS partials can work without the express-ejs-layouts module. EJS partials apply in cases like creating objects like header, footer, div.

與EJS布局不同， EJS局??部可以在沒有express-ejs-layouts模塊的情況下工作 。 EJS局??部函數(shù)適用于創(chuàng)建諸如header ， footer ， div之類的對象的情況。

NB: For a web page to contain the partial, it must be connected to each partial via a line of code, unlike layouts which apply everywhere.

注意：要使網(wǎng)頁包含部分內(nèi)容，它必須通過一行代碼連接到每個部分，這與應(yīng)用于各處的布局不同。

* To know about layouts, read our article on EJS LAYOUTS

*要了解布局，請閱讀有關(guān)EJS LAYOUTS的文章

Let's see an example for,

讓我們看一個例子，

Open your text editor and type the following code, save as app.js.

打開文本編輯器，然后輸入以下代碼，另存為app.js。

var express = require('express'); var ejs = require('ejs'); var app = express(); app.set('view engine', 'ejs'); app.get("/", function(req, res) {res.render("home"); }); app.get("/about", function(req, res) {res.render("about"); }); app.listen(3000, function() {console.log("server is listening!!!"); });

In our code above, we have included the express-ejs-layouts module and have also created a new route.

在上面的代碼中，我們包含了express-ejs-layouts模塊 ，并且還創(chuàng)建了一條新路線。

Now, let's create our ejs files:

現(xiàn)在，讓我們創(chuàng)建我們的ejs文件：

We created 2 routes and have rendered both routes to an ejs file.

我們創(chuàng)建了2條路線，并將兩條路線都渲染到一個ejs文件中 。

Now let's create our ejs files.

現(xiàn)在，讓我們創(chuàng)建ejs文件 。

Open a text editor and type the following code, save as home.ejs

打開文本編輯器，然后輸入以下代碼，另存為home.ejs

<%- include('partials/partial') %><h4> Home Page</h4>

The home.ejs file has a link to the partial.ejs file which serves as the partial.

該home.ejs文件有一個鏈接到其作為部分的partial.ejs文件。

Open a text editor and type the following code, save as about.ejs

打開文本編輯器，然后輸入以下代碼，另存為about.ejs

<h3> About US</h3>

• You can clearly see that the about.ejs file has no link to the partial so it won't display the partial.

  您可以清楚地看到about.ejs文件沒有鏈接到不完整的部分，因此它不會顯示不完整的部分。

• Take a look at the different ejs tag used here.

  看一下這里使用的不同的ejs標(biāo)記。

• The logic here is, the server which is the app.js file is linked to the home.ejs and about.ejs files which the home.ejs file is linked to the partial with file name partial.ejs.

  這里的邏輯是，將服務(wù)器(即app.js文件)鏈接到home.ejs和about.ejs文件(將home.ejs文件鏈接到partial，鏈接文件的名稱為partial.ejs) 。

  <%- include('partials/partial') %>

• The path indicates that the partial is located in the partials folder. Partials folder is found in the views folder which is the default template engine location for express.

  該路徑表明該局部文件位于partials文件夾中 。 在視圖文件 夾中找到Partials文件 夾 ，這是express的默認(rèn)模板引擎位置。

• Take Note: The folder name views is not a random word I selected but it's the reserved folder name where express checks for template engine by default.

  請注意：文件夾名稱視圖不是我選擇的隨機(jī)詞，而是默認(rèn)情況下Express檢查模板引擎的保留文件夾名稱。

Finally, initiate the app.js file with node app.js in a terminal and view the port in a browser.

最后，在終端中使用節(jié)點app.js初始化app.js文件，并在瀏覽器中查看端口。

localhost:3000 and localhost:3000/about

Output

輸出量

The about page doesn't display the partial because it has no link to it.

關(guān)于頁面不會顯示部分頁面，因為它沒有鏈接。

Thanks for coding with me! Feel free to drop a comment or question.

感謝您與我編碼！ 隨意發(fā)表評論或問題。

翻譯自: https://www.includehelp.com/node-js/ejs-partials.aspx

appweb ejs

總結(jié)

以上是生活随笔為你收集整理的appweb ejs_EJS部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。