【node學習】koa2使用ejs模板更改字尾為.html的方法
阿新 • • 發佈：2018-12-26
需求：有些情況，在開發的時候需要吧公共部分，例如導航、公共的頭部，尾部抽取出來，否則每個頁面複製貼上的話會花費太多的時間，更甚者更改公共部分其中一個地方的話，每個頁面都得動，會更加不可預估。
思路：如果是純前端的話，可以使用gulp、webpack等自動化構建工具進行抽取的工作。後臺配合的話，可以使用模板引擎抽出來，include到各個頁面最後，後臺語言都支援這種方式。下面以node的koa框架作為後臺，ejs做模板引擎為例。express網上很多例子，就不說了。
效果（只是個簡單的demo，文章末尾有全部實現程式碼）：
實現：
1.引入koa-views、ejs中介軟體
npm install koa-views --save
npm install ejs --save
2.將.ejs字尾改成.html，這樣就可以在html程式碼中寫ejs語法了。（配置部分）
目錄結構（根據自己的結構更改路徑配置）
const views = require('koa-views');
const ejs = require('ejs');
app.use(views(__dirname + '/src', { //按照自己的目錄更改路徑
map : {html:'ejs'}
}));3.整體程式碼（只是個簡單的小demo）
const koa=require('koa') const app=new koa() const views = require('koa-views'); const ejs = require('ejs'); app.use(views(__dirname + '/src', { map : {html:'ejs'} })); const Router=require('koa-router') let router=new Router() app.use(router.routes()) .use(router.allowedMethods()); app.listen(3005,()=>{ console.log('node start 3005') })
index.html頁面：
<!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>
<% include common.html %>
<h1><%= title%></h1>
<section>
<p>正文的一些內容</p>
</section>
</body>
</html>common.html
<h1>公共部分</h1>
<h2>我是被include進來的公共程式碼</h2>