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幫助我們避免在多個(gè)網(wǎng)頁(yè)上重復(fù)相同的代碼。

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

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

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

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

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

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

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

要下載Node JS，請(qǐng)?jiān)L問(wèn)nodejs.org ，然后安裝。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

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

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

首先，請(qǐng)確保您已通過(guò)npm安裝了EJS和express。

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

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

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局??部可以在沒(méi)有express-ejs-layouts模塊的情況下工作 。 EJS局??部函數(shù)適用于創(chuàng)建諸如header ， footer ， div之類的對(duì)象的情況。

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)頁(yè)包含部分內(nèi)容，它必須通過(guò)一行代碼連接到每個(gè)部分，這與應(yīng)用于各處的布局不同。

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

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

Let's see an example for,

讓我們看一個(gè)例子，

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

打開(kāi)文本編輯器，然后輸入以下代碼，另存為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條路線，并將兩條路線都渲染到一個(gè)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

打開(kāi)文本編輯器，然后輸入以下代碼，另存為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文件有一個(gè)鏈接到其作為部分的partial.ejs文件。

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

打開(kāi)文本編輯器，然后輸入以下代碼，另存為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文件沒(méi)有鏈接到不完整的部分，因此它不會(huì)顯示不完整的部分。

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

  請(qǐng)注意：文件夾名稱視圖不是我選擇的隨機(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é)點(diǎn)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)于頁(yè)面不會(huì)顯示部分頁(yè)面，因?yàn)樗鼪](méi)有鏈接。

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

感謝您與我編碼！ 隨意發(fā)表評(píng)論或問(wèn)題。

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

appweb ejs

總結(jié)

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

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