首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 gulp-file-include 构建前端静态页面

前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。...很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航、页头、页脚等公用的部分分离出去,然后引入页面中。...单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件。.../dist'));//输出文件路径 }); 导航条 导航条是主要的引用内容,但是一般当前页面的导航都会有选中效果,那么就要使用 gulp-file-include 的判断功能。...其实无论是后台还是前台,在引入导航条这个问题上的解决方法差不多,都是在当前页面定义一个私有变量,通过这个变量来设置链接的选中效果,而 gulp-file-include 的变量通过传参实现。

1.7K60
您找到你想要的搜索结果了吗?
是的
没有找到

keepAlive页面缓存以及新页面刷新问题(activated方法)

问题 如果我们按照 A 类型进行搜索,查出来100条数据(默认20条/页),我们翻阅到第 3 页,找到 B 数据,我们对 B 进行编辑,编辑过后回到列表页面,按照用户体验我们还是想回到按 A 搜索的第...拿我的项目举例,我的这个页面需要 7 个搜索条件还有分页的页码及每页的条数,还有一个控制表头显示的列表共10个参数。...所以你页面中需要的刷新都写在这里面就完成了。 你以为这样就结束了吗!!!没有 A页面缓存了,push进入B页面。首次进入B页面数据正常,url也正常。回退到A页面,A页面确实缓存了。...再从列表中选择进入B页面。此时B页面的数据是缓存的,但是url是正常的!!!见了鬼了!...处理方案一: 在B页面也加,进行处理 // 详情页面 activated() { 需要刷新的数据 } 处理方案二: <keep-alive v-if="keepAlive" exclude

5.9K20

解决浏览器差异导致从子页面回到父页面,父页面刷新的问题

概述:   在做H5混合开发的时候总是会遇到浏览器差异、兼容导致同样的代码,IOS和Andoird其中之一出现不可预见的问题。   ...我的问题也是如此,我的需求是从父页面跳转子页面,子页面提交后返回父页面,并且父页面刷新。   ...Android的Chrome浏览器对这个需求就很容易支持,因为他每次页面重新显示的时候,都会刷新整个页面。而IOS的Safari浏览器出现了问题,Safari浏览器会读取缓存,不会重新刷新页面。...总体思路是在子页面返回时,告知父页面刷新。并且只在IOS上执行这个操作,否则Android会刷新两遍。   ...} } 注意:   笔者在利用上述方法时,起初遇到了问题,在Chrome浏览器和Safari浏览器测试通过后,放在IOS手机上运行时发现

2.6K20

Docker-compose 运行MySQL 连接

Docker-compose 运行MySQL 连接上 千寻简笔记介绍千寻简笔记已开源,Gitee与GitHub搜索chihiro-notes,包含笔记源文件.md,以及PDF版本方便阅读,且是用了精美主题...@toc简介在服务器部署 mysql 遇到了一个问题,起初根据文档去启动 MySQL,正常启动后发现,远程连接上,起初怀疑是服务器防护墙没关,后来我把服务器防火墙关闭以及放行云服务器厂商的防火墙,还是连接上...my.cnf' is ignored.这个错误是MySQL创建容器没有使用上我们的配置文件my.conf,my.conf其中指定的 MySQL 的端口,但是由于没有加载成功,所以映射端口不一致导致远程连接上数据库...、MySQL 连接上、MySQL8、docker-compose、docker实现步骤1 重新分配权限我们知道了问题出在哪里就比较好解决了。...将配置文件设置可读的权限,重启 docker-compose 容器chmod go-w /etc/my.cnf使用 down 命令停止运行的容器,并且会删除已停止的容器以及已创建的所有网络docker-compose

48600

Laravel中运行Gulp任务的利器(一) —— Laravel Elixir简介及入门教程

对现代开发者而言,即使是构建一个很简单的web应用,也要编写很多任务,比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数的任务。...下面我们就来看看如何安装配置Gulp: 安装Gulp 由于Gulp是基于 Node.js 的,所以安装之前需要先安装Node。...: $ npm install -g gulp 安装完成后,可以从命令行执行如下命令查看Gulp版本: $ gulp -v [14:12:51] CLI version 3.8.10 Gulp安装完成后就可以安装...你可以通过在项目根目录下运行 gulp 命令来执行定义在 elixir 方法中的任务: $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com...mix.coffee();}); 此外,你还可以直接使用方法链到命令上: elixir(function(mix) { mix.less('app.less').coffee();}); 保存修改并再次运行

2K91

在 web 环境运行 react-native 页面

如果适配web再去实现一套H5的页面会增加开发和维护成本,同一套代码能不能跑在浏览器了?...由于react-native的页面都是基于react-native基础组件和API或者自己实现的module,react-native页面的代码是完全可以复用的。...web端实现同样的基础组件和API,webpack打包js文件时做好组件映射,这样同一套业务代码可以运行在三端。...absolute + overflow:scoll局部滚动布局,IOS下滚动到页面顶部或者底部有回弹效果这时如果再向相反方向滚动页面导致页面无法滚动,如下图: 解决方案:去掉固定一屏高度和局部滚动的布局...2.组件渲染和首屏时间如下 优化前 优化后 组件渲染时长从105ms降到86ms,首屏可见事件从292ms提前到了230ms 线上数据 优化后页面是从9月29日开始 总资源加载耗时 页面开始导航到可交互耗时

4K01

PPT排版设计怎样做页面杂乱

大家在制作PPT时,对于页面的排版布局都甚是头疼,总是不知道该怎么排版才好。   要么是内容太多,信息比较杂乱,感觉整个页面都放不下,要么是内容太少,显得页面太空旷。   ...而我们之所以需要进行分栏,主要是因为对于一个页面来说,它的内容信息无非就是论点和论据。   把它们放在不同的地方,不仅能够让页面排版更加结构化,还会使论点和论据更加清晰,让人一目了然。   ...对于内容较多的页面,在排版时,如果只是简单的把它们放在一起,会使视觉效果很平淡,而分栏能让页面更有层次感。...还有这种等分的纵向分栏,将内容平均分布在页面上。   也可以用一些图形做成不规则的分栏效果,可以让页面看起来更有灵性。   ...12.png   总结:   1、分栏:对页面内容进行左右或者上下布局,让页面看起来更有层次感   2、色块:对页面进行分栏处理时,添加合适的色块能够帮助我们提高页面的设计感

57130
领券