前端引用公共html模块方案探索
16lz
2021-01-22
最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头、页尾等,这样就导致一个地方的修改要在其他N个页面手动重复的改下,当然,这是我无法忍受的,于是思考下怎样将公用的部分独立出来供调用。
开始想直接用js异步请求一个公用模块的页面即可,但考虑到官网的SEO问题,就放弃了,接着就想能否用webpack将代码分为开发环境和生产环境,在开发环境进行页面的拼接,完成后输出到生产环境,这样就不会影响seo,同时还能借助webpack的强大打包功能将资源进行打包压缩等处理,下面简要阐述demo的搭建。
demo的整体结构如下:
base-config
--webpack.dir-foreach.config.js
css
images
js
lib
publicLayout
--main.js
publish
templateSource
--commonhtml
--course
--course.ejs
--course.js
--index
--index.ejs
--index.js
.........
package.json
webpack.build.config.js
webpack.config.js
主要的构建模块实在publicLayout和templateSource两个目录:
publicLayout: 主要封装公共模块的引用模块,main.js代码如下:
const header = require('../templateSource/commonhtml/header.html'); //引入公共页面头
const topbar = require('../templateSource/commonhtml/topbar.html'); //引入body中存在的公共模块
const footer = require('../templateSource/commonhtml/footer.html'); //引入公页面脚
const htmlconfig = {
header: header,
topbar: topbar,
footer: footer
};
module.exports = htmlconfig; //导出供调用
templateSource: 存放页面的构建模板,此demo中采用ejs作为前端模板,如index页,由index.ejs生成:
1 <%= header %> 2 <link type="text/css" rel="stylesheet" href="css/course.css"> 3 </head> 4 <body> 7 <div class="nav-bar"> 9 <div class="nav"> 10 <ul class="navigation"> 11 <li> 12 <a href="index.html" target="_self" title="">首页</a> 13 </li> 14 <li> 15 <a href="course.html" target="_self" title="" class="cur">课程定制</a> 16 </li> 17 ...... 18 </ul> 20 </div> 22 </div> 24 <!-- wrapper --> 25 <div id="container"> 26 <div>主内容部分1</div> 27 <%= topbar %> 28 <div>主内容部分2</div> 29 </div> 30 <!-- footer --> 31 <%= footer %> 32 </body> 33 </html>
更多相关文章
- html页面输出pdf格式文件(一步步很详细)
- 为什么我的html页面的大小不固定啊?
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
- Web前端-html页面-做过的一个公司的主页
- html页面中给img标签的src属性赋值为一张图片的存储路径,图片不显
- 加载跨域的HTML页面AJAX
- HTML5,简单的注册页面
- 在页面重新加载时添加活动链接和jquery幻灯片切换到自定义ajax w
- PHPCMS V9 的手机门户wap绑定单页面