當我們搭建一個靜態網站時，我們經常會有這樣的想法：希望所有頁面，有風格一致的頭部選單、標題/廣告欄、頁腳，
當然了，也有一些網頁開發工具，比如，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="https://www.cnblogs.com/jacklondon/p/$1" --> 15 <!--#set var="var_page_file_name" value="https://www.cnblogs.com/jacklondon/p/$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 .
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43687.html
標籤：Html/Css
上一篇：CSS文本超出自動隱藏顯示省略號
下一篇：清除浮動clearfix