使用 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五中元素定位类型
- CSS中的float和margin的混合使用 2020-06-11
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
- 使用CSS完成商城首页的优化 2020-05-05
- Emmet插件的使用 2020-04-27
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