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

举个简单的例子,比如有如下的 html 文件(命名为 index.html):

<input type='text' />
<input type='button' value='press' />

一个简单的文本框和按钮,我现在想把按钮部分的 html 写在另一个 .html 的文件中(比如说叫 btn.html)然后引入到 index.html 中,要怎么做呢?

1、加载 ssi 模块


首先要加载 ssi 模块。打开 apache 的配置文件 httpd.conf,这个文件应该都已经很熟悉了,前面的文章中多次提到。找到这么一行 LoadModule ssl_module modules/mod_ssl.so,把前面的注释(#)去掉。

2016.01.11 更:

经本地测试,此步骤并不是必须的,多谢 whuper 指出。

2、添加需要的文件类型


同样在 httpd.conf 文件下找到如下两行代码:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml 

有注释的话一样去掉注释。因为使用 ssi 技术的默认文件名为 .shtml,所以我们需要在配置文件中对 .shtml 后缀名进行设置,并按自己的需求设置需要对 ssi 技术进行解析的文件类型设置。

比如这里我要用 .html 的文件进行操作,所以可以在上面两行代码末添加,比如这样:

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

3、添加 INCLUDES


还是在 httpd.conf 文件中,找到这样一行 Options Indexes FollowSymLinks,在后面添加 INCLUDES,变成这样:

Options Indexes FollowSymLinks INCLUDES

需要注意的是,ssi 可以利用 shell 来执行命令,因此这个功能是有危险的,它会执行任何包含在 exec 标记中的命令,如果你的用户有权限修改你的网页内容,建议把该功能关闭。当然你还可以加上IncludesNOEXEC 参数,来关闭 exec 功能,同时又保留 SSI 。此时改为: Options Indexes FollowSymLinks INCLUDES IncludesNOEXEC

4、重启 apache


最后一点,重启 apache 千万不能忘记,有些童鞋刚开始配置 apache 的时候,经常会说怎么不起作用啊,很多时候就是忘记重启了。

5、实践


通过这样的配置我们就能在 html 页面中引入 html 文件了,比如这样:

<input type='text' />
<!--#include virtual="btn.html" -->

也可以用 file 参数:

<input type='text' />
<!--#include file="btn.html"-->

有什么区别呢...

include 元素能按 file 属性或 virtual 属性判断应该包含的文件。file 属性是一个相对于当前目录的文件路径,即不能是一个绝对路径(以 "/" 开头)或包含 "../" 的路径,也就是说被包含文件可以在同一级目录或其子目录中,但不能在上一级目录中。virtual 属性可能更有用,它是一个相对于被提供的文档的URL ,可以以 "/" 开头,但必须与被提供的文档位于同一服务器上,virtual 文件名是 Web 站点上的虚拟目录的完整路径

通俗地说,virtual 相当于绝对路径(从服务器根目录出发),而 file 相当于相对路径(而且文件还不能在上级目录)。所以一般用 virtual 就 ok 了。


参考:

  1. Apache下开启SSI配置使shtml支持include包含
  2. 让Apache支持SHTML(SSI)的配置方法

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

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

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

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

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

  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. sql语句 在字段前面加0

    目前数字如下: 1 2 3 10 想变成长度为5位,如果不够,前面补0, 写法如下 select right('00000'+ltrim(你的字段),5) 结果: 00001 00002 00003 ...

  2. C#语言基础——数组

    数组 一.一位数组 数组初始化,创建数组,数组长度为5 int[] array = new int[5]; array[0] = 1; array[1] = 2; array[2] = 3; arra ...

  3. 在JavaScript和C#中获得referer

    1. JavaScript /** * 获取HTTP请求的Referer * @ishost 布尔类型 Referer为空时是否返回Host(网站首页地址) */ function get_http_ ...

  4. 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

    网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...

  5. Jmeter之Bean shell使用(二)

    上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...

  6. 《C陷阱与缺陷》之1词法"陷阱"

    编译器中负责将程序分解为一个一个符号的部分,一般称为"词法分析器".在C语言中,符号之间的空白(包括空格符.制表符或换行符)将被忽略. 1.=不同于== C语言使用符号" ...

  7. linux关于文件的那些事儿

    一个文件的权限对于系统的安全来说是很重要的,linux是一个支持多任务多用户的系统,我们都不希望一些自己的文件被别人看到或者修改! 对于一个文件的权限我们可以用 ls -l 命令来查看,例如: [ro ...

  8. eclipse 提示错误**cannot be resolved to a type

    这是某个对象不能识别为类型,比如你写了个类,名字叫Hello,如果你调用它的时候不小心写成hello,或者helo,那么就会报这样的错误,很容易改正的,只要你细心一点

  9. devtmpfs文件系统创建设备节点

    分类: LINUX 原文地址:devtmpfs文件系统创建设备节点 作者:wangbaolin719 http://blog.chinaunix.net/uid-27097876-id-4334356 ...

  10. 定时器的应用---中断方式---让8个LED灯,左右各4个来回亮

    定时器的应用---中断方式---让8个LED灯,左右各4个来回亮 /*************************** 中断方式 是主程序专注于其他的事情, 待定时器中断时才执行中断子程序. ** ...