版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33168578/article/details/83541149
需求:有些情况,在开发的时候需要吧公共部分,例如导航、公共的头部,尾部抽取出来,否则每个页面复制粘贴的话会花费太多的时间,更甚者更改公共部分其中一个地方的话,每个页面都得动,会更加不可预估。
思路:如果是纯前端的话,可以使用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>