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

更新日期: 2020-06-01阅读: 2.1k标签: 网页

多语言版静态网页,通常都是先做一个语言的网页,比如中文版,或英文版,然后找人翻译成另一种语言,最后合作一起,上传到网页服务器。

这种方法,在后续的改动时,往往容易改了一个语言的网页、遗漏了另一个语言的网页更改;或者翻译多语言时,一不小心误删除了某个网页的某个部分,或者多键入了无关的字符,造成多个语言版本的不一致。

 

因此,我们往往期望,网页排版时,只做一个语言版的网页。然后把其它语言的纯翻译文字,每个语言一个文件。

比如, 一个网页有如下文件:

文件用途
customers.htmhtml 文件,排版控制
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) 为静态网页统一页面布局", 编写  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">

这样,最终的效果就出来了

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

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

转载请注明出处: http://www.cnblogs.com/jacklondon ; 

 

链接: https://www.fly63.com/article/detial/9241

网页中文本朗读功能开发实现分享

同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

网页开发中利用CSS以图换字的多中实现方法总汇

CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法

如何嵌套一个网页html到另一个html中

在网页开发中,经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。

网站开发需要哪些知识_网页开发你需要知道的6件事

开发网站之前,你需要知道哪些事情呢?每个开发者的答案可能都不太相同,这里整理为6个方面:界面和用户体验、安全性、性能(Performance)、搜索引擎优化、技术(Technology)、解决bug

理解大型分布式网站你必须知道这些概念

理解大型分布式网站你必须知道这些概念:1. I/O优化、2. Web前端调优、3.服务降级(自动优雅降级)、4.幂等性设计、5.失效转移、6.性能优化、7. 代码优化、8. 负载均衡、9.缓存等

网页后缀html、htm、shtml、shtm有什么区别?

每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。

html网页自动跳转方法_整理网页自动跳转的5种方法

网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去。网页自动跳转的主要作用是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式将用户引导到其它正常的网页中去,从而留住用户。

html页面锚点链接对SEO的作用,以及实现描点的三种方式

锚链链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网页的重要程度有所提升,从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面

使用 BeautifulSoup 和 Selenium 进行网页爬取

HTML几乎是平铺直叙的。CSS是一个伟大的进步,它清晰地区分了页面的结构和外观。在本教程中,您将了解在浏览器中看到的内容是如何实际呈现的,以及如何在必要时进行抓取。

实现主机访问虚拟机网页的方法总结

VMware Workstation提供了两种虚拟机上网方式,一种bridge,一种NAT,bridge可以获得公网地址,而NAT只能是内网地址了。例1:在虚拟机内搭建http服务器,使用公网地址访问,例2: ssh端口映射

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!