灏天阁

Node/Koa2[03]: ejs模板引擎

· Yin灏

目录结构

└─src
    ├─routes
    │  └─index.js
    └─views
        ├─index.ejs
        └─widgets
            ├─blog-list.ejs
            └─user-info.ejs

代码演示

src/routes/index.js

//...
router.get("/", async (ctx, next) => {
  await ctx.render("index", {
    title: "Hello Koa 2",
    msg: "你好",
    isMe: true,
    blogList: [
      {
        id: 1,
        title: "aaa",
      },
      {
        id: 2,
        title: "bbb",
      },
      {
        id: 3,
        title: "ccc",
      },
    ],
  });
});
//...

src/views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= msg %></p>
    <!-- locals：如果 name 没有传，不会报错 -->
    <p><%= locals.name %></p>
    <!-- 引用组件 -->
    <%- include('widgets/user-info', { isMe }) %>
    <hr />
    <%- include('widgets/blog-list', { blogList }) %>
  </body>
</html>

ejs 组件化

src/views/widgets/user-info.ejs

<div>
  <% if (locals.isMe) { %>
  <a href="#">@ 提到我的(3)</a>
  <% } else { %>
  <button>关注</button>
  <% } %>
</div>

循环

src/views/widgets/blog-list.ejs

<ul>
  <% blogList.forEach(blog => { %>
  <li data-id="<%= blog.id %>"><%= blog.title %></li>
  <% }) %>
</ul>
<!-- 写 js -->
<script>
  console.log(123);
</script>

- Book Lists -