appweb ejs_EJS部分

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

输出量

EJS partials 1
EJS partials 2

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/543721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

同事反馈环:如何实现持续改进的文化

“魔镜魔镜告诉我&#xff0c;谁才是最美丽的人&#xff1f;”&#xff0c;邪恶的皇后如此问道。似乎在精益和敏捷企业中也会有很多与《白雪公主》中类似的问题&#xff0c;如果我们没有一面可以看到我们正在做什么的镜子&#xff0c;我们就很难搞清楚我们有多么美丽&#xff0…

经典功率谱估计及Matlab仿真

原文出自&#xff1a;http://www.cnblogs.com/jacklu/p/5140913.html 功率谱估计在分析平稳各态遍历随机信号频率成分领域被广泛使用&#xff0c;并且已被成功应用到雷达信号处理、故障诊断等实际工程中。本文给出了经典功率谱估计的几类方法&#xff0c;并通过Matlab的实验仿真…

极验验证码流程-3.图片加密处理 图片移位

终于把图片加密给搞定了&#xff0c;原理是他把图分成了52个部分&#xff0c;然后通过移动来形成新的图片 主要的位置关系看代码 顺便吐槽下ruby,小众语言就是这么不方便&#xff0c;很多库都没有&#xff0c;百度了半天 最后换成了java来写 图片保存到本地的就不详细说了 主要…

html-iframe_HTML iframe

html-iframeiframe (Iframes) In HTML, iframes are used to display a webpage inside another webpage. 在HTML中&#xff0c; iframe用于在另一个网页内显示一个网页。 Syntax: 句法&#xff1a; <iframe src"URL"></iframe>The <iframe> tag…

集合操作(三)Set

2019独角兽企业重金招聘Python工程师标准>>> Set集合 HashSet 哈希表保证元素的唯一性依赖于两个方法一个是hashCode方法一个是equals方法 如果两个对象的hashCode值相同,并且调用该对象的equals方法返回的是true的时候,那么就说明两个对象是相同的 结论&#xff1a…

第6周 搜索与排序

1 查找里程 给你这样一张里程表&#xff0c;如何写一个程序&#xff0c;输入两地的地名&#xff0c;能输出期间的里程&#xff1f; #include <stdio.h> #include <string.h> #define C_LEN 30typedef struct city {char name1[C_LEN];char name2[C_LEN];int distan…

(转) Twisted :第十九部分 改变之前的想法

2019独角兽企业重金招聘Python工程师标准>>> 简介 Twisted是一个正在进展的项目,它的开发者会定期添加新的特性并且扩展旧的特性. 随着Twisted 10.1.0发布,开发者向 Deferred 类添加了一个新的特性—— cancellation ——这正是我们今天要研究的. 异步编程将请求和响…

Mac 获取 Brew

2019独角兽企业重金招聘Python工程师标准>>> 终端输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 转载于:https://my.oschina.net/fdstudio/blog/610680

express 项目生成器_用于项目的Express模板生成器(2)| 应用程序结构研究

express 项目生成器Hello! In express template generator for your projects (1), we looked at express generator and how we can start an express application with stressing to build a brand new structure of all required files. 你好&#xff01; 在针对您的项目的E…

Linux 服务器中文乱码编码解决

Linux环境的ECS中&#xff0c;若出现如下中文显示为乱码的情况。 一般原因如下: 1. 未安装中文语言包 2. 未设置正确的默认语言 3. SSH 终端未正确配置 本文以Centos 6.5为例&#xff0c;演示如何解决中文乱码问题。 1. 使用 locale -a |grep zh_CN查看系统是否已经安装…

ldo regula_使用C中的Regula Falsi方法找到复多项式方程的根

ldo regulaRegula Falsi方法 (Regula Falsi method) About the method: 关于方法&#xff1a; We often hear many children and even many adults complaining about the difficulty level that they face while solving complex polynomial equations. It is also difficult…

go newscanner判断文件读取结束_Go单元测试-testing

在开发程序中&#xff0c;很重要一点就是测试&#xff0c;测试可以保证代码的质量&#xff0c;保证每个函数可以正常运行。但是如何保证写出来的程序是否正确。单元测试一般是用来测试我们的代码逻辑有没有问题&#xff0c;有没有按照我们期望的运行&#xff0c;以保证代码质量…

nextdate函数白盒测试问题 软件测试_软件测试基本常识

一、软件测试的分类&#xff1a;1.按照是否执行被测试软件来分&#xff1a;静态测试&#xff1a;是指不运行软件&#xff0c;测试包括代码检查、静态结构分析、代码质量度量等&#xff0c;主要对软件需求说明书、设计说明书、软件源代码进行检查与分析。 动态测试&#xff1a;…

ideatomcat老是运行以前的项目_日“吞”150吨垃圾,禅城集中式餐厨垃圾处理项目启用...

12月9日&#xff0c;禅城区集中式餐厨垃圾处理项目正式投料试运行&#xff0c;该项目如今每天可处理150吨垃圾。这意味着禅城区将通过先进技术实现餐厨垃圾资源化、减量化、无害化处理。禅城区集中式餐厨垃圾处理项目位于佛山市南庄污水处理厂首期工程北侧&#xff0c;禅港路西…

java怎么知道上传文件是否成功_文件包含漏洞之——tomcat CVE-2020-1938漏洞复现

这个漏洞是今年2月份出现的&#xff0c;他的影响范围也是非常广的。2月20日&#xff0c;国家信息安全漏洞共享平台&#xff08;CNVD&#xff09;发布了Apache Tomcat文件包含漏洞&#xff08;CNVD-2020-10487/CVE-2020-1938&#xff09;&#xff0c;这个漏洞是由于Tomcat AJP协…

css word-wrap_CSS中分词“ break-all”和“ break-word”的值之间的差异

css word-wrapDefinition: 定义&#xff1a; What is the most fundamental element that comes to mind when you are considering to develop a web page? Words! If that was your answer, then pat yourself because you are already aware of what we are going to disc…

Android Studio apk 打包流程

1.Build -> Generate Signed APK...&#xff0c;打开如下窗口 2.假设这里没有打过apk包&#xff0c;点击Create new&#xff0c;窗口如下 这里只要输入几个必要项 Key store path&#xff08;生产key文件的保存路径 &#xff09; Key store password&#xff08;key 存储密码…

【Android】11.3 屏幕旋转和场景变换过程中GridView的呈现

分类&#xff1a;C#、Android、VS2015&#xff1b; 创建日期&#xff1a;2016-02-21 一、简介 实际上&#xff0c;对于布局文件中的View来说&#xff0c;大多数情况下&#xff0c;Android都会自动保存这些状态&#xff0c;并不需要我们都去处理它。这一节仍以GridView为例&…

html---textarea初始化时就有个table空格以及tab键操作无效

1 初始化时就有一个tab空格这是由于<textarea></textarea>之间的内容不为空的原因&#xff0c;包含空格和换行&#xff0c;否则浏览器会觉得空格或者换行都是文本域的内容。因此书写时需将<textarea></textarea>紧靠在一起。2 tab键对textarea操作无效…

android decorView详解

摘要 一、DecorView为整个Window界面的最顶层View。 二、DecorView只有一个子元素为LinearLayout。代表整个Window界面&#xff0c;包含通知栏&#xff0c;标题栏&#xff0c;内容显示栏三块区域。 三、LinearLayout里有两个FrameLayout子元素。 (20)为标题栏显示界面。只有一个…