静态页面实现include

原文地址:http://www.kevinlu98.cn/post/48

需求引入

有时我们在开发纯静态页面或者前后端分离的静态页面时会遇到这样的问题，像导航栏或者网站的footer通常都是一样的，但每个页面都有，所以就有了如下的解决方案

案例

如下页面，我们不希望nav部分和footer出现在每个页面，想将其抽取出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/typo.css"><link rel="stylesheet" href="css/style.css"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body><div class="lw-header"><nav class="lw-content"><ul><li><a href="./index.html">首页</a></li><li><a href="./page1.html">页面1</a></li><li><a href="./page2.html">页面2</a></li><li><a href="./page3.html">页面3</a></li></ul></nav>
</div>
<div class="lw-content lw-body" style="margin-top: 30px;"><h1>中文网页重设与排版：<i class="serif">Typo.css</i></h1><br/><h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2><ol id="table"><li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li><li><a href="#section2">排版实例</a><ul><li><a href="#section2-1">例1：论语学而篇第一</a></li><li><a href="#section2-2">例2：英文排版</a></li></ul></li><li><a href="#section3">附录</a><ul><li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li><li><a href="#appendix2">开源许可</a></li></ul></li></ol>
</div><div class="lw-footer"><footer class="lw-content" style="padding-top: 30px;"><p>&copy; 2019-2020 <a href="http://www.kevinlu98.cn/">冷文博客-冷文学习者</a></p><p style="margin: 10px 0;">本站资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。联系邮箱：kevinlu98@qq.com 或QQ 1628048198</p><p><a href="http://www.kevinlu98.cn" target="_blank">陕ICP备19024566号</a> &nbsp; </p></footer>
</div>
</body>
</html>

访问一下

分析

其实想要实现我们的需求也非常简单，我们只需要在页面加载的时候发送ajax请求，去请求公共页面，然后将返回结果放入指定的div里面就可以了

实现

先看下目录结构

将导航栏抽取出来放入_header.html页面

<!--_header.html-->
<nav class="lw-content"><ul><li><a href="./index.html">首页</a></li><li><a href="./page1.html">页面1</a></li><li><a href="./page2.html">页面2</a></li><li><a href="./page3.html">页面3</a></li></ul>
</nav>

此时原来页面的导航栏部分

抽取footer部分到_footer.html页面

<!--_footer.html-->
<footer class="lw-content" style="padding-top: 30px;"><p>&copy; 2019-2020 <a href="http://www.kevinlu98.cn/">冷文博客-冷文学习者</a></p><p style="margin: 10px 0;">本站资源全部来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。联系邮箱：kevinlu98@qq.com 或QQ 1628048198</p><p><a href="http://www.kevinlu98.cn" target="_blank">陕ICP备19024566号</a> &nbsp; </p>
</footer>

抽取之后的footer

发送ajax的方式有很多，我们这里采用jQuery，并且jQuery为我们提供了load方法，可以直接将ajax返回结果以HTML的方式渲染到页面，我们在页面底部加上如下代码

<script>$(function () {$("#header").load("./common/_header.html")$("#footer").load("./common/_footer.html")})
</script>

我们访问试试

代码下载

GitHub: https://github.com/kevinlu98/include-demo.git
码云: https://gitee.com/kevinlu98/include-demo.git

静态页面实现include相关推荐

静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样:  <!DOC ...
html静态页面引入公用组件, 开启SSI配置使shtml支持include公用的页头页脚
转自 : http://www.phpvar.com/archives/3278.html 这是文章是为了实现前端人员编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的 ...
使用Varnish+ESI实现静态页面的局部缓存
页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含(例如所有的静态页面包含页头.页脚)以及静态页面中的局部信息的 ...
制作生成静态页面的新闻系统
利用PHP生成静态HTML页面的好处很多: 1.静态页面不需要Web服务器解释执行,用户打开网页的速度会快些: 2.打开静态页面时,Web服务器不需要访问数据库,减轻了对数据库访问的压力: 3.静态H ...
stylus 在静态页面上的使用经验
前段时间做vue项目,用到了css的提升开发效率的工具stylus,感觉很好用.现在又开始写静态页面了,于是将强大的stylus拿过来继续用.于是就写了这篇使用经验,算是自己总结一下. stylus的 ...
Nginx设置静态页面压缩和缓存过期时间的方法（转）
使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css, ...
html 动态调用php文件,html静态页面调用php文件的方法
html静态页面调用php文件的方法本文实例讲述了html静态页面调用php文件的方法.分享给大家供大家参考.具体方法如下: 静态页面中看上去好像是不能直接调用php文件的,但是却可以使用js调用方 ...
nginx php如何无响应,nginx,_nginx 可以直接响应服务静态页面吗，为何配置了很久都不成功？，nginx - phpStudy...
nginx 可以直接响应服务静态页面吗, 为何配置了很久都不成功? 背景: 最近想自己写点东西放到网上, 买了域名和vps, 在vps上也搭好了ngxin服务器,想从最简单的静态页面开始,于是自己写了 ...
静态和动态include
今天突然意识到野猪对静态和动态的include的区别理解有点模糊,现在总结一下: 动态include:<jsp: include page="include.jsp" ful ...

静态页面实现include

静态页面实现include

需求引入

案例

分析

实现

代码下载

静态页面实现include相关推荐

最新文章

热门文章