【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>