一种基于Web国际化切换页面样式的方法及装置与流程

本发明涉及网页开发技术领域，特别是涉及一种基于web国际化切换页面样式的方法及装置。

背景技术：

web“国际化”是针对不同语言的人在访问网站时可以自定义切换对应语言的一种技术，也就是说，对于国际化的web软件，需要能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面内容或数据。例如，对于程序中固定使用的文本元素，如菜单栏、导航条等使用的文本元素，或者错误提示信息，状态信息等，需要形成与来访者的地区和国家相对应的语言内容显示。

目前，web国际化通常的使用方式是在对应目录下建立不同的语言文件，在切换语言时，读取相应文件中的翻译，对其进行覆盖并重新读取页面，这些网站往往有着许多来自不同国家、地区的访问来源。但是不同国家的语言存在着个异性，如同一意义的词语长短不一，这就使得切换各个“语言版本”后的页面往往会出现一些显示问题，在样式上难以同时兼顾处理。

技术实现要素：

为克服上述现有技术存在的不足，本发明之目的在于提供一种基于web国际化切换页面样式的方法及装置，通过在国际化语言文件内增加样式变量，实现了在切换不同语言版本的同时，对相应的样式进行修改的目的。

为达上述目的，本发明提出一种基于web国际化切换页面样式的方法，包括如下步骤：

步骤s1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；

步骤s2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中。

优选地，于步骤s1中，确定需进行样式调整的页面元素，对各页面元素在在不同国际化语言文件中定义进行样式修改的样式变量。

优选地，于步骤s1中，对某页面元素进行样式修改的变量在不同国际化语言文件分别定义同一变量名称。

优选地，对某页面元素进行样式修改的样式变量的定义以“变量名：变量值”的形式展现。

优选地，所述变量值则为各个语言版本下，绑定页面元素需要显示的具体样式。

优选地，于步骤s2中，找到需进行样式变动的资源文件，在该资源文件中，找到目标元素对所定义的对应的样式变量进行绑定。

优选地，于步骤s2中，对目标元素的绑定使用“:style＝’$t(‘语言文件中定义的变量名’)’”。

优选地，于步骤s1中，还通过定义模块来对各样式变量进行区分。

优选地，于步骤s2后，还包括如下步骤：

骤s3，将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。

为达到上述目的，本发明还提供一种基于web国际化切换页面样式的装置，包括：

变量定义单元，用于在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量；

变量绑定单元，用于根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中；

样式调试单元，用于将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。

与现有技术相比，本发明具有如下有益效果：

本发明无需新建额外的样式文件，只需在国际化文件内增加样式变量，借助了国际化语言切换时的特性，不仅可以很方便的随时更改翻译，也可以在更改翻译的同时，对相应的样式进行修改，简单、高效而又便捷。

附图说明

图1为本发明一种基于web国际化切换页面样式的方法的步骤流程图；

图2为本发明实施例中国际化语言文件的目录结构示意图；

图3为本发明实施例中不同国际化语言文件中样式变量的定义示意图；

图4为本发明实施例中对资源文件中目标元素绑定的流程示意图；

图5为本发明一种基于web国际化切换页面样式的装置的系统架构图；

图6为本发明实施例中基于web国际化切换页面样式的流程示意图。

具体实施方式

以下通过特定的具体实例并结合附图说明本发明的实施方式，本领域技术人员可由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。本发明亦可通过其它不同的具体实例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，在不背离本发明的精神下进行各种修饰与变更。

图1为本发明一种基于web国际化切换页面样式的方法的步骤流程图。如图1所示，本发明一种基于web国际化切换页面样式的方法，包括如下步骤：

步骤s1，在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量。对于某一页面元素来说，如果该页面元素需要在不同语言环境下显示不同样式，则该页面元素就需要在语言文件中定义一个变量。

在本发明具体实施例中，首先找到国际化语言文件所在位置，例如，在本实施例中，国际化语言文件的文件位置为/local，如图2所示，文件夹下有三个语言文件，对应的是简体中文(zh-cn.js)、英文(en.js)以及繁体中文(zh-tw.js)，然后确定需进行样式调整的页面元素，

对各页面元素在不同国际化语言文件中定义进行样式修改的样式变量，即对某一需样式调整的页面元素，在不同国际化语言文件中定义需要对其进行样式修改的变量名称，在本发明具体实施例中，对某页面元素进行样式修改的变量在不同国际化语言文件分别定义同一变量名称，定义以“变量名：变量值”的形式展现，变量值与资源文件中使用的具体样式的形式有关，变量值则为各个语言版本下，绑定页面元素需要显示的具体样式，其可以为整个完整样式(style)的字符串，也可以为单一css样式的具体值，具体如下：

情形1，当变量作为某元素的完整style时(如行内样式)，为需要改变的行内样式对应的字符串(如：“width:100px；height:100px；...”)。

情形2，当变量作为某元素的具体某一个样式值时(如长度、宽度、颜色等)，则只需要设置这个样式的具体数值(如：“300px”，“red”，...)。

在本发明中，所述页面元素包括对页面文字、图片、超链接网址、页面元素对应的操作功能以及子页面中的至少一种，假设对需要对某页面元素进行样式修改的变量定义“box”，则在三个语言文件中，分别定义同一变量名“box”，变量的值为各个语言版本下，绑定元素需要显示的具体样式，如图3所示，例如在简体中文(zh-cn.js)下，其变量值为“width:100px；height:50px；color:red；”，在英文(en.js)版本下，其变量值为“width:150px；height:40px；color:red；”，在繁体中文(zh-tw.js)版本下，其变量值为“width:100px；height:40px；color:blue；”，在本发明实施例中，变量的值为整个完整的行内样式。

步骤s2，根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中，即进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中。

具体地说，定义好相应样式变量后，找到需要进行样式变动的资源文件，所述资源文件包含页面元素和相应逻辑代码的文件，在该资源文件中，找到目标元素(所述目标元素是在切换语言版本的调试过程中，根据与设计稿的对比，找出不符合设计稿预期或者布局混乱、不合理的地方)，对定义的样式变量进行绑定。在本发明具体实施例中，在资源文件中使用变量需要符合当前项目国际化的使用标准，在本实施例中，在资源文件，国际化使用方式为:$t(‘语言文件中定义的变量名’)，变量的绑定也是如此，在本实施例中，对目标元素的绑定则可以使用“:style＝’$t(‘语言文件中定义的变量名’)’”。

具体地，在本实施例中，如图4所示，假如找到目标元素为资源文件“list”中的元素“div”，即元素“div”需要进行样式调整，则对资源文件“list”中的元素“div”进行样式变量的绑定，即，<div:style＝“$t(‘box’)”>{{$t(‘text’)}}</div>，此时，$t(‘box’)的值，便对应了当前语言文件中“box”样式变量的值，如简体中文(zh-cn.js)下，即style＝”width:100px；height:50px；color:red；”，当切换到英文(en.js)时，元素div的样式便产生了变化，此时，style＝”width:150px；height:40px；color:red”，从而达到了样式随着语言的改变而动态改变的目的。

优选地，当项目结构变得复杂时，可根据资源文件通过定义模块来对各个样式变量进行区分，以防止变量冲突，如：原本定义的变量名box，可以通过定义模块module:{box:“xxx”}进行模块划分，使用时则表现为style＝”$t(‘module.box’)”，使其更容易管理和维护。

优选地，于步骤s2后，还包括如下步骤：

步骤s3，将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。由于页面的最终形态是根据最初的页面设计稿决定的，当页面的布局与设计稿没有较大出入时，被认为是符合并达到预期的。当在不同语言版本下，页面的布局与显示不合理、与设计稿出入很大时，则通过本发明进行样式修改并同步到开发环境的页面中，与设计稿再次进行比对，若达到预期显示效果，则结束，否则继续利用本发明进行样式修改并同步到开发环境页面与设计稿比对，直到达到预期显示效果。

图5为本发明一种基于web国际化切换页面样式的装置的系统架构图。如图5所示，本发明一种基于web国际化切换页面样式的装置，包括：

变量定义单元501，用于在不同国际化语言文件中定义需对某页面元素进行样式修改的样式变量。

在本发明具体实施例中，变量定义单元501首先找到国际化语言文件所在位置，然后在不同国际化语言文件中定义需要对某页面元素进行样式修改的变量名称，在本发明具体实施例中，对某页面元素进行样式修改的变量在不同国际化语言文件分别定义同一变量名称，定义以“变量名：变量值”的形式展现，变量值与资源文件中使用的具体样式的形式有关，变量值则为各个语言版本下，绑定页面元素需要显示的具体样式，其可以为整个完整样式(style)的字符串，也可以为单一css样式的具体值，具体如下：

情形1，当变量作为某元素的完整style时(如行内样式)，为需要改变的行内样式对应的字符串(如：“width:100px；height:100px；...”)。

情形2，当变量作为某元素的具体某一个样式值时(如长度、宽度、颜色等)，则只需要设置这个样式的具体数值(如：“300px”，“red”，...)。

变量绑定单元502，用于根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中，即进行绑定，以在进行国际化切换时，能够将定义好的样式覆盖到对应的页面元素中。

具体地说，定义好相应样式变量后，找到需要进行样式变动的资源文件，在该资源文件中，找到目标元素，对定义的样式变量进行绑定。在本发明具体实施例中，在资源文件中使用变量需要符合当前项目国际化的使用标准，在本实施例中，在资源文件，国际化使用方式为:$t(‘语言文件中定义的变量名’)，变量的绑定也是如此，在本实施例中，对目标元素的绑定则可以使用“:style＝’$t(‘语言文件中定义的变量名’)’”。

样式调试单元503，用于将页面切换不同语言版本，进行样式调试，直到每个语言版本都能到达预期的显示效果。

实施例

在本实施例中，采用vue以及基于vue的桌面端组件库elementui中的国际化功能，其过程主要包括国际化变量及值的定义、资源文件中变量的绑定与使用以及页面效果的调试，如图6所示。

具体地，本实施例之基于web国际化切换页面样式的方法包括:

首先，找到项目中“国际化”语言文件所在位置，例如本实施例的文件位置为/local(如图2)，文件夹下有三个语言文件，对应的是简体中文、英文以及繁体中文。

其次，在三个语言文件中，分别定义样式变量，在三个语言文件中为同一变量名“box”，变量的值则为各个语言版本下，绑定元素需要显示的具体样式(如图3)，在本实施例中，变量的值为整个完整的行内样式。

再次，定义完相应的样式变量后，找到具体需要进行样式变动的资源文件，在该资源文件中，找到目标元素，对定义的变量进行绑定。如图4，对资源文件“list”中的元素“div”进行样式变量的绑定，此时，$t(‘box’)的值，便对应了当前语言文件中“box”变量的值，也就是说，在中文下，即style＝”width:100px；height:50px；color:red；”，当切换到英文时，借助“国际化”功能的特性，元素div的样式便产生了变化，此时，style＝”width:150px；height:40px；color:red”，从而达到了样式随着语言的改变而动态改变的目的。

当项目结构变得复杂时，本发明还可以通过定义模块来对各个变量进行区分，如：原本定义的变量名box，可以通过module:{box:“xxx”}进行模块划分，使用时则表现为style＝”$t(‘module.box’)”，使其更容易管理和维护。

最后，将页面切换至不同的语言版本，对各个版本下页面的显示情况进行调整和改进，从而使得页面达到完美适配各个语言版本的效果。

可见，本发明借助了国际化的特点，在切换语言时，国际化会自动辨别当前所处的语言，所有的语言文件都在一个文件夹下，维护简单而且不需要手动书写额外的业务逻辑，只需要在语言文件中根据资源文件定义不同的模块名，在模块下定义各个变量然后绑定即可，维护和改动十分便捷。

综上所述，本发明一种基于web国际化切换页面样式的方法及装置通过在不同国际化语言文件中定义对某页面元素进行样式修改的样式变量，然后根据在不同国际化语言文件中已定义好的样式变量，将其加入到需要进行样式处理的页面元素中，以在进行国际化切换时，将定义好的样式覆盖到对应的页面元素中，实现了在切换不同语言版本的同时，对相应的样式进行修改的目的。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何本领域技术人员均可在不违背本发明的精神及范畴下，对上述实施例进行修饰与改变。因此，本发明的权利保护范围，应如权利要求书所列。