如何抽离、引用公共部分页面

如何抽离、引用公共部分页面

如何抽离、引用公共部分页面.
产生背景:
最近,需要新开发一个jq官网项目。在做项目的时候经常会遇到一样的头部和底部,如果每个页面都复制一遍,不仅工作量大而且万一需要修改一下文章就更麻烦了,这时候就需要我们把公共部分提取出来,等需要的时候再引入页面。所以先考虑做的抽离页面,然后引用,这样可以自由拼凑,方便复用。

页面抽离及引入:
使用jQ的load函数(公司项目一直用的JQ,出于兼容性原因)

<!--在引入页面-->
<div class="footer"></div>
/导入脚部页面/

$(document).ready(function(){

$(".footer").load(“page/footer.html”);

});

<!–抽离footer.html页面,做被引入页面–>

<footer>

<ul class=“g-flex”>

<li><a href="#">活动XXX</a></li>

<li><a href="#">列表XXX</a></li>

<li><a href="#">产权XXX</a></li>

<li><a href="#">我们XXX</a></li>

</ul>

</footer>

原文地址:https://www.cnblogs.com/mica/p/10885294.html

时间: 2024-10-30 00:31:56

如何抽离、引用公共部分页面的相关文章

thymeleaf引用公共页面

本例采用的是Springboot+thymeleaf,因为公共页面属于动态页,因此需要放在templates目录下(具体几层自定义即可),我们这里做一个引用头部.主体和底部公共信息的示例 1. 公共信息页面 head.html,使?th:fragment 属性来定义被包含的模版?段,以供其他模版引用或者包含,这里我们定义了头部(admin_head(title)).主体(admin_common).底部(admin_bottom)三个模板片段 <!DOCTYPE html> <html&

微信小程序引用外部js,引用外部样式,引用公共页面模板

https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js====================== //封装的函数function GetUserInfo2018() { console.log("获取用户信息8888")} function count(str) { console.log(str)} //转化成小程序模板语言 这一步非常重要 不然无法正确调用mod

Vuex的this.$store.commit和在Vue项目中引用公共方法

2018年11月22日 20:50:29 Funfction_Zero 阅读数 3230 1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上.像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.l

原生aspx页面如何引用公共js和css

项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用户控件,直接在每个页面调用这个用户控件,通过不同的参数获取不同的引用文件,这种方式的好处就是大大减少了工作量,也规范了代码, 不会出现一个文件引用多次的情况了. 具体实现如下: 1.  新建一个用户控件:BundleConfig.ascx 2.前端调用,这里放到head里面.(注意:web.conf

前端引用公共html模块方案探索

最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在其他N个页面手动重复的改下,当然,这是我无法忍受的,于是思考下怎样将公用的部分独立出来供调用. 开始想直接用js异步请求一个公用模块的页面即可,但考虑到官网的SEO问题,就放弃了,接着就想能否用webpack将代码分为开发环境和生产环境,在开发环境进行页面的拼接,完成后输出到生产环境,这样就不会影响

html页面引入公共静态页面

1.h5新增的embed标签: <embed type="text/html" src="header.html" /> 原文地址:https://www.cnblogs.com/siyecao2010/p/8440047.html

网站 页面公共部分的处理

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件? 因保密等诸多因素,线上项目运行效果,暂不推荐大家观看,敬请谅解. 本次实例为临时花了几分钟手写的,下面就来讲一下常用的方法: 当前方法:通过load()函数,引入公共头部和尾部文件; 代码预览: $(".headerpage").load("header.html"); $(".footerpage").load("footer.html&quo

网站优化:引用CDN公共JS库

什么是CDN公共库? CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一般的CDN公共库都会包含全球所有最流行的开源JavaScript库. 为什么要引用CDN公共库? 1.减少等待时间 CDN-Content Delivery Network(内容分发网络),通过各种各样的服务途径把你的一些静态内容分散开来,当用户的浏览器提交这些文件的链接请求,他们便会自动下载网络上最近的可用的文件.这样任何使用你的服务的

vue页面中某个单一界面不使用公共组件的方式

一.这是你要使用的公共组件 . 二.然后,这个path变量要事先声明好 三.给它设置一个监听 四.只要是在上面的path===的路径就不会引用公共组件啦! 有用点个赞,感谢您呦!!! 原文地址:https://www.cnblogs.com/hz-handofgod/p/11982095.html