使用 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. 在排版网页中，正常排版，将需要设置多语言的部分，写成如下格式:


<div class="row">
	<div class="medium-12 small-centered columns ">
		<h2 class="subheader"><!--#echo var="page_i18-customers-paragraph_01_01" --></h2>
	</div>
</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) 为静态网页统一页面布局" (https://www.cnblogs.com/jacklondon/p/static_page_layout_using_apache_server_side_includes.html) , 编写 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>

其中，第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">

这样，最终的效果就出来了，如下图所示:

之所以把多语言网页，先包含进来，是因为按编程的一般思路，变量先定义，后使用。

这里的多语言段落，也是作为一个变量的，因此，要先包含多语言网页。