html静态页面怎么用include 引入公共html页面

时间: 2024-05-11 16:13:43 浏览: 144

静态页面实现 include 引入公用代码的示例

静态页面实现 include 引入公用代码的示例在前端开发中，静态页面实现 include 引入公用代码是非常常见的需求，今天我们就来分享一下静态页面实现 include 引入公用代码的示例。让我们来看一下传统的 PHP include 函数实现静态页面引入公用代码的示例。假设我们有一个 index.php 文件，里面包含了 header 和 footer 两个公用代码，我们可以使用 PHP 的 include 函数来引入这些公用代码，如下所示： ```php  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <?php include('header.php'); ?> <div>页面主体部分</div> <?php include('footer.php'); ?> </body> </html>  <header>这是头部</header>  <footer>这是底部</footer> ``` 但是，当我们需要将静态页面打包成 APP 时，传统的 PHP include 函数就不能满足我们的需求了。这时，我们可以使用 gulp 和 gulp-file-include 插件来实现静态页面引入公用代码。我们需要安装 gulp 和 gulp-file-include 插件： ```bash npm init npm install gulp --save-dev npm install gulp-file-include --save-dev ``` 然后，我们需要新建一个 gulpfile.js 文件，并在里面写入以下代码： ```javascript var gulp = require('gulp'); var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function () { gulp.src(['page//*.html', '!page/include/.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); }); ``` 接下来，我们需要创建项目目录结构，并添加测试代码： ```bash app page include header.html footer.html index.html gulpfile.js package.json ``` 在 index.html 文件中，我们可以使用以下代码引入公用代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> @@include('include/header.html') <div>页面主体部分</div> @@include('include/footer.html') </body> </html> ``` 我们可以运行以下命令来生成最终的 index.html 文件： ```bash gulp fileinclude ``` 这样，我们就可以使用 gulp 和 gulp-file-include 插件实现静态页面引入公用代码了。

可以使用以下代码将公共的HTML页面引入到静态页面中： ```html <!DOCTYPE html> <html> <head> <title>静态页面</title> </head> <body>  <?php include 'header.html'; ?>  <p>这是静态页面的内容</p>  <?php include 'footer.html'; ?> </body> </html> ``` 其中，`header.html` 和 `footer.html` 是公共的HTML页面，可以在需要的地方引入。使用 `<?php include '文件路径'; ?>` 的方式可以将文件引入到当前页面中。

阅读全文

html静态页面怎么用include 引入公共html页面

相关推荐

HTML静态页面引入公共html文件(ssi服务器端指令详解)

静态引入其他页面详细的很啊

smarty模板，调用静态页面模板，Smarty-2.6.22

服务器端包含(SSI)：HTML静态页面高效引用指南

jsp:include与include实探

用PHP制作静态网站的模板框架(三)

JS实现完美include加载功能代码

UEditor富文本编辑器的静态资源部分

Java Web应用开发 13 课堂案例-使用page指令和include指令.docx

【ASP.NET编程知识】浅谈ASP.NET的include的使用方法.docx

html[1].zip_zip

Node.js-demo-templatehtml的复用

Django模板导入母版继承和自定义返回Html片段过程解析

让dedecms生成html速度快1倍的方法_.docx

尚硅谷SpringBoot2模板布局与公共页面实践解析

深入探索django.conf：模板与静态文件管理

Freemarker 中的模板文件组织和引入

django.utils.html实战案例：动态内容网站模板构建术

最新推荐

VUE页面中加载外部HTML的示例代码

golang解析html网页的方法

JS中静态页面实现微信分享功能

ASP动态网页生成静态Html

Spring Boot引入swagger-ui 后swagger-ui.html无法访问404的问题

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程