這是在講關於一名叫 Koa 的全端勇士傳說-HTML Template

發表於 更新於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

Koa 也是可以跟 Express 相同載入 HTML Template，雖然使用方式與 Express 差不多，但是一樣記錄一下該如何加載 ejs

前言

Koa 也是可以跟 Express 相同載入 HTML Template，雖然使用方式與 Express 差不多，但是一樣記錄一下該如何加載 ejs

起手式

一樣在使用 HTML temlplat 之前要先安裝套件，由於我這邊會使用 ejs 所以就要安裝 ejs 套件，但是我這邊會安裝 ejs-locals，另外 koa 必須另外安裝一個套件才能夠解析模板也就是 koa-views

1
npm install --save ejs-locals koa-views

接下來就是修改 app.js，引入 koa-views

1
2
3
4
const views = require('koa-views');
app.use(views('./views', {
  extension: 'ejs'
}));

接下來於專案底下建立 views 資料夾

views

接下來在底下建立 index.ejs 內容如下

1
2
3
4
5
6
7
8
9
10
11
12
<!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>Document</title>
</head>
<body>
  <h1>Hello <%- title %></h1>
</body>
</html>

router 修改

接下來就是 router 方面的修改，當使用者請求某隻 router 的話，我們就吐給他特定的 HTML

舉例使用者請求 index 首頁

1
2
3
4
5
router.get('/',async (ctx, next) => {
  await ctx.render('index', {
    title: 'EJS !'
  });
});

如果正確成功的話，那麼就可以在瀏覽器上看到畫面

瀏覽器畫面

補充

基本上如果你不使用 koa-views 是會無法解析模板的，所以務必記得安裝這個套件來解析模板。

如果是撰寫 EJS 之外的 Template 語法的話，只需要修改 extension 即可

舉例 pug

1
2
3
4
const views = require('koa-views');
app.use(views('./views', {
  extension: 'pug'
}));

但是記得安裝相對應的模板引擎，否則只有修改這裡是無效滴