使用 Apache SSI(Server Side Includes) 製作多語言版靜態網頁

来源:https://www.cnblogs.com/jacklondon/archive/2020/06/01/create_multi_languages_static_page_using_apache_server_side_includes.html
-Advertisement-
Play Games

因此，我們往往期望，網頁排版時，只做一個語言版的網頁。然後把其它語言的純翻譯文字，每個語言一個文件。 ... 經過一番研究，我找到了辦法。那就是使用 Apache SSI(Server Side Includes)。 ...


多語言版靜態網頁，通常都是先做一個語言的網頁，比如中文版，或英文版，然後找人翻譯成另一種語言，最後合作一起，上傳到網頁伺服器。

這種方法，在後續的改動時，往往容易改了一個語言的網頁、遺漏了另一個語言的網頁更改；或者翻譯多語言時，一不小心誤刪除了某個網頁的某個部分，或者多鍵入了無關的字元，造成多個語言版本的不一致。

 

因此，我們往往期望，網頁排版時，只做一個語言版的網頁。然後把其它語言的純翻譯文字，每個語言一個文件。

比如, 一個網頁有如下文件:

文件 用途
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="Typical customers" -->
2 
3 <!--#set var="page_i18-customers-paragraph_02_01" value="Vehicle manufacturing" -->

 

3. 在多語言文件 customers-i18-zh-cn.htm 中，同樣進行翻譯:

1 <!--#set var="page_i18-customers-paragraph_01_01" value="典型客戶" -->
2 
3 <!--#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) 為靜態網頁統一頁面佈局" (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="$1" -->
 9     <!--#set var="var_page_file_name" value="$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="css/foundation.css">
36     <link rel="stylesheet" href="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 class="marketing-hero without-subnav">
64                         <h1 class="hero-main-header">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="../zh-cn/index.htm">首頁</a> | 軟體產品  | <a href="../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 .


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [01]HTML基礎之簡單介紹
    1.前言 現如今科技進步，足不出戶盡曉天下事，一轉身便仿若隔世茫然。科技綻放時代，網路技術對人們的觸變無疑是深遠而重大的，隱於繽紛絢麗的網頁背後，是前端的蛻變更新。 如今，隨意點開頁面，絢麗華彩的特效及流暢的用戶體驗，是以前始料未及的。從切圖到框架，從組件到模塊，從簡單到系統，前端漸成一方世界。 2 ...
  • uni-app之uni.showToast()image路徑問題
    uni-app的API中，showToast的icon值只有success，loading，none三種顯示，失敗沒有圖標。如果失敗時需要顯示圖標，就要用到自定義圖標 image 了。 1 uni.showToast({ 2 title: '掃碼失敗', 3 image:'/static/lost. ...
  • js實現拖拽效果
    <html> <head> <style> div { width: 100px; height: 100px; background: pink; position: relative; top: 10px; left: 10px; } </style> </head> <body> <div>m ...
  • JS數組轉字元串（3種方法）【轉】
    JavaScript 允許數組與字元串之間相互轉換。其中 Array 方法對象定義了 3 個方法，可以把數組轉換為字元串，如表所示。 數組方法 說明 toString() 將數組轉換成一個字元串 toLocalString() 把數組轉換成本地約定的字元串 join() 將數組元素連接起來以構建一個 ...
  • JS控制下拉列表左右選擇實例代碼
    按照國際慣例先放效果圖 <!DOCTYPE html> <html> <head> <title>JavaScript下拉列表左右選擇</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <scrip ...
  • js的15種迴圈遍歷，你掌握了幾種【轉】
    方式一： 原生的 js 迴圈 1.while 迴圈 While語句包括一個迴圈條件和一段代碼塊，只要條件為真，就不斷迴圈執行代碼塊。 while (條件) 語句; //舉例： var i = 0; while (i < 100) { console.log('i 當前為：' + i); i = i ...
  • 零基礎小白轉行如何入門學習web前端
    隨著近些年，web前端開發行業薪資的水漲船高，越來越多的人選擇加入到前端開發行業，他們中的絕大多數人都沒有任何編程基礎，對於這些零基礎的人要怎麼學習web前端開發呢？前端開發都要學習哪些知識。零基礎小白轉行如何入門學習web前端 首先你要知道什麼是web前端，web前端是做什麼的。Web前端做的工作 ...
  • javascript實用寫法彙總
    轉Boolean類型 !!'a' 通過兩個取反，可以強制轉換為Boolean類型。 轉Number類型 // String轉化為Number console.log(+'45'); // 日期輸出時間戳 console.log(+new Date); parseInt ~~，這種方法還可以將字元串轉 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類