多語言版靜態網頁，通常都是先做一個語言的網頁，比如中文版，或英文版，然后找人翻譯成另一種語言，最后合作一起，上傳到網頁服務器，
這種方法，在后續的改動時，往往容易改了一個語言的網頁、遺漏了另一個語言的網頁更改；或者翻譯多語言時，一不小心誤洗掉了某個網頁的某個部分，或者多鍵入了無關的字符，造成多個語言版本的不一致，
因此，我們往往期望，網頁排版時，只做一個語言版的網頁，然后把其它語言的純翻譯文字，每個語言一個檔案，
比如, 一個網頁有如下檔案:
| 檔案 | 用途 |
| customers.htm | HTML 檔案，排版控制 |
| customers-i18-en-us.htm | 純英文陳述句，無 HTML代碼 |
| customers-i18-zh-cn.htm | 純中文陳述句，無 HTML代碼 |
經過一番研究，我找到了辦法，那就是使用 Apache SSI(Server Side Includes)，
具體方法如下:
1. 在排版網頁中，正常排版，將需要設定多語言的部分，寫成如下格式:
1 <div class="row"> 2 <div class="medium-12 small-centered columns "> 3 <h2 class="subheader"><!--#echo var="page_i18-customers-paragraph_01_01" --></h2> 4 </div> 5 </div>
其中，第3行的加粗部分，為參考一個多語言段落(一句話，或幾句話)，
2. 然后，在多語言檔案 customers-i18-en-us.htm 中，進行翻譯:
1 <!--#set var="page_i18-customers-paragraph_01_01" value=https://www.cnblogs.com/jacklondon/p/"Typical customers" --> 2 3 <!--#set var="page_i18-customers-paragraph_02_01" value="https://www.cnblogs.com/jacklondon/p/Vehicle manufacturing" -->
3. 在多語言檔案 customers-i18-zh-cn.htm 中，同樣進行翻譯:
1 <!--#set var="page_i18-customers-paragraph_01_01" value=https://www.cnblogs.com/jacklondon/p/"典型客戶" --> 2 3 <!--#set var="page_i18-customers-paragraph_02_01" value="https://www.cnblogs.com/jacklondon/p/車輛制造" -->
三個檔案中，使用 "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) 為靜態網頁統一頁面布局" (https://www.cnblogs.com/jacklondon/p/static_page_layout_using_apache_server_side_includes.html) , 撰寫 layout.shtml 如下:
1 <!doctype html> 2 <html class="no-js" lang="zh-CN" dir="ltr"> 3 <head> 4 <meta charset="utf-8" /> 5 <!--#set var="var_language" value="" --> 6 <!--#set var="var_page_file_name" value="" --> 7 <!--#if expr='${QUERY_STRING} = /^language=(.*)&page_file_name=(.*).htm$/' --> 8 <!--#set var="var_language" value="https://www.cnblogs.com/jacklondon/p/$1" --> 9 <!--#set var="var_page_file_name" value="https://www.cnblogs.com/jacklondon/p/$2" --> 10 11 <!-- layout.shtml?page_a.htm 12 var_language : <!--#echo var="var_language" --> ; 13 var_page_file_name : <!--#echo var="var_page_file_name" --> ; 14 --> 15 16 <!--#else --> 17 <!--#endif --> 18 19 <!--#include virtual="/pages/${var_page_file_name}-i18-${var_language}.htm" --> 20 <!--#if expr="${page_i18-header_title}" --> 21 <title><!--#echo var="page_i18-header_title" --></title> 22 <!--#endif --> 23 <!--#if expr="${page_i18-header_keywords}" --> 24 <meta name="keywords" content="<!--#echo var="page_i18-header_keywords" -->"/> 25 <!--#endif --> 26 <!--#if expr="${page_i18-header_description}" --> 27 <meta name="description" content="<!--#echo var="page_i18-header_description" -->"/> 28 <!--#endif --> 29 30 <!--#include virtual="/pages/common_html_header_piece-201909.htm"--> 31 32 <link rel="stylesheet" href='/pages/layout_202004-font-<!--#echo var="var_language" -->.css' type="text/css"> 33 34 <!-- 35 <link rel="stylesheet" href="https://www.cnblogs.com/jacklondon/p/css/foundation.css"> 36 <link rel="stylesheet" href="https://www.cnblogs.com/jacklondon/p/css/app.css"> 37 --> 38 39 <!-- 40 <link rel="icon" href="https://foundation.zurb.com/assets/img/icons/foundation-favicon.ico" type="image/x-icon"> 41 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css"> 42 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> 43 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> 44 <link rel="stylesheet" href="https://foundation.zurb.com/assets/css/app.css?hash=dc3f01282bc588b45eb652fb55fe1410"> 45 --> 46 47 </head> 48 49 50 <body> 51 <!--#include virtual="/pages/layout_202004-i18-${var_language}.htm" --> 52 <!--#include virtual="/pages/common_page_header-menu-i18-${var_language}.htm" --> 53 54 <div class="off-canvas-wrapper"> 55 <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 56 <!--#include virtual="common_page_header-menu_small_left.htm"--> 57 <div class="off-canvas-content" data-off-canvas-content> 58 <!--#include virtual="common_page_header-menu_small_left-placeholder.htm"--> 59 60 61 <!--#include virtual="common_page_header-menu_medium_top.htm"--> 62 <!-- 63 <header > 64 <h1 >Getting Started With Foundation</h1> 65 </header> 66 --> 67 <article class="page-content"> 68 <div class="row"> 69 <div class="medium-12 small-centered columns " id="div_nav_info"> 70 <!-- 71 位置: <a href="https://www.cnblogs.com/jacklondon/zh-cn/index.htm">首頁</a> | 軟體產品 | <a href="https://www.cnblogs.com/jacklondon/zh-cn/product_zg_print.htm">折桂列印平臺系統</a> 72 --> 73 </div> 74 </div> 75 <!--#include virtual="/pages/${var_page_file_name}.htm" --> 76 77 78 79 80 </article> 81 <!--#include virtual="/pages/common_page_footer-201909.htm"--> 82 83 </div> 84 </div> 85 </div> 86 87 88 <!--#include virtual="/pages/common_page_footer_js-201909.htm"--> 89 90 <script language="JavaScript" type="text/javascript" src="/pages/layout_202004.js"></script> 91 92 <script language="JavaScript" type="text/javascript"> 93 $(document).ready(function(){ 94 $("#div_nav_info").html('<!--#echo var="page_i18-layout-nav_location" -->: '+ '<!--#echo var="page_i18-layout-home" -->'); 95 init_layout(); 96 }); 97 </script> 98 </body> 99 </html>
其中，第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">
這樣，最終的效果就出來了，如下圖所示:
之所以把多語言網頁，先包含進來，是因為按編程的一般思路，變數先定義，后使用，
這里的多語言段落，也是作為一個變數的，因此，要先包含多語言網頁，
-------歡迎轉載，轉載請注明出處：https://www.cnblogs.com/jacklondon/ ，也歡迎訪問: http://www.zheguisoft.com .
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31394.html
標籤：Html/Css
上一篇：前端CSS五中元素定位型別
下一篇：[01]HTML基礎之簡單介紹