当我们搭建一个静态网站时，我们经常会有这样的想法：希望所有页面，有风格一致的头部菜单、标题/广告栏、页脚。
当然了，也有一些网页开发工具，比如，古琴多少钱adobe dreamweaver, 自带此功能。其实现方法是：
将可在多个页面重复使用的页面部分，独立出来，称之为“库(library)”，这可以理解为软件开发中的“组件”；
在每个需要的网页中，增加此库/组件，adobe dreamweaver工具将此库的 html 源代码复制到此网页中，并在前后增加标签定位字符(有开始、结束)，并注释说明，不要手工更改标签定位字符内部的内容；
单个网页可添加多个库/组件;
当某个库/组件有变化时，adobe dreamweaver工具根据标签定位符，找到所有网页中的对应标签定位字符，将其中的内容，进行批量替换；
adobe dreamweaver 这种功能，当然高级，只不过，同类网页编辑软件，支持此功能的极少见。
其实，apache ssi(rver side includes) ，可以做到静态网页统一页面布局，可以自动地为每个网页添加风格一致的头部菜单、标题/广告栏、页脚。
这里面用到 apache http rver 的两个技术:
a).htaccess 文件。
b)shtml ，即简单的动态网页编程语言。
详细如下:
1. 在静态网页目录下，创建.htaccess 文件，内容为:
ssilegacyexprparr onrewriterule ^(en.us|zh.cn)/(.*)$ /layout.shtml?language=$1&page_file_name=$2
意思是，
当用户使用浏览器访问http://localhost:81/zh-cn/page_a.htm 的时候，apache http rver 内部使用http://localhost:81/layout.shtml?language=zh-cn&page_file_name=page_a.htm 来生成静态页面,
当用户使用浏览器访问http://localhost:81/zh-cn/page_b.htm 的时候，apache http rver 内部使用http://localhost:81/layout.shtml?language=zh-cn&page_file_name=page_b.htm来生成静态页面,
当用户使用浏览器访问http://localhost:81/zh-cn/page_c.htm 的时候，apache http rver 内部使用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 <!--#t var="var_language" value="" -->12 <!--#t var="var_page_file_n新产品的推广ame" value="" -->13 <!--#if expr='${query_string} = /^language=(.*)&page_file_name=三分钟英语演讲(.*)$/' -->14 <!--#t var="var_language" value="$1" -->15 <!--#t var="var_page_file_name" value="$2" -->16 17 <!--#include virtual="/${var_page_file_name}" -->18 <!--#el -->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 一个文件，即可实现整个网站的风格升级。
—————-备注:
使用ssilegacyexprparr on ，是因为最新版 apache 的这一部分正则表达式解析有 bug, 但它兼容老版本的正则表达式格式。
详细见:
bug 57448 – ssi <!–#t –> cannot capture backref夸父逐日原文及翻译erences from regex match in <!–#if –>
/d/file/titlepic/error-2023-04-03.html style="color: #ff6600">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/ 。也欢迎访问: /d/file/titlepic/index.htm .
本文发布于:2023-04-03 18:33:51，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f0ec47dbb5335e26aa20cd6c67a992c5.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：使用 Apache SSI(Server Side Includes) 为静态网页统一页面布局.doc
本文 PDF 下载地址：使用 Apache SSI(Server Side Includes) 为静态网页统一页面布局.pdf
| 留言与评论（共有 0 条评论） |
