香港黄大仙黄大仙网站

書名： Node.js+Webpack開發(fā)實(shí)戰(zhàn)
作者名：夏磊
本章字?jǐn)?shù)： 480字
更新時(shí)間： 2021-03-26 21:53:55

5.7　模板渲染

Koa也可以通過使用模板引擎來渲染HTML模板，為了減少學(xué)習(xí)門檻，本節(jié)還是使用ejs作為示例。

5.7.1　快速開始

使用ejs模板需要安裝koa-ejs模塊：

npm install koa-ejs --save

開始編碼：

<!-- templates/home.ejs -->
<p>歡迎你! <%= name %>! 現(xiàn)在時(shí)間: <%= now %></p>

訪問http://localhost:10000，將輸出：

歡迎你! xialei! 現(xiàn)在時(shí)間: 2019/11/10 下午19:25:55

Koa渲染模板調(diào)用ctx.render()方法，該方法簽名如下：

ctx.render(view[, objects][, callback])

·　view：視圖文件。

·　objects：視圖變量。

·　Callback：回調(diào)函數(shù)。

koa-ejs還支持ctx.state，也就是說掛載到ctx.state中的變量可以直接在ejs模板中使用，不需要作為第二個(gè)參數(shù)傳遞給ctx.render()。

5.7.2　模板布局

模板布局是一項(xiàng)很好用的功能，Web頁面一般是由以下結(jié)構(gòu)組成的：

·　頭部區(qū)域（包括導(dǎo)航欄）。

·　內(nèi)容主體區(qū)域。

·　底部區(qū)域（包括版權(quán)聲明、友情鏈接等）。

實(shí)際上頭部區(qū)域和底部區(qū)域是一樣的，真正有變化的內(nèi)容是內(nèi)容主體區(qū)域，因此可以將頭部區(qū)域和底部區(qū)域作為不變的內(nèi)容，內(nèi)容主體作為變化內(nèi)容來構(gòu)建布局。

koa-ejs啟用模板布局需要配置layout選項(xiàng)，上節(jié)中配置為false關(guān)閉了布局，本節(jié)傳遞一個(gè)main作為參數(shù)，最終的布局模板文件名為main.ejs。

<!-- templates/main.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
</head>
<body>
    <header>我是頭部</header>
    <%- body %>
    <footer>我是底部</footer>
</body>
</html>

可以看到頭部和底部都是固定的，頁面標(biāo)題和body是通過變量控制的。

<!-- templates/home.ejs -->
<p>歡迎你! <%= name %>! 現(xiàn)在時(shí)間: <%= now %></p>

啟用模板布局后訪問http://localhost:10000/，輸出如下：

我是頭部
歡迎你! xialei! 現(xiàn)在時(shí)間: 2019/11/10 下午19:28:55

我是底部

官术网_书友最值得收藏!

Node.js+Webpack開發(fā)實(shí)戰(zhàn)

5.7 模板渲染

5.7.1 快速開始

5.7.2 模板布局

5.7　模板渲染

5.7.1　快速開始

5.7.2　模板布局