當我們搭建一個靜態網站時，我們經常會有這樣的想法：希望所有頁面，有風格一致的頭部菜單、標題/廣告欄、頁腳。 ... 其實， 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 .
