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

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

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

1.7K60

静态页面如何实现 include 引入公用代码

php include('header.php'); ?> 页面主体部分 这是底部   直到最近某个项目需要做一个 webapp,是通过 HBuilder 将静态页面打包成 APP,这就让我碰到难题了。   ...gulp 个 watch 方法,就是监听文件是否变动的,我们只需稍微修改下 gulpfile.js 文件,增加一段监听代码,如下: var gulp = require('gulp'); var fileinclude...至此,静态页面如何实现 include 引入公用代码的问题,顺利解决,最后附上相关资料。 附: HTML 静态页面的头部和底部都是相同的,如何让每个页面统一调用一个公共的头部和底部呢?...静态html如何包括header和footer ? 静态页面Demo项目,如何将header和footer 像PHP一样 include? grunt-html-imports

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

静态页面如何实现 include 引入公用代码

php include('header.php'); ?> 页面主体部分 这是底部   直到最近某个项目需要做一个 webapp,是通过 HBuilder 将静态页面打包成 APP,这就让我碰到难题了。   ...gulp 个 watch 方法,就是监听文件是否变动的,我们只需稍微修改下 gulpfile.js 文件,增加一段监听代码,如下: var gulp = require('gulp'); var fileinclude...至此,静态页面如何实现 include 引入公用代码的问题,顺利解决,最后附上相关资料。 附: HTML 静态页面的头部和底部都是相同的,如何让每个页面统一调用一个公共的头部和底部呢?...静态html如何包括header和footer ? 静态页面Demo项目,如何将header和footer 像PHP一样 include? grunt-html-imports

1.9K00

PHP页面静态化——纯静态与伪静态用法详解

本文实例讲述了PHP页面静态化——纯静态与伪静态用法。分享给大家供大家参考,具体如下: 为什么要静态页面?...当用户访问一个不经常更新的Web页面PHP接到指示对php脚本文件进行解析,从数据库查询到该页面所需要的数据,然后对页面模板进行渲染,最后将一个成品页面展示给用户。...静态化分为纯静态与伪静态,纯静态又分为局部纯静态和全部纯静态。 伪静态静态顾名思义,它并不是真的静态页面而是伪装的。...例如一个以php作为后端语言的web站点,正常情况下他的url应当是类似于http://www.example.com/index.php,当我们做了伪静态处理后,当你访问同一个页面它展示的url可能就是...这里我们就要对这个缓冲区做一下文章了,在php输出内容之前,我们取出缓冲区的内容(这里就是渲染好的模板内容了),然后将其写入一个静态文件中并设置过期时间,当下次用户访问该页面的时候,如果该静态文件存在并且在有效期内

3K20

php生成静态页面并实现预览功能

一、前言 这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但是真正用的时候反而不是很多。...二、正文 1、什么是静态化 就比如我们平时写项目的时候,大部分的页面都是会传参数进去,通过php标签把这些参数展示出来。因为我们的参数随时可以变化,所以页面上的内容也跟着参数变化,这就是动态化的页面。...与之相反,静态化就是纯粹的html,页面上的内容不需要通过php或者java等编程语言来改变。 关于静态化的优点,网上也都说的很清楚了,这边不再一一赘述,总之就是打开速度够快,能抗住大流量访问。...输出控制函数和输出函数生成静态页面 这种写法个人感觉会稍微乱一点,而且如果页面复杂的话,写出来的php+html代码会有些杂乱,所以博主选用的是第二种方法。...以上就是从生成静态页面到预览的整个流程了,博主也是第一次做静态页面相关的东西,还是挺有意思的,打卡记录一下。 希望对大家的学习有所帮助。

1.7K20

php输出控制函数和输出函数生成静态页面

本文实例为大家分享了php输出控制函数和输出函数生成静态页面的具体代码,供大家参考,具体内容如下 Output Control 函数详解: flush – 刷新输出缓冲 ob_clean – 清空输出缓冲区...输出缓冲区是可堆叠的,这即意谓着,当一个 ob_start() 是活跃的时, 你可以调用另一个 ob_start() 。 只要确保正确调用了 ob_end_flush() 恰当的次数即可。...ob_get_conents 获取缓冲区的内容 ob_get_length 获取缓冲区内容的长度 ob_get_level 获取缓冲机制的嵌套级别 ob_get_status 得到所有输出缓冲区的状态 输出函数生成静态页面示例...php //打开输出控制缓存 ob_start(); echo "<html <head <title test页面</title </head <body Hello world</body.../写入文件 fwrite($fp, $out); //关闭文件 fclose($fp); echo "Success"; } 输出结果:Success 同时输出一个静态页面如下图

2.5K20

实现页面静态化,PHP是如何实现的,你又是如何实现的

PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板、缓存等实现页面静态化。...PHP静态化的简单理解就是使网站生成页面静态HTML的形式展现在访客面前,PHP静态化分纯静态化和伪静态化,两者的区别在于PHP生成静态页面的处理机制不同。...最主要是可以增加访问速度,减轻服务器负担,当数据量几万,几十万或是更多的时候你知道哪个更快了. 而且还容易被搜索引擎找到。...方法1:利用PHP模板生成静态页面 PHP模板实现静态化非常方便,比如安装和使用PHP Smarty实现网站静态化。 在使用Smarty的情况下,也可以实现页面静态化。...PHP生成静态页面的思路为:首先开启缓存,然后输出了HTML内容(你也可以通过include将HTML内容以文件形式包含进来),之后获取缓存中的内容,清空缓存后通过PHP文件读写函数将缓存内容写入到静态

1.4K40

PHP单例模式数据库连接类与页面静态化实现方法

本文实例讲述了PHP单例模式数据库连接类与页面静态化实现方法。分享给大家供大家参考,具体如下: 数据库test中数据表account内容 ? 单例模式的数据库连接类 db.php <?...php //单例模式的数据库连接 class DB { //存储实例的静态成员变量 static public $_instance; //数据库连接静态变量 static public...PHP实现页面静态化的例子 其实原理很简单,这里用到了几个函数,ob_start(),ob_get_contents(),file_put_contents(),ob_start()是开启缓冲区的意思,...所以实现纯静态页面的方法就是,获取缓冲区中的内容放到一个静态文件中,并在入口中根据需求设置访问动态文件还是静态文件,这种方法一般用于数据不经常变化的动态页面中。下面就来具体的实现这个功能。...php //1.使用刚才写的数据库连接类连接数据库 //2.把获取到的数据填充到模板文件中 //3.把页面转化为静态文件 //如果我们本地有这个静态文件并且这个文件生成的时间小于5分钟那么就去访问这个静态文件

79531

NginxApache之伪静态设置 - 运维小结

很典型的案例即是discuz论坛系统,后台就有一个设置伪静态功能,开启伪静态后,动态网页即被转换重写成静态网页类型页面,通过浏览器访问地址和真的静态页面没区别。...=12这样的动态网页处理成www.kevin.com/jk-fd-12.html这样格式静态页面,常见的论坛帖子页面,都是经过伪静态处理成静态页面格式html页面。...三、真静态、伪静态原理与实现方案 1、伪静态静态是相对于真静态而言的,就是把一些asp,php等结尾url通过apche或nginx的重写规则,变成以html一类的静态页面形式。...容易误解的是静态页面都是htm这类页面,实际上静态也不是完全静态,它也可以出现各种动态的效果,如GIF格式的动画、FLASH、滚动字幕等。...真静态实现方法 1)利用PHP模板生成静态页面; 2)使用PHP文件读写功能生成静态页面; 3)使用PHP输出控制函数缓存机制生成静态页面; 4)使用nosql从内存中读取内容(其实这个已经不算静态化了而是缓存

11K61

【Nginx36】Nginx学习:SSI静态文件服务器端包含模块

最早我是做 .NET 的,而第一家公司其实是从 ASP 向 ASP.NET 转型中,因此,还是不少的 ASP 做的页面。在那个时候,就用到了 SSI 。...--# include file="header.html" --> header.php 文件里面则是接收一个 title 参数 ,然后再把这个 title 参数打印出来。 好了,咱们访问一下这个页面试下吧。...然后 SSI 又不能动态接收参数,其实呀,使用 PHP 套上静态页面就可以接收参数了嘛。还是先准备一个 lcoation 来进行测试。...不过现在真的很少见到了,毕竟一是纯静态网站已经很少了,二是各种语言框架都已经自带这些功能了。即使是做文章站那种生成纯静态页面的,也是直接去生成整张页面,和这个嵌套也没啥关系。

18630

Typecho点击前台链接或者后台登录时出现404的解决方法

.*\.php$ 要支持pathinfo,要改成 location ~ .*\.php(\/.*)*$ 在某些老版本的php里面,可能还要打开php.ini里的cgi.fix_pathinfo cgi.fix_pathinfo...= 1 我没有按照这个来,页面404一般都是伪静态的问题,在军哥的一键包中有伪静态设置,在添加的时候默认使用了other.conf,这里要换成typecho.conf 军哥的一键包中默认已经了一些常用的...Nginx伪静态配置文件,可以直接输入名称进行使用 我选择使用wordpress的配置,修改原来的伪静态配置,配置文件在:/usr/local/nginx/conf/vhost/域名.conf 把include...fastcgi_pass unix:/tmp/php-cgi.sock; fastcgi_index index.php; include fastcgi.conf;...include pathinfo.conf; }

4.4K60

原 nginx的pathinfo配置

pathinfo是伪静态的一种,我们先解释一下伪静态的概念,伪静态页面静态URL与动态URL互通的一个桥梁,它是指动态网址通过URL重写的手段去掉其动态参数,使URL静态化,但在实际的网页目录中并没有重写...简单来说,伪静态URL就是通过服务器转换伪装文件名或地址,使该页面类似于静态页面,但服务器上没有独立存在的文件,其本质还是动态页面。        ...m=topic&a=detail&tid=82  转为 伪静态模式后为http://www.cxzaixian.com/index.php/topic/detail/tid/82.html。         ...  SCRIPT_FILENAME  $document_root$fastcgi_script_name;     include        fastcgi_params;     #注:下面加上一些配置语句...  index.php;     fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;     include

1K40

解决DEDECMS织梦程序Tags标签页面静态展示

昨天下午的时候网友留言是否熟悉DEDECMS织梦程序,需要解决TAGS静态问题,虽然老蒋之前对于DEDECMS主题大概的情况还是熟悉的,只要有动力肯定是没有问题。...看到实际的情况是这样子的,他这个源码程序是购买过来的,所有的TAGS关键字都是"tags.php?/关键字/"这样展示的,他觉得不够友好,希望实现静态化或者伪静态。...于是搜索相关的文档然后加以修改页面,确实找到解决办法,但是这里遇到的问题一并整理出来,这是我来解决DEDECMS织梦程序实现TAGS伪静态的办法,我没有生成静态化的问题是这样几万数据可能会导致服务器挂掉.../$2; } 第二、修改配置文件 我们需要到"include/taglib"文件中找到"tag.lib.php"。 找到: row['link'] = cfg_cmsurl."...然后我们再去刷新整站,可以看到所有的TAGS变成伪静态页面"tags/关键字.html"这样的格式。

4.2K20

nginx配置支持pathinfo模式的url访问(原创)

pathinfo是伪静态的一种,我们先解释一下伪静态的概念,伪静态页面静态URL与动态URL互通的一个桥梁,它是指动态网址通过URL重写的手段去掉其动态参数,使URL静态化,但在实际的网页目录中并没有重写...简单来说,伪静态URL就是通过服务器转换伪装文件名或地址,使该页面类似于静态页面,但服务器上没有独立存在的文件,其本质还是动态页面。...m=topic&a=detail&tid=82 转为 伪静态模式后为http://www.cxzaixian.com/index.php/topic/detail/tid/82.html。...fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params...$document_root$fastcgi_script_name; include fastcgi_params; #定义变量 $path_info

1.8K20

nginx配置支持pathinfo模式的url访问(原创)

pathinfo是伪静态的一种,我们先解释一下伪静态的概念,伪静态页面静态URL与动态URL互通的一个桥梁,它是指动态网址通过URL重写的手段去掉其动态参数,使URL静态化,但在实际的网页目录中并没有重写...简单来说,伪静态URL就是通过服务器转换伪装文件名或地址,使该页面类似于静态页面,但服务器上没有独立存在的文件,其本质还是动态页面。...m=topic&a=detail&tid=82 转为 伪静态模式后为http://www.cxzaixian.com/index.php/topic/detail/tid/82.html。...fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params...$document_root$fastcgi_script_name; include fastcgi_params; #定义变量 $path_info

1.6K10

常见PHP面试题型汇总(附答案)

require是无条件包含,也就是如果一个流程里加入require,无论条件成立与否都会先执行require,当文件不存在或者无法打开的时候,会提示错误,并且会终止程序执行 include返回值,而require...伪静态如何实现? 1、 静态化指的是页面静态化,也即生成实实在在的静态文件,也即不需要查询数据库就可以直接从文件中获取数据,指的是真静态。...一种是用户在访问我们的页面时先判断是否对应的缓存文件存在,如果存在就读缓存,不存在就读数据库,同时生成缓存文件。...1、HTML静态化 效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的 网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法。...如许多PHP函数,如require可以包含URL或文件名。防止代码注入 过滤用户输入 在php.ini中设置禁用allow_url_fopen和allow_url_include

2.8K20
领券