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' -->
这种写法,在浏览器中没有报错,也没有显示想要实现的效果。
Apache下开启SSI配置,使html支持include包含的更多相关文章
- Apache下开启SSI配置使html支持include包含
写页面的同学通常会遇到这样的烦恼,就是页面上的 html 标签越来越多的时候,寻找指定的部分就会很困难,那么能不能像 javascript 一样写在不同的文件中引入呢?答案是有的,apache 能做到 ...
- 开启SSI配置使shtml支持include公用的页头页脚
编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用.独立.单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独 ...
- 在Apache下开启SSI配置
开启SSI:html.shtml页面include网页文件 使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为&quo ...
- 在Apache下开启SSI配置支持include shtml html和快速配置服务器
作为前端开发,使用Apache快速搭建服务器极为方便. 1.找到apach安装目录,找到conf目录下 的httpd.conf 使用SSI(Server Side Include)的html文件扩展名 ...
- Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验
安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...
- nginx配置 yii2 URL重写规则 SSI配置使shtml
location / { // 加上红色部分 重写url try_files $uri $uri/ /index.php?$args; if (!-e $request_filename){ rewr ...
- apache下虚拟域名配置
在我们开发中通过虚拟域名来访问一个指定的项目确实很方便,接下来教大家如何通过手动的方式去配置虚拟域名(已apache服务器为例) 一.首页我们得找到host文件.windows下这个文件在c盘中WIN ...
- nginx配置使其支持thinkphp的pathinfo模式
#user root;#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log noti ...
- linux apache下虚拟主机配置方法
假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修改/etc/httpd/conf/httpd.conf,在文件的最后加入 ...
随机推荐
- php发送get请求
感谢:http://www.zoneself.org/2014/07/21/content_2665.html 1.用PHP发送get请求,很简单: <?php $url='http://www ...
- 一个快速搜索下载jar包的网站
在偶然的机会,我一个快速搜索下载jar包的网站.里面涵盖了所有的几乎全世界开源的jar包,感觉这个功能特别适合java.android开发者使用,共享出来給大家悄悄. 百度一下:manyjar,就可以 ...
- UML与ER图
UML 统一建模语言(Unified Modeling Language, UML)是一种描述软件系统结构的图形化语言. 类图 类图用于描述类之间的关系,类图中主要的关系包括: 聚集 带空心菱形的实心 ...
- How系列-公网如何ssh到内网的Linux系统中?
起因 最近碰到一件事:B同学在他电脑的Ubuntu虚拟机中学习搭建服务器碰到了问题,要我帮他看下.我总不能一个QQ远程桌面连过去,那样操作会卡到崩溃.ssh过去是最好的方法,不过他的电脑跟我不在一个局 ...
- .net core iis 502.5
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>n ...
- Sqlserver2008及以上使用全文索引排除干扰词
关于SQLServer2008全文索引干扰词 使用SQL SERVER 2008全文索引进行搜索 contains(Keywords, '"xx of xx*"') (注意是后面 ...
- 网络编程: 基于TCP协议的socket, 实现一对一, 一对多通信
TCP协议 面向连接 可靠的 面向字节流形式的 tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 TCP协议编码流程: 服务器端: 客户端 实例化对 ...
- python中函数重载和重写
python 中的重载 在python中,具有重载的思想却没有重载的概念.所以有的人说python这么语言并不支持函数重载,有的人说python具有重载功能.实际上python编程中具有重载的目的缺 ...
- LOJ#6271. 「长乐集训 2017 Day10」生成树求和 加强版
传送门 由于是边权三进制不进位的相加,那么可以考虑每一位的贡献 对于每一位,生成树的边权相当于是做模 \(3\) 意义下的加法 考虑最后每一种边权的生成树个数,这个可以直接用生成函数,在矩阵树求解的时 ...
- 那些年我们对npm 和 cnpm 的误区
1. npm 和 cnpm 的区别 相信很多人都不太明白 npm 和 cnpm 到底是什么东东, 为啥在国内要用 淘宝镜像使用 cnpm, (1) 两者之间只是 node 中包管理器的不同哟, (2) ...