【node学习】koa2使用ejs模板更改后缀为.html的方法

需求：有些情况，在开发的时候需要吧公共部分，例如导航、公共的头部，尾部抽取出来，否则每个页面复制粘贴的话会花费太多的时间，更甚者更改公共部分其中一个地方的话，每个页面都得动，会更加不可预估。

思路：如果是纯前端的话，可以使用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>

【node学习】koa2使用ejs模板更改后缀为.html的方法

猜你喜欢