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局​​部函数 。 EJS Partials帮助我们避免在多个网页上重复相同的代码。

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

例如，您可能希望多个网页使用相同的标题。

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

在网页上创建单个修订内容时， EJS局​​部函数也类似于EJS布局 。

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

做记录！ 在开始使用EJS之前，您应该已经安装了Node.js。

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

要下载Node JS，请访问nodejs.org ，然后安装。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

*需要基本NODE.JS /表达知识

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 ejs
or
npm 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局​​部函数适用于创建诸如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.

注意：要使网页包含部分内容，它必须通过一行代码连接到每个部分，这与应用于各处的布局不同。

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

*要了解布局，请阅读有关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模块 ，并且还创建了一条新路线。

Now, let's create our ejs files:

现在，让我们创建我们的ejs文件：

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

我们创建了2条路线，并将两条路线都渲染到一个ejs文件中 。

Now let's create our ejs files.

现在，让我们创建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标记。

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

  这里的逻辑是，将服务器(即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的默认模板引擎位置。

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

  请注意：文件夹名称视图不是我选择的随机词，而是默认情况下Express检查模板引擎的保留文件夹名称。

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

最后，在终端中使用节点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.

关于页面不会显示部分页面，因为它没有链接。

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

感谢您与我编码！ 随意发表评论或问题。

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

appweb ejs