使用 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
-------歡迎轉載，轉載請注明出處：http://www.rzrgm.cn/jacklondon/ 。也歡迎訪問: http://www.zheguisoft.com .
浙公網安備 33010602011771號