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

發表於 2019-07-10 分類於 Nodejs

Google AD

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

Liker 讚賞

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

｜

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

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

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

views

接下來在底下建立 index.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>Document</title>
</head>
<body>
  <h1>Hello <%- title %></h1>
</body>
</html>

router 修改

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

舉例使用者請求 index 首頁

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

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

瀏覽器畫面

補充

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

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

舉例 pug

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

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