欢迎大家下载试用折桂单点登录系统, http://zheguisoft.com

使用 Apache SSI(Server Side Includes) 为静态网页统一页面布局

当我们搭建一个静态网站时,我们经常会有这样的想法:希望所有页面,有风格一致的头部菜单、标题/广告栏、页脚。

 

当然了,也有一些网页开发工具,比如,Adobe Dreamweaver, 自带此功能。其实现方法是:

将可在多个页面重复使用的页面部分,独立出来,称之为“库(library)”,这可以理解为软件开发中的“组件”;

在每个需要的网页中,增加此库/组件,Adobe Dreamweaver工具将此库的 HTML 源代码复制到此网页中,并在前后增加标签定位字符(有开始、结束),并注释说明,不要手工更改标签定位字符内部的内容;

单个网页可添加多个库/组件;

当某个库/组件有变化时,Adobe Dreamweaver工具根据标签定位符,找到所有网页中的对应标签定位字符,将其中的内容,进行批量替换

 

Adobe Dreamweaver 这种功能,当然高级,只不过,同类网页编辑软件,支持此功能的极少见。

 

其实, Apache SSI(Server Side Includes) ,可以做到静态网页统一页面布局,可以自动地为每个网页添加风格一致的头部菜单、标题/广告栏、页脚。

这里面用到 Apache HTTP Server 的两个技术:

a) .htaccess 文件

b) shtml ,即简单的动态网页编程语言。

 

详细如下:

1. 在静态网页目录下,创建 .htaccess 文件,内容为:

SSILegacyExprParser on
RewriteRule ^(en.us|zh.cn)/(.*)$ /layout.shtml?language=$1&page_file_name=$2

 

意思是,

当用户使用浏览器访问 http://localhost:81/zh-cn/page_a.htm 的时候,Apache HTTP Server 内部使用 http://localhost:81/layout.shtml?language=zh-cn&page_file_name=page_a.htm 来生成静态页面,

当用户使用浏览器访问 http://localhost:81/zh-cn/page_b.htm 的时候,Apache HTTP Server 内部使用 http://localhost:81/layout.shtml?language=zh-cn&page_file_name=page_b.htm 来生成静态页面,

当用户使用浏览器访问 http://localhost:81/zh-cn/page_c.htm 的时候,Apache HTTP Server 内部使用 http://localhost:81/layout.shtml?language=zh-cn&page_file_name=page_c.htm 来生成静态页面.

浏览器上的网址不会变化。

 

这里的 layout.shtml ,就是统一页面布局页面。

 

2. layout.shtml 文件,本质是静态网页,加上一点 SSI 标签。内容为:

 1 <html class="no-js" lang="zh-CN" dir="ltr">
 2   <head>
 3     <title>上海折桂软件有限公司</title>
 4     <meta name="description" content="上海折桂软件有限公司"  />
 5     <meta name="keywords" content="上海折桂软件有限公司, 下载, 文件下载"  />
 6 </head>
 7 <body>
 8     title block;
 9     <br/>
10 
11 <!--#set var="var_language" value="" -->
12 <!--#set var="var_page_file_name" value="" -->
13 <!--#if expr='${QUERY_STRING} = /^language=(.*)&page_file_name=(.*)$/' -->
14     <!--#set var="var_language" value="$1" -->
15     <!--#set var="var_page_file_name" value="$2" -->
16 
17     <!--#include virtual="/${var_page_file_name}" -->
18 <!--#else -->
19 <!--#endif -->
20 
21     <br/>
22     footer block;
23 </body>
24 </html>

以上代码,第 11-15 行,将网址中的参数,使用正则表达式,提取到变量 var_language, var_page_file_name 中。

如果网址是:http://localhost:81/zh-cn/page_a.htm ,提取到的变量为  var_language = "zh-cn", 而 var_page_file_name 为 "page_a.htm"。

 

第17行代码,则是将 page_a.htm 的网页内容,读取,填充到有页头、页尾的临时页面中间,拼合成一个完整网页,输出给用户的浏览器。

 

这样,当用户使用浏览器访问 http://localhost:81/zh-cn/page_a.htm 的时候,得到:

title block;
page_content_a;
footer block; 

 

当用户使用浏览器访问 http://localhost:81/zh-cn/page_b.htm 的时候,得到:

title block;
page_content_b;
footer block; 

 

在开发 page_a.htm 及 page_b.htm 时,并不用考虑页头、页尾。

因为 .htaccess 文件 、layout.shtml 会合作,自动在输出页面前,补出页头、页尾,从而实现了静态网页统一页面布局的目的。

 

美工也省事很多,只需要修改 layout.shtml 一个文件,即可实现整个网站的风格升级。

 

----------------备注:

使用 SSILegacyExprParser on ,是因为最新版 Apache 的这一部分正则表达式解析有 bug, 但它兼容老版本的正则表达式格式。

详细见:

Bug 57448 - SSI <!--#set --> cannot capture backreferences from regex match in <!--#if -->
https://bz.apache.org/bugzilla/show_bug.cgi?id=57448

Get parts of DOCUMENT_URI using regex and SSI
https://stackoverflow.com/questions/41977344/get-parts-of-document-uri-using-regex-and-ssi

 

-------欢迎转载,转载请注明出处:https://www.cnblogs.com/jacklondon/ 。也欢迎访问: http://www.zheguisoft.com .

posted @ 2020-04-27 14:43  Jacklondon Chen  Views(278)  Comments(0Edit  收藏
欢迎大家下载试用折桂单点登录系统, http://zheguisoft.com