一种基于网页单项目中多语言切换的方法及系统技术方案

技术编号:24352590 阅读:21 留言:0更新日期:2020-06-03 01:54
本发明专利技术涉及一种基于网页单项目中多语言切换的方法及系统,包括步骤:将当前页面所涉及的语言文案集中到一个目录下,并根据不同语言划分二级目录,各种语言所对应的二级目录内结构完全一致,目录内文件的内容与现有网站页面的内容一一对应,文件内容为各语言文字内容以及其唯一识别标识;当用户进行语言切换操作时,通过浏览器缓存存储用户所选语言标识;在网页初始化时,通过将默认设置的语言标识或浏览器缓存的语言标识与语言文字内容的唯一识别标识进行比对,以在语言包中获取对应文字并嵌入网页中相应位置。本发明专利技术能够减少开发量以及网站页面代码体量。

A method and system of multi language switch based on single project of web page

【技术实现步骤摘要】
一种基于网页单项目中多语言切换的方法及系统
本专利技术涉及互联网网站设计
,特别是一种基于网页单项目中多语言切换的方法及系统。
技术介绍
随着互联网的高速发展以及全球化的趋势,许多网站平台面向的客户范围越来越广,多语言化成为越来越多平台的需求。但是在开发过程中为了实现一个网页多种语言显示,会针对不同语言进行分页面代码开发,分页面开发虽实现了效果,但从后期维护方面考虑到改造的工作量较大,且文字直接嵌入页面代码中,对于翻译人员来说处理相对繁琐且困难。
技术实现思路
有鉴于此,本专利技术的目的是提出一种基于网页单项目中多语言切换的方法及系统,能够减少开发量以及网站页面代码体量。本专利技术采用以下方案实现:一种基于网页单项目中多语言切换的方法,包括以下步骤:将当前页面所涉及的语言文案集中到一个目录下,并根据不同语言划分二级目录,各种语言所对应的二级目录内结构完全一致,目录内文件的内容与现有网站页面的内容一一对应,文件内容为各语言文字内容以及其唯一识别标识;当用户进行语言切换操作时,通过浏览器缓存存储用户所选语言标识;在网页初始化时,通过将默认设置的语言标识或浏览器缓存的语言标识与语言文字内容的唯一识别标识进行比对,以在语言包中获取对应文字并嵌入网页中相应位置。进一步地,所述各种语言所对应的二级目录内结构完全一致具体为:目录内每段文字对应的键名以对应的页面目录+页面对应的模块功能命名,保证唯一性,不同语言包所对应的二级目录中对应的语言文件内容的JavaScript对象键名完全相同。进一步地,在页面初始化时,首先查找浏览器缓存中是否存储有语言标识,若有,则根据该缓存的语言标识比对语言文字内容的唯一识别标识,否则,以默认设置的语言标识来比对语言文字内容的唯一识别标识。本专利技术还提供了一种于网页单项目中多语言切换的系统,包括语言包配置模块、语言设置识别模块以及网页语言显示模块;所述语言包配置模块将当前网站页面中所有涉及的语言文字统一存放在一个项目目录中,并根据不同语言划分二级目录,每种语言所对应的目录内结构完全相同,目录内文件与现有网站页面一一对应,文件内容为各语言文字内容以及其唯一识别标识;所述语言设置识别模块设置网站网页默认语言以及网站网页所有可选切换语言,在用户进行语言切换操作时通过浏览器缓存存储用户所选语言标识,在网页初始化时通过默认设置的语言标识或浏览器缓存的语言标识进行网站语言包选择;所述网页语言显示模块通过将唯一识别标识与默认设置的语言标识或浏览器缓存的语言标识进行比对在语言包中获取对应文字并嵌入网页中相应位置。本专利技术还提供了一种计算机可读存储介质,其特征在于,其上存储有计算机程序,该计算机程序在被处理器运行时实现如上文所述的方法步骤。与现有技术相比,本专利技术有以下有益效果:采用本专利技术的方法或系统能够实现在网站切换语言时只需要切换相应的语言包而不需要切换页面,从而达到多种语言一套代码的效果。附图说明图1为本专利技术实施例的页面切换方法示意图。具体实施方式下面结合附图及实施例对本专利技术做进一步说明。应该指出,以下详细说明都是示例性的,旨在对本申请提供进一步的说明。除非另有指明,本文使用的所有技术和科学术语具有与本申请所属
的普通技术人员通常理解的相同含义。需要注意的是,这里所使用的术语仅是为了描述具体实施方式,而非意图限制根据本申请的示例性实施方式。如在这里所使用的,除非上下文另外明确指出,否则单数形式也意图包括复数形式,此外,还应当理解的是,当在本说明书中使用术语“包含”和/或“包括”时,其指明存在特征、步骤、操作、器件、组件和/或它们的组合。本实施例提供了一种基于网页单项目中多语言切换的方法,包括以下步骤:将当前页面所涉及的语言文案集中到一个目录下,并根据不同语言划分二级目录,各种语言所对应的二级目录内结构完全一致,目录内文件的内容与现有网站页面的内容一一对应,文件内容为各语言文字内容以及其唯一识别标识;当用户进行语言切换操作时,通过浏览器缓存存储用户所选语言标识;在网页初始化时,通过将默认设置的语言标识或浏览器缓存的语言标识与语言文字内容的唯一识别标识进行比对,以在语言包中获取对应文字并嵌入网页中相应位置。在本实施例中,所述各种语言所对应的二级目录内结构完全一致具体为:目录内每段文字对应的键名以对应的页面目录+页面对应的模块功能命名,保证唯一性,不同语言包所对应的二级目录中对应的语言文件内容的JavaScript对象键名完全相同。在本实施例中,在页面初始化时,首先查找浏览器缓存中是否存储有语言标识,若有,则根据该缓存的语言标识比对语言文字内容的唯一识别标识,否则,以默认设置的语言标识来比对语言文字内容的唯一识别标识。本实施例还提供了一种于网页单项目中多语言切换的系统,包括语言包配置模块、语言设置识别模块以及网页语言显示模块;所述语言包配置模块将当前网站页面中所有涉及的语言文字统一存放在一个项目目录中,并根据不同语言划分二级目录,每种语言所对应的目录内结构完全相同,目录内文件与现有网站页面一一对应,文件内容为各语言文字内容以及其唯一识别标识;较佳的,在本实施例中,语言文件分别对应相应网站页面,文字内容以JavaScript对象输出,并最终在该语言目录入口形成一个语言包合集,每段文字对应的键名以对应的页面目录+页面对应的模块功能命名,保证唯一性。不同语言包中对应的语言文件内容的JavaScript对象键名必须完全相同,例如中文语言包cn下test目录中index.js内一个语言文字的键名为test.title,那么英文语言包相同目录文件中对应的语言文字键名也必须为test.title。这样可以避免语言显示模块因键名不同,在切换过程中发生错误;其中,在完成一种语言包的整合后可以将该语言包作为一份网站的基础的语言模板,以后需添语言时,翻译人员只需将该语言包复制一份,替换各语言文件中的文字即可,为翻译人员提供便捷操作;所述语言设置识别模块设置网站网页默认语言以及网站网页所有可选切换语言,在用户进行语言切换操作时通过浏览器缓存存储用户所选语言标识,在网页初始化时通过默认设置的语言标识或浏览器缓存的语言标识进行网站语言包选择;如图1所示,在网页初始化时,语言识别模块会查找浏览器缓存(localstorage,sessionstorage或cookies)中是否存有模块设置的浏览器标识,如果有,会根据存储的标识获取代码中配置好的语言包合集;如果没有,则会从代码默认配置中选择默认语言包。用户在切换网页语言选项时,模块会根据用户选择的语言将相应的语言标识存储浏览器缓存中或替换原有浏览器中存储的语言标识(可使用localstorage,sessionstorage,cookies等缓存),在存储或替换成功后,将语言包对象存储至全局对象或状态管理中并触发页面重新渲染,重新渲染的过程中,网页语言显示模块会在新存本文档来自技高网
...

【技术保护点】
1.一种基于网页单项目中多语言切换的方法,其特征在于,包括以下步骤:/n将当前页面所涉及的语言文案集中到一个目录下,并根据不同语言划分二级目录,各种语言所对应的二级目录内结构完全一致,目录内文件的内容与现有网站页面的内容一一对应,文件内容为各语言文字内容以及其唯一识别标识;/n当用户进行语言切换操作时,通过浏览器缓存存储用户所选语言标识;/n在网页初始化时,通过将默认设置的语言标识或浏览器缓存的语言标识与语言文字内容的唯一识别标识进行比对,以在语言包中获取对应文字并嵌入网页中相应位置。/n

【技术特征摘要】
1.一种基于网页单项目中多语言切换的方法,其特征在于,包括以下步骤:
将当前页面所涉及的语言文案集中到一个目录下,并根据不同语言划分二级目录,各种语言所对应的二级目录内结构完全一致,目录内文件的内容与现有网站页面的内容一一对应,文件内容为各语言文字内容以及其唯一识别标识;
当用户进行语言切换操作时,通过浏览器缓存存储用户所选语言标识;
在网页初始化时,通过将默认设置的语言标识或浏览器缓存的语言标识与语言文字内容的唯一识别标识进行比对,以在语言包中获取对应文字并嵌入网页中相应位置。


2.根据权利要求1所述的一种基于网页单项目中多语言切换的方法,其特征在于,所述各种语言所对应的二级目录内结构完全一致具体为:目录内每段文字对应的键名以对应的页面目录+页面对应的模块功能命名,保证唯一性,不同语言包所对应的二级目录中对应的语言文件内容的JavaScript对象键名完全相同。


3.根据权利要求1所述的一种基于网页单项目中多语言切换的方法,其特征在于,在页面初始化时,首先查找浏览器缓存中是否存储有语言标识,若有,则根据...

【专利技术属性】
技术研发人员:陈魁江琳肖金华
申请(专利权)人:厦门靠谱云股份有限公司
类型:发明
国别省市:福建;35

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1