这是文章是为了实现前端人员编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用、独立、单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独修改一次对应的独立文件,就能全站更新,做到一劳永逸!
稍微对php或java后台语言有点了解的朋友,都知道有个include的语法,简单讲就是:
把项目页面各页面会重复的部分,如header/footer/sidebar作为公用、独立、单一的文件通过include引入到各页面上,这样修改这些页面公用部分时就能单独修改一次对应的独立文件,就能全站更新,这个功能在修改全站的公用部分代码时,方便快捷!
那么问题来了,在项目前期前端开发人员出页面时,我们总会遇到这问题:
N多静态页面,而页首与页脚又经常要改代码,比如最常见的加个链接什么的,如果各页面链接路径是一样的还好,来个全站批量替换就好了,最要命的是,链接路径会有不同级的情况出现,这时候加个链接就很抓狂了,一不小心还会弄错,反正是修改起来诸多麻烦,有过这样经历的朋友,印象应该很深。
无疑这是个体力活,关键还很耗时间,工作效率不高!
所以我们总希望能实现:编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用、独立、单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独修改一次对应的独立文件,就能全站更新,做到一劳永逸!
下面就是本文的主角登场了:开启SSI配置使shtml支持include公用的页头页脚
什么是shtml?
使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为"服务器端嵌入"或者叫"服务器端包含",是一种基于服务器的网页制作技术,其文件默认扩展名是 .stm、.shtm 和 .shtml。
什么是SSI
SSI是英文Server Side Includes的缩写,翻译成中文就是服务器端包含的意思。从技术角度上说,SSI就是在HTML文件中,可以通过注释行调用的命令或指针。SSI具有 强大的功能,只要使用一条简单的SSI命令就可以实现整个网站的内容更新,时间和日期的动态显示,以及执行shell和CGI脚本程序等复杂的功能。
如何使你的Apache服务器支持SSI
Apache默认是不开启支持SSI的,需要我们更改httpd.conf来进行配置。我这里以windows平台的Apache 为例,打开conf目录下的httpd.conf文件,搜索“AddType text/html .shtml”,找到:
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
把这两行前面的#去掉 ,就能在后缀名为shtml的页面中使用ssi的include语法,如果想在html/htm页面中也能使用ssi的include功能,我们需要添加文件后缀名使ssi支持,修改如下:
AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
我们会看到这两行的上面会有一句注释提示:
# (You will also need to add "Includes" to the "Options" directive.)
意思就是说除了修改这2行,还需要在你的服务器项目配目录配置的Options项中添加Includes,才能正常使用SSI的include功能。
注意:在多数配置中,多个Options指令会互相覆盖,所以,可能必须对需要SSI的特定目录使用Options,以确保对应配置起作用。
举个例子:
我在apache的httpd-vhosts.conf文件添加了下面的虚拟主机:
<VirtualHost *:80>
ServerName www.debug.org
DocumentRoot "D:/Project"
DirectoryIndex index.html index.php index.shtml
ErrorLog "logs/eims-error.log"
CustomLog "logs/eims-access.log" combined
<Directory "D:/Project">
Options Indexes FollowSymLinks
AllowOverride all
Order Allow,Deny
Allow from all
</Directory>
</VirtualHost>
该主机域名:www.debug.org,对应虚拟目录是:D:/Project,那我们就应该在该虚拟主机中定位到Options Indexes FollowSymLinks 并在该项最后添加关键字:Includes,即修改后为:
<VirtualHost *:80>
ServerName www.debug.org
DocumentRoot "D:/Project"
DirectoryIndex index.html index.php index.shtml
ErrorLog "logs/eims-error.log"
CustomLog "logs/eims-access.log" combined
<Directory "D:/Project">
Options Indexes FollowSymLinks Includes
AllowOverride all
Order Allow,Deny
Allow from all
</Directory>
</VirtualHost>
保存httpd.conf,重起apache即可,到此我们就完成了对Apache SSI的设置。
完成SSI配置,使apache能解析SSI的shtml页面的include语法,下面就来说下页面中怎么使用include命令。
比如我们要在根目录的index.shtml引用根目录下的include目录下的header.html页面,我们可以这样写:
引用相对当前虚拟目录的header文件:
<!--#include virtual="includes/header.html" -->
或
<!--#include virtual="/includes/header.html" -->
路径要写正确,路径不正确会报错:[an error occurred while processing this directive]
我们还可以用include的file属性来引用文件,给出当前目录的相对路径其中不能使用"../",也不能使用绝对路径。例如: <!--#include file="header.html" --> 这就要求每一个目录中都包含一个header.html文件。(我的理解就是被包含的文件与该文件同级或者下一级目录或下下..级目录下的文件,如同级的test.html,或者同级目录下的test/test1.html)
本文扩展阅读:
SSI include 命令 路径问题,可查看下面文章:
https://blog.csdn.net/xtra6714/article/details/7097634
用shtml来include网页文件:
https://www.chinaz.com/design/2007/0419/7118.shtml
SSI配置参考文章:
https://jingyan.baidu.com/article/4ae03de323cc903eff9e6bea.html
不用apache,Windows7中IIS简单安装与配置SSI:
https://ons.me/147.html
SSI配置及命令介绍:
https://man.chinaunix.net/newsoft/ApacheManual/howto/ssi.html#page-header
1条评论( 网友:1 条,站长:0 条 ) 网友评论{有您的评论更精彩....}