有的时候，我们的页面有公共的导航栏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文件中找到以下两行代码：

  1.  
    AddType text/html .shtml
  2.  
    AddOutputFilter INCLUDES .shtml

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

  1.  
    AddType text/html .shtml .html .htm
  2.  
    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的内容如下：

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>test</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <p>输入框</p>
  9.  
    <input placeholder="hello" />
  10.  
    <p>hhhhhhh</p>
  11.  
    <p>dfsdfdfi</p>
  12.  
    <!--#include virtual='../include/p.html'-->
  13.  
    </body>
  14.  
    </html>

4、p.html内容如下

  1.  
    <p>mmmmmmmm</p>
  2.  
    <!--#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' -->

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

Apache下开启SSI配置，使html支持include包含的更多相关文章

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

    写页面的同学通常会遇到这样的烦恼,就是页面上的 html 标签越来越多的时候,寻找指定的部分就会很困难,那么能不能像 javascript 一样写在不同的文件中引入呢?答案是有的,apache 能做到 ...

  2. 开启SSI配置使shtml支持include公用的页头页脚

    编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用.独立.单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独 ...

  3. 在Apache下开启SSI配置

    开启SSI:html.shtml页面include网页文件 使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为&quo ...

  4. 在Apache下开启SSI配置支持include shtml html和快速配置服务器

    作为前端开发,使用Apache快速搭建服务器极为方便. 1.找到apach安装目录,找到conf目录下 的httpd.conf 使用SSI(Server Side Include)的html文件扩展名 ...

  5. Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

  6. nginx配置 yii2 URL重写规则 SSI配置使shtml

    location / { // 加上红色部分 重写url try_files $uri $uri/ /index.php?$args; if (!-e $request_filename){ rewr ...

  7. apache下虚拟域名配置

    在我们开发中通过虚拟域名来访问一个指定的项目确实很方便,接下来教大家如何通过手动的方式去配置虚拟域名(已apache服务器为例) 一.首页我们得找到host文件.windows下这个文件在c盘中WIN ...

  8. nginx配置使其支持thinkphp的pathinfo模式

    #user root;#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log noti ...

  9. linux apache下虚拟主机配置方法

    假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修改/etc/httpd/conf/httpd.conf,在文件的最后加入 ...

随机推荐

  1. 8分钟丨教你玩转 API

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由织云平台团队发表于云+社区专栏 背景 当下,业界越来越多公司在项目架构设计时,会采用微服务架构.微服务架构,可以让我们的产品有更好的扩 ...

  2. C# 新建 exe文件，并且自定义协议从浏览器中启动该程序

    1. C# 新建一个 exe 文件: 打开你的 vs ,[文件] ---> [新建] ---> [项目] 选择 Windows 窗体应用,并起一个名字: 接着该文件会在当前项目的 myap ...

  3. 3.C#基础篇-->堆和栈

    一.前言 堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不 ...

  4. [javaSE] 单例设计模式

    四人帮设计了23中设计模式 单例设计模式:解决一个类在内存中只存在一个对象 构造函数私有化 在类中创建一个本类对象 提供一个方法可以获取该对象 class Single{ private static ...

  5. Linux下socket通信和epoll

    上一篇博客用多线程实现服务端和多个客户端的通信,但是在实际应用中如果服务端有高并发的需求,多线程并不是一个好选择. 实现高并发的一种方法是IO多路复用,也就是select,poll,epoll等等. ...

  6. IntelliJ IDEA 使用经验总结

    一. 准备工作 1. 点击此下载 IntelliJ IDEA 开发工具 二. 注册 1. 修改  C:\Windows\System32\drivers\etc\hosts ,在末尾添加  0.0.0 ...

  7. Java - String, Stringbuilder, StringBuffer比较

    http://www.cnblogs.com/zuoxiaolong/p/lang1.html

  8. Java 如何重写对象的 equals 方法和 hashCode 方法

    前言:Java 对象如果要比较是否相等,则需要重写 equals 方法,同时重写 hashCode 方法,而且 hashCode 方法里面使用质数 31.接下来看看各种为什么. 一.需求: 对比两个对 ...

  9. MVC 导出Execl 的总结几种方式 （四）

    这种方式我个人还是比较喜欢的,使用部分视图的方式,导出Execl 这样在编辑样式上也是很方便的 第一步: 编辑导出视图页 @using H5UpdateImage.Models; @{ Layout ...

  10. LOJ#6035. 「雅礼集训 2017 Day4」洗衣服

    传送门 先处理出每一件衣服最早什么时候洗完,堆+贪心即可 然后同样处理出每件衣服最早什么时候烘干 然后倒序相加取最大值 # include <bits/stdc++.h> using na ...