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中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Keepalived+Nginx双机配置小结

《Keepalived+Nginx双机配置小结》本文主要介绍了Keepalived+Nginx双机配置小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1.1 软硬件要求1.2 部署前服务器配置调优1.3 Nginx+Keepalived部署1.3

Apache伪静态(Rewrite).htaccess文件详解与配置技巧

《Apache伪静态(Rewrite).htaccess文件详解与配置技巧》Apache伪静态(Rewrite).htaccess是一个纯文本文件,它里面存放着Apache服务器配置相关的指令,主要的... 一、.htAccess的基本作用.htaccess是一个纯文本文件,它里面存放着Apache服务器

nginx配置多域名共用服务器80端口

《nginx配置多域名共用服务器80端口》本文主要介绍了配置Nginx.conf文件,使得同一台服务器上的服务程序能够根据域名分发到相应的端口进行处理,从而实现用户通过abc.com或xyz.com直... 多个域名,比如两个域名,这两个域名其实共用一台服务器(意味着域名解析到同一个IP),一个域名为abc

nginx生成自签名SSL证书配置HTTPS的实现

《nginx生成自签名SSL证书配置HTTPS的实现》本文主要介绍在Nginx中生成自签名SSL证书并配置HTTPS,包括安装Nginx、创建证书、配置证书以及测试访问,具有一定的参考价值,感兴趣的可... 目录一、安装nginx二、创建证书三、配置证书并验证四、测试一、安装nginxnginx必须有"-

springboot rocketmq配置生产者和消息者的步骤

《springbootrocketmq配置生产者和消息者的步骤》本文介绍了如何在SpringBoot中集成RocketMQ,包括添加依赖、配置application.yml、创建生产者和消费者,并展... 目录1. 添加依赖2. 配置application.yml3. 创建生产者4. 创建消费者5. 使用在

SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)

《SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)》本文介绍了如何在SpringBoot项目中使用Jasypt对application.yml文件中的敏感信息(如数... 目录SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)前言一、J

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②