Apache下开启SSI配置,使html支持include包含

2024-03-14 20:18

本文主要是介绍Apache下开启SSI配置,使html支持include包含,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

有的时候,我们的页面有公共的导航栏navbar,公共的脚注footer,那么我们就想把这些公共部分独立成一个html文件,在要引用的地方像引用js,css一样,给包含进来。

Apache下开启SSI配置,使html支持include包含,就可以达到该功能。

一共4个操作步骤,下面介绍具体的操作:

1、加载SSI模块

     找到Apache的安装路径,在Apache文件夹下找到conf文件夹,在该文件夹下有个文件httpd.conf,用编辑器打开它。找到这行:LoadModule ssl_module modules/mod_ssl.so,将前面的注释(#)去掉。如下图所示:


2、添加需要的文件类型

在httpd.conf文件中找到以下两行代码:

AddType text/html .shtml 
AddOutputFilter INCLUDES .shtml

有注释的话去掉注释(#)。因为使用SSI技术的默认文件名是.shtml,所以我们需要在配置文件中添加我们所需要解析的文件类型,如下面所示:

AddType text/html .shtml  .html  .htm
AddOutputFilter INCLUDES .shtml  .html  .htm

3、添加INCLUDES

在httpd.conf文件中找到这一行:

Options +Indexes +FollowSymLinks +ExecCGI  

在后面添加INCLUDES,如下面所示:

Options +Indexes +FollowSymLinks +ExecCGI  +INCLUDES  

4、重启Apache(这步很重要)

好了,完成以上配置,我们就可以使用include标签在html页面的任何位置添加我们想要包含的html文件了。


下面举个例子来说明一下如何使用include标签

1、先说说整个文件的分配路径

      把所有的代码放到test文件夹里面,即在test文件夹下包括两个文件夹include和ss,和一个html文件btn.html,如下图所示:

            

      include文件夹下包括一个html文件p.html,如下图所示:

              

        ss文件夹下包括一个html文件input.html,如下图所示:

                

2、文件的引用:在input.html中使用标签include引入文件p.html;在p.html中使用include标签引入btn.html;使用虚拟路径virtual引入文件。

3、input.html的内容如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>test</title>
</head>
<body>
<p>输入框</p>
<input  placeholder="hello" />
<p>hhhhhhh</p>
<p>dfsdfdfi</p>
<!--#include virtual='../include/p.html'-->
</body>
</html>


4、p.html内容如下

<p>mmmmmmmm</p>
<!--#include virtual="../btn.html"-->


5、btn.html内容如下

<button>点击一下</button>

6、显示的效果如下:



注意1:我们引入的文件的格式如下:

<!--#include virtual='../include/p.html'-->
上面的路径一定要正确,如果改成:

<!--#include virtual='p.html'-->
就会报错:an error occurred while processing this directive


注意2:我们在引用的时候。标签<!---->不能写成这样<!--  -->,即不能有空格,如下面这种写法就是错的:

<!-- #include virtual='../include/p.html' -->

这种写法,在浏览器中没有报错,也没有显示想要实现的效果。


参考文章地址:http://www.cnblogs.com/zichi/p/4889075.html









这篇关于Apache下开启SSI配置,使html支持include包含的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/809612

相关文章

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

windos server2022的配置故障转移服务的图文教程

《windosserver2022的配置故障转移服务的图文教程》本文主要介绍了windosserver2022的配置故障转移服务的图文教程,以确保服务和应用程序的连续性和可用性,文中通过图文介绍的非... 目录准备环境:步骤故障转移群集是 Windows Server 2022 中提供的一种功能,用于在多个

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS?优势:应用场景:DFS配置步骤什么是DFS?DFS指的是分布式文件系统(Distr

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

关于Maven中pom.xml文件配置详解

《关于Maven中pom.xml文件配置详解》pom.xml是Maven项目的核心配置文件,它描述了项目的结构、依赖关系、构建配置等信息,通过合理配置pom.xml,可以提高项目的可维护性和构建效率... 目录1. POM文件的基本结构1.1 项目基本信息2. 项目属性2.1 引用属性3. 项目依赖4. 构

龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

《龙蜥操作系统AnolisOS-23.x安装配置图解教程(保姆级)》:本文主要介绍了安装和配置AnolisOS23.2系统,包括分区、软件选择、设置root密码、网络配置、主机名设置和禁用SELinux的步骤,详细内容请阅读本文,希望能对你有所帮助... ‌AnolisOS‌是由阿里云推出的开源操作系统,旨

mysql-8.0.30压缩包版安装和配置MySQL环境过程

《mysql-8.0.30压缩包版安装和配置MySQL环境过程》该文章介绍了如何在Windows系统中下载、安装和配置MySQL数据库,包括下载地址、解压文件、创建和配置my.ini文件、设置环境变量... 目录压缩包安装配置下载配置环境变量下载和初始化总结压缩包安装配置下载下载地址:https://d

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情