npm 包 ejss 使用教程

简介

ejs 是一种简单、高效、易用的 JavaScript 模板引擎,它可以帮助你以一种优雅、简洁的方式来生成 HTML 标记或任何其他格式的文本。ejs 的语法简单易懂,支持嵌入 JavaScript 逻辑,适合用于各类 Web 应用的开发。

安装

通过 npm 安装:

--- ------- ---

使用

ejs 的使用非常简单,主要分为两步:

第一步:准备模板

ejs 支持嵌入 JavaScript 代码,因此模板文件的后缀名通常为 .ejs,例如 template.ejs。在模板文件中,可以使用 <% %><%= %> 这两种标记来嵌入 JavaScript 代码。

其中,<% %> 表示执行 JavaScript 逻辑,例如:

------
  ------
    --------- ------------
  -------
  ------
    -- ------- ---- - - ------------- ---- - --
      ---- -------------
        ------- -------------- -------
        ------ ---------------- ------
      ------
    -- - --
  -------
-------

<%= %> 表示输出变量,例如:

------
  ------
    ---------- ----- ----------
  -------
  ------
    ------- ------- -------
  -------
-------

第二步:渲染模板

在 Node.js 中,可以使用 ejs 的 render() 函数来渲染模板。render() 函数接收两个参数:模板文件的路径和数据对象。例如:

----- --- - ---------------
----- -- - --------------

----- -------- - ------------------------------- ---------
----- ---- - -
  ------ --- ------
  ------ -
    -
      ------ ------ -------
      -------- -------- -- -- -------
    --
    -
      ------ ---- -- --- -----
      -------- --- -- ---- -------
    --
  --
--

----- ---- - -------------------- ------
------------------

这段代码加载模板文件 template.ejs,将数据对象 data 传递给模板并渲染,最终输出 HTML 代码。

高级用法

include

可以使用 include 来引入其他模板。例如:

------
  ------
    --------- ------------
  -------
  ------
    -- ------- ---------- --
    -- ------- ---- - - ------------- ---- - --
      -- ------- -------- - ----- -------- - --
    -- - --
    -- ------- ---------- --
  -------
-------

在这个例子中,include 引入了三个模板:header.ejspost.ejsfooter.ejs,并将对象 { post: posts[i] } 传递给了 post.ejs

layout

使用 layout 可以方便地定义整个网站的布局。例如:

layout.ejs:

--------- -----
------
  ------
    ---------- ----- ----------
  -------
  ------
    --- ---- --
  -------
-------

header.ejs:

--------
  ------- ----- -------
---------

post.ejs:

---------
  ------- ---------- -------
  ------ ------------ ------
----------

index.ejs:

-- ---------------- --

-- ------- ------ --

-- ------- ---- - - ------------- ---- - --
  -- ------- ---- - ----- -------- - --
-- - --

-- ------- ------ --

在这个例子中,layout.ejs 定义了网站的整体布局,header.ejspost.ejs 是局部模板,index.ejs 使用了 layoutinclude 分别引入了这些模板。

总结

ejs 是一种非常优秀的 JavaScript 模板引擎,它简单易用、灵活高效,适合用于各类 Web 应用的开发。通过本文的介绍,相信读者已经了解了 ejs 的基本使用方法,并可以借助 ejs 完成自己的 Web 应用开发工作。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600668e1d9381d61a3540936


猜你喜欢

  • npm 包 ngx-cron-editor-br 使用教程

    简介 ngx-cron-editor-br 是一个使用 Angular 编写的 cron 表达式编辑器。它对标准的 cron 表达式进行了封装,使得用户可以通过 GUI 界面直接编辑出 cron 表达...

    3 年前
  • npm 包 react-md-file 使用教程

    react-md-file 是一个在 React 中使用的 Markdown 解析器,可以将 Markdown 格式的文本转换成 HTML,支持代码高亮和代码块对齐等多种功能,是前端开发中十分实用的工...

    3 年前
  • npm 包 vue-jstree-cor 使用教程

    vue-jstree-cor 是一个基于 Vue.js 和 jstree 的树形组件,支持异步加载,拖拽等功能,极大地方便了前端开发中的树形展示需求。本篇文章将详细介绍 vue-jstree-cor ...

    3 年前
  • npm 包 @miniprogram.org/miniprogram-cli 使用教程

    前言 随着小程序越来越受欢迎,如何快速高效地开发小程序也成为了前端工程师需要掌握的技能之一。而npm包@miniprogram.org/miniprogram-cli可以帮助我们更加方便地管理小程序项...

    3 年前
  • npm 包 async-style 使用教程

    简介 async-style 是一个能够将异步代码转化为同步代码的 npm 包。它提供了多种方法来处理异步函数,例如串行执行异步函数、并行执行异步函数、限制并行执行异步函数等等。

    3 年前
  • npm 包 donejs-generator-common 使用教程

    前言 在前端开发中,使用 npm 包已经变成家常便饭。npm 包是前端开发中必不可少的一部分,因为它们可以提供更简单、更快捷的方式来管理项目的依赖项。这篇文章将详细介绍一个名为 donejs-gene...

    3 年前
  • npm 包 blu-math 使用教程

    简介 blu-math 是一款提供数学计算方法的 npm 包,在前端开发中应用广泛。它提供了一些常用的数学计算方法,如线性代数、三角函数等等,并且封装了很多复杂的算法,使得开发者可以更加便捷地进行数学...

    3 年前
  • npm 包 react-native-picker-input 使用教程

    前言 在 React Native 开发中,需要使用选择器(Picker)的场景经常会遇到。而 react-native-picker-input 是一款能够方便地让开发者使用选择器的 npm 包。

    3 年前
  • npm 包 @ronomon/hash-table 使用教程

    @ronomon/hash-table 是一个基于 JavaScript 的哈希表算法实现,它可以提供快速的键值对读写访问操作,被广泛应用于前后端交互、缓存数据的存储等领域。

    3 年前
  • npm 包 @ronomon/quoted-printable 使用教程

    对于前端开发者和运维人员来说,npm 包是不可或缺的工具之一。今天,我想和大家分享一个叫做 @ronomon/quoted-printable 的 npm 包,它可以帮助我们进行 quoted-pri...

    3 年前
  • npm 包 when-ts 使用教程

    简介 when-ts 是一个基于 TypeScript 的项目,它提供了一个类似于 Promise 的 API,用于处理异步代码的执行顺序。相比于传统的 Promise,when-ts 在链式调用的过...

    3 年前
  • npm 包 hubot-karika 使用教程

    在前端开发中,npm 是非常常用的包管理工具。在这里,我们将介绍一个 npm 包 hubot-karika,它是一个聊天机器人框架的插件,主要用于构建自动回复和交互的机器人。

    3 年前
  • npm 包 @nomercy235/utils 使用教程

    @nomercy235/utils 是一个前端开发工具库,包含了一些常用的函数和工具。这个工具库可以帮助前端开发人员提高开发效率,减少代码重复。 安装 使用 NPM 安装: --- -------...

    3 年前
  • npm 包 @ronomon/deduplication 使用教程

    前言 在日常开发中,我们经常会使用一些 npm 包来辅助我们完成开发任务,其中 @ronomon/deduplication 是一款非常实用的工具,通过它可以帮助我们去重数组。

    3 年前
  • npm 包 @ronomon/utimes 使用教程

    在前端开发中,保持文件的元数据是非常重要的一件事情,比如文件的访问时间、修改时间等等。这些信息不仅对于开发者有意义,对于日后的集成、部署等工作也非常有价值。在 Node.js 中,我们可以使用 fs ...

    3 年前
  • npm包 aws-cognito-redux-saga-refact使用教程

    aws-cognito-redux-saga-refact 是AWS Cognito SDK和Redux Saga的结合,是一个用于前端的 npm 包。它可以轻松地与 AWS Cognito 进行集成...

    3 年前
  • npm 包 gulp-inject-js 使用教程

    前言 在前端开发中,我们经常需要将一些外部库或者自己写的 JavaScript 文件引入到 HTML 页面中,以便于网站的运行。手动去写 &lt;script&gt; 标签显然是不可取的,因此我们需要...

    3 年前
  • npm 包 node-mscs-face 使用教程

    简介 node-mscs-face 是一个可以实现人脸识别和人脸比对的 npm 包。它使用微软认知服务 API 来进行人脸识别和比对。 安装 要使用这个 npm 包,需要先安装它。

    3 年前
  • NPM 包 autoprefixer-tv 使用教程

    当你开始编写前端代码的时候,你会发现很多浏览器都有对 CSS 样式有不同的支持程度,这会导致页面在不同浏览器下有不同的样式效果。为了解决这个问题,通常我们需要对 CSS 样式进行兼容处理。

    3 年前
  • npm 包 syp-model 使用教程

    前言 随着前端的不断发展,前端项目越来越复杂,也越来越需要使用复杂的数据模型来处理数据。syp-model 是一款前端数据模型管理工具,可以方便地帮助开发者进行数据管理。

    3 年前

相关推荐

    暂无文章