首页 > > 网页制作 > css >

使用 Apache SSI(Server Side Includes) 制作多…

2020-06-01 16:02:56来源：博客园阅读 ()

使用 Apache SSI(Server Side Includes) 制作多语言版静态网页

因此，我们往往期望，网页排版时，只做一个语言版的网页。然后把其它语言的纯翻译文字，每个语言一个文件。 ... 经过一番研究，我找到了办法。那就是使用 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 .

原文链接:https://www.cnblogs.com/jacklondon/p/create_multi_languages_static_page_using_apache_server_side_includes.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：前端CSS五中元素定位类型

下一篇：零基础小白转行如何入门学习web前端

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签