使用 Apache SSI(Server Side Includes) 製作多語言版靜態網頁
阿新 • • 發佈：2020-09-11
多語言版靜態網頁，通常都是先做一個語言的網頁，比如中文版，或英文版，然後找人翻譯成另一種語言，最後合作一起，上傳到網頁伺服器。
這種方法，在後續的改動時，往往容易改了一個語言的網頁、遺漏了另一個語言的網頁更改；或者翻譯多語言時，一不小心誤刪除了某個網頁的某個部分，或者多鍵入了無關的字元，造成多個語言版本的不一致。
因此，我們往往期望，網頁排版時，只做一個語言版的網頁。然後把其它語言的純翻譯文字，每個語言一個檔案。
比如, 一個網頁有如下檔案:
| 檔案 | 用途 |
| customers.htm | html檔案，排版控制 |
| customers-i18-en-us.htm | 純英文語句，無html程式碼 |
| customers-i18-zh-cn.htm | 純中文語句，無HTML程式碼 |
經過一番研究，我找到了辦法。那就是使用 Apache SSI(Server Side Includes)。
具體方法如下:
1. 在排版網頁中，正常排版，將需要設定多語言的部分，寫成如下格式:
<div class="row">
<div class="medium-12 small-centered columns ">
<h2 class="subheader"><!--#echo var="page_i18-customers-paragraph_01_01" --></h2>
</div>其中，第3行的加粗部分，為引用一個多語言段落(一句話，或幾句話)。
2. 然後，在多語言檔案 customers-i18-en-us.htm 中，進行翻譯:
<!--#set var="page_i18-customers-paragraph_01_01" value="Typical customers" -->
<!--#set var="page_i18-customers-paragraph_02_01" value="Vehicle manufacturing" -->3. 在多語言檔案 customers-i18-zh-cn.htm 中，同樣進行翻譯:
<!--#set var="page_i18-customers-paragraph_01_01" value="典型客戶" -->
<!--#set var="page_i18-customers-paragraph_02_01" value="車輛製造" -->三個檔案中，使用 "page_i18-customers-paragraph_01_01" 作為多語言的 key 值，進行關聯。
4. 最後，使用layout.shtml 將以上檔案組合起來:
當用戶訪問英文網頁時，使用customers.htm +customers-i18-en-us.htm; 當用戶訪問中文網頁時，使用customers.htm + customers-i18-zh-cn.htm;
假定英文網址為http://xxx/en-us/customers.htm, 中文網址為http://xxx/zh-cn/customers.htm，使用我之前部落格文章 "使用 Apache SSI(Server Side Includes) 為靜態網頁統一頁面佈局", 編寫layout.shtml 如下:
<!doctype html>
<html class="no-js" lang="zh-CN" dir="ltr">
<head>
<meta charset="utf-8" />
<!--#set var="var_language" value="" -->
<!--#set var="var_page_file_name" value="" -->
<!--#if expr='${QUERY_STRING} = /^language=(.*)&page_file_name=(.*).htm$/' -->
<!--#set var="var_language" value="$1" -->
<!--#set var="var_page_file_name" value="$2" -->
<!-- layout.shtml?page_a.htm
var_language : <!--#echo var="var_language" --> ;
var_page_file_name : <!--#echo var="var_page_file_name" --> ;
-->
<!--#else -->
<!--#endif -->
<!--#include virtual="/pages/${var_page_file_name}-i18-${var_language}.htm" -->
<!--#if expr="${page_i18-header_title}" -->
<title><!--#echo var="page_i18-header_title" --></title>
<!--#endif -->
<!--#if expr="${page_i18-header_keywords}" -->
<meta name="keywords" content="<!--#echo var="page_i18-header_keywords" -->"/>
<!--#endif -->
<!--#if expr="${page_i18-header_description}" -->
<meta name="description" content="<!--#echo var="page_i18-header_description" -->"/>
<!--#endif -->
<!--#include virtual="/pages/common_html_header_piece-201909.htm"-->
<link rel="stylesheet" href='/pages/layout_202004-font-<!--#echo var="var_language" -->.css' type="text/css">
<!--
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
-->
<!--
<link rel="icon" href="https://foundation.zurb.com/assets/img/icons/foundation-favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://foundation.zurb.com/assets/css/app.css?hash=dc3f01282bc588b45eb652fb55fe1410">
-->
</head>
<body>
<!--#include virtual="/pages/layout_202004-i18-${var_language}.htm" -->
<!--#include virtual="/pages/common_page_header-menu-i18-${var_language}.htm" -->
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<!--#include virtual="common_page_header-menu_small_left.htm"-->
<div class="off-canvas-content" data-off-canvas-content>
<!--#include virtual="common_page_header-menu_small_left-placeholder.htm"-->
<!--#include virtual="common_page_header-menu_medium_top.htm"-->
<!--
<header class="marketing-hero without-subnav">
<h1 class="hero-main-header">Getting Started With Foundation</h1>
</header>
-->
<article class="page-content">
<div class="row">
<div class="medium-12 small-centered columns " id="div_nav_info">
<!--
位置: <a href="../zh-cn/index.htm">首頁</a> | 軟體產品 | <a href="../zh-cn/product_zg_print.htm">折桂列印平臺系統</a>
-->
</div>
</div>
<!--#include virtual="/pages/${var_page_file_name}.htm" -->
</article>
<!--#include virtual="/pages/common_page_footer-201909.htm"-->
</div>
</div>
</div>
<!--#include virtual="/pages/common_page_footer_js-201909.htm"-->
<script language="JavaScript" type="text/JavaScript" src="/pages/layout_202004.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#div_nav_info").html('<!--#echo var="page_i18-layout-nav_location" -->: '+ '<!--#echo var="page_i18-layout-home" -->');
init_layout();
});
</script>
</body>
</html>廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
其中，第19行，為動態包含多語言檔案:
<!--#include virtual="/pages/${var_page_file_name}-i18-${var_language}.htm" -->第 75 行，則包含正文排版HTML檔案:
<!--#include virtual="/pages/${var_page_file_name}.htm" -->在網站模板控制檔案的正文塊裡放置當頁網頁:
<article class="page-content">這樣，最終的效果就出來了
之所以把多語言網頁，先包含進來，是因為按程式設計的一般思路，變數先定義，後使用。
這裡的多語言段落，也是作為一個變數的，因此，要先包含多語言網頁。