CN105989098B

CN105989098B - 图标包的生成方法及服务器、图标的处理方法及系统

Info

Publication number: CN105989098B
Application number: CN201510077213.9A
Authority: CN
Inventors: 王兆平; 王觯程
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2015-02-12
Filing date: 2015-02-12
Publication date: 2020-04-07
Anticipated expiration: 2035-02-12
Also published as: CN105989098A

Abstract

本申请公开了一种图标包的生成方法及服务器、图标的处理方法及系统，所述图标的处理方法包括：获取图标包；将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的样式文件；将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中；在所述页面中添加所述图标的模板文件。通过本申请，有效减少网站的带宽浪费，避免了当样式文件出现漏洞时，影响整个网站，规避了网站的风险。

Description

图标包的生成方法及服务器、图标的处理方法及系统

技术领域

本申请涉及网站安全的技术领域，尤其涉及图标包的生成方法及服务器、图标的处理方法及系统。

背景技术

随着网络技术的不断发展，网站的规模逐渐增大，通常一个网站包含多个网页，在网站的每个网页中都会显示网站的图标，并且网站的图标通常需要定期进行维护，例如，更新图标等。其中，对于一些在网站的多个网页都使用的图标被称为通用图标。

现有的图标的处理方法，通常有以下两种方式来对图标进行处理：

现有技术一：各个网页直接引用图标的图片文件、模板文件和样式文件后，每个网页再采用单独的方式对图标的文件进行处理后，再将图标显示。由于每个网页对图标的处理方式不同，以及对图标的图片压缩比率和对显示屏分辨率的支持不同，使得通用图标的视觉品质在不同网页中的显示存在差异的问题。

现有技术二：以通用模板的方式提供一份通用图标样式文件，具体来说，就是将通用图标样式文件存储于服务器上，获取通用图标样式文件在服务器上对应的访问地址，将该访问地址以通用模板的方式进行存储。当需要在网页上显示通用图标时，可以通过调用该通用模板，从而调用通用网站图标样式文件，以便达到在网页上显示通用网站图标的目的。

现有技术二中，在更新图标时，直接更新通用图标样式文件，即将存储于服务器上的通用图标样式文件由原来的版本替换为最新版本，当需要在网页上显示通用图标时，由于各网页通过调用通用图标样式文件来显示网站图标，所以各网页上直接显示更新后的网站图标，对该通用网站图标样式文件的更新所带来的影响是全站级的，一旦该样式文件出现漏洞(bug)，整个网站都会受到影响，风险较大。

发明内容

本申请实施例的目的是，提供一种图标包的生成方法及服务器、图标的处理方法及系统，以解决现有技术中通用图标的视觉品质在不同网页中的显示存在差异，以及图标的样式文件出现漏洞时影响整个网站的问题。

为实现上述目的，本申请提供了如下方案：

一种图标包的生成方法，所述方法包括：

获取图片文件、模板文件和样式文件；

将至少两个图片文件合并为一个图片文件；

将至少两个模板文件合并为一个模板文件；

将至少两个样式文件合并为一个样式文件；

根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。

一种图标的处理方法，所述方法包括：

获取图标包；

将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；

对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的样式文件；

将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中；

在所述页面中添加所述图标的模板文件。

一种服务器，所述服务器包括：

获取单元，用于获取图片文件、模板文件和样式文件；

合并单元，用于将至少两个图片文件合并为一个图片文件；

所述合并单元，还用于将至少两个模板文件合并为一个模板文件；

所述合并单元，还用于将至少两个样式文件合并为一个样式文件；

生成单元，用于根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。

一种图标的处理系统，所述系统包括：

获取单元，用于获取图标包；

安装单元，用于将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；

解析单元，用于对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的样式文件；

集成单元，用于将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中；

添加单元，用于在所述页面中添加所述图标的模板文件。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

本申请实施例提供的图标的处理方法及系统，将所述图标包安装至资源库中，以目录的形式生成图标文件；使得各网页按需求对图标文件进行下载，有效减少网站的带宽浪费。将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中，在页面中添加所述图标的模板文件,从而使得图标的视觉品质在不同网页中的显示是相同的，且避免了当样式文件出现漏洞时，影响整个网站，规避了网站的风险。解决了通用图标的视觉品质在不同网页中的显示存在差异，以及图标的样式文件出现漏洞时影响整个网站的问题。

在优选实施例中，当仓库中的所述图标包更新时，各网页页面按需更新所述图标包，再对图标文件进行更新，有效减少网站的带宽浪费。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的图标包交互的场景示意图；

图2为本申请实施例提供的图标包的生成方法流程图；

图3为本申请实施例提供的合并后的图片文件示意图；

图4为本申请实施例提供的合并后的图片文件示意图；

图5为本申请实施例提供的图标包的结构示意图；

图6为本申请实施例提供的图标的处理方法流程图；

图7为本申请实施例提供的服务器示意图；

图8为本申请实施例提供的图标的处理系统示意图。

具体实施方式

为使得本申请的发明目的、特征、优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述，显然，所描述的实施例仅仅是本申请一部分实施例，而非全部实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供的图标包的生成方法及服务器、图标的处理方法及系统，适用于所有网站的系统，在本申请实施例中以淘宝网网站系统为例进行说明，但并不以此作为限制。

以淘宝网网站系统为例，应用系统可以包括前端应用系统和后端服务系统，前端应用系统，例如，商品中心系统，对应于商品中心服务器；后端服务系统包括商品中心、交易中心等等，对应于商品中心服务器、交易中心服务器等等。图1为本申请实施例提供的图标包11交互的场景示意图，参见图1，生成图标包的服务器可以是包管理器10，淘宝网网站从包管理器的仓库中获取淘宝网图标包，淘宝网网站12包括有商品中心网页、交易中心网页和支付网页13等，对淘宝网图标包中的图片文件和样式文件解析后，集成到商品中心网页、交易中心网页和支付网页的层叠样式表CSS中，图标文件可以包括支付宝图标、充值图标等，再将图标在相应的网页中显示。所以，本申请实施例提供的图标的处理方法，可以为网站系统提供支持，从而使得图标的视觉品质在不同网页中的显示是相同的，且有效减少整个网站的带宽浪费，避免了当样式文件出现漏洞时，影响整个网站，有效地提高了网站的安全性。

为了更好地理解本申请的优点，下面通过附图和详细的描述来介绍本申请的实施例。

图2为本申请实施例提供的图标包的生成方法流程图。本实施例适用于所有需要图标包的场景，该实施例的执行主体可以是包管理服务器简称包管理器，参见图2所示的图标包的生成流程图，图标包的生成具体包括以下步骤：

步骤S101，获取图片文件、模板文件和样式文件。

图片文件可以是从网站中下载获取的，或者，由设计人员预先设计好的图片文件并保存在电脑中，从电脑中获取的等等，模板文件和样式文件具体可以是由开发人员编辑的。

例如，获取到设计人员设计的支付宝图标和充值图标的图片文件，以及开发人员编辑的支付宝图标和充值图标的模板文件和样式文件。

步骤S102，将至少两个图片文件合并为一个图片文件。

例如，将支付宝图标的图片文件和充值图标的图片文件合并为一个图片文件。如图3所示为合并后的图片文件示意图，图片文件的左边是支付宝图标的图片文件，右边是充值图标的图片文件。如图4所示为合并后的图片文件示意图，图4中的合并后的图片文件包括有多个图标的图片文件。

步骤S103，将至少两个模板文件合并为一个模板文件。

例如：将支付宝图标的模板文件和充值图标的模板文件，以及其他图标的模板文件合并为一个模板文件。下面的代码是合并模板文件的示例：

步骤S104，将至少两个样式文件合并为一个样式文件。

例如：将支付宝图标的样式文件和充值图标的样式文件合并为一个样式文件。下面的代码是合并模板文件的示例：

/*支付宝icon样式*/

.tb-brand-alipay.tb-icon{

width:16px；

height:16px；

background-position:-17px 0px；}

.tb-brand-alipay.tb-desc{

height:16px；

line-height:16px；}

/*充值icon样式*/

.tb-brand-bdsh.tb-icon{

width:16px；

height:16px；

background-position:-85px 0px；}

.tb-brand-bdsh.tb-desc{

height:16px；

line-height:16px；}

/*货到付款icon样式*/

.tb-brand-cod.tb-icon{

width:16px；

height:16px；

background-position:0px-17px；}

.tb-brand-cod.tb-desc{

height:16px；

line-height:16px；}

步骤S105，根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。

合并后的图片文件以一个图片文件存在，合并后的模板文件和合并后的样式文件均以一个文档的文件存在，将合并后的图片文件、合并后的模板文件和合并后的样式文件可以是压缩生成所述图标包，或直接生成图标包。参见图5所示的图标包的结构示意图，图标包可以是以一个文件夹的形式存在，图标包文件夹里面包括合并后的图片文件、合并后的模板文件和合并后的样式文件。例如，根据合并后的这三个文件，即合并后的图片文件、合并后的模板文件和合并后的样式文件生成淘宝网图标包。

将图片文件合并、模板文件合并和样式文件合并，这些图标文件合并是为了减少后续包管理器接收的网站发送的请求信息量，以及减少包管理器发送的响应信息量，从而降低网络负载，提高效率。例如：淘宝网网站中在维护商品中心网页时需要充值图标，在维护支付网页时需要支付宝图标，本发明实施例中直接在维护淘宝网网站时，接收网站发送的获取淘宝网图标包的请求信息，包管理器再将淘宝网图标包发送给网站的响应信息，可见无论淘宝网网站需要多少个图标，包管理器只需要接收一次请求，并对应响应一次便可以满足网站维护时所需的充值图标、支付宝图标以及其他图标。

而在现有技术中的没有将这些图标文件合并时的情况下，淘宝网网站中在维护商品中心网页需要充值图标时，接收网站发送的获取充值图标包的请求信息，包管理器再将充值图标包发送给网站的响应信息；同理，在维护支付网页需要支付宝图标时，接收网站发送的获取支付宝图标包的请求信息，包管理器再将支付宝图标包发送给网站的响应信息，可见，在网站维护淘宝网网站的过程中，包管理器将充值图标发送给网站时，包管理器与网站有第一次交互，将支付宝图标发送给网站时，包管理器与网站有第二次交互，所以淘宝网网站需要N个图标，N属于正整数，包管理器就需要接收N次请求，并对应响应N次才可以满足网站维护时所需的图标。

可选地，将所述图标包存储于仓库中，并获取所述图标包在仓库中存储的地址。

仓库可以是代码仓库gitlab，gitlab里有多个存储空间，每个存储空间均对应一个存储的地址。将图标包存储在gitlab中后，该图标包在gitlab中会有一个对应的存储的地址，获取该图标包的存储的地址，以便后续可以通过这个地址下载获取到图标包。可以理解的是，将淘宝网图标包存储于仓库中，并获取淘宝网图标包在仓库中的地址，通过点击淘宝网图标包的地址，可以下载获取该图标包。

例如，将淘宝网图标包存储于仓库中，获取淘宝网图标包在仓库中的地址git@gitlab.alibaba-inc.com:tb/icons.git，通过点击淘宝网图标包的地址git@gitlab.alibaba-inc.com:tb/icons.git，可以下载获取淘宝网图标包。

获取所述图标包存储的地址之后，包管理器对图标包在包管理服务器中进行注册，具体包括：

注册所述图标包，将所述图标包的包名与所述图标包存储的地址关联。

其中，包管理器为一个工具，用于对图标包进行统一管理，其具有对所述图标包进行注册的功能，上述注册即存储图标包的包名与该图标包在gitlab中存储的地址的对应关系，并将图标包的包名与所述图标包的存储地址关联，图标包的包名与该图标包在gitlab中的存储地址即为图标包的注册信息。具体地，在包管理服务器上设置一张图标包注册表，该注册表中存储了图标包的包名与图标包在gitlab中的存储地址的对应关系，该注册表可以如表一所示。

表一

包名	地址
		淘宝网图标包	地址一
电子网图标包	地址二
		……	……

包管理器对图标包进行注册的具体过程为：执行命令tbower register iconsgit@gitlab.alibaba-inc.com:tb/icons.git，命令行工具会收到信息Package iconsregistered successfully！表示该图标包注册成功，在包管理服务器中会生成该图标包的包名与图标包存储于gitlab中的存储地址的对应关系，例如：

icons git@gitlab.alibaba-inc.com:tb/icons.git

其中，上述的对应关系中icons是淘宝网图标包的包名，git@gitlab.alibaba-inc.com:tb/icons.git是淘宝网图标包存储的地址一。

通过对图标包进行注册以后，后续网页维护设备就可以根据图标包的包名从包管理服务器上查找该图标包在gitlab中的存储地址，从上述地址对应的gitlab存储空间中下载获取图标包，并存储到本地进行存储。

由于生成的淘宝网图标包在gitlab中的存储形式是以包名和地址对应关联的形式存储。可以理解的是在包管理服务器中的注册表中，通过输入包名淘宝网或淘宝网图标包，包管理服务器在注册表中搜索后便输出淘宝网图标包的地址，再点击淘宝网图标包的地址，便可以在gitlab中获取到淘宝网图标包。

优选地，当图标包中的图片文件、模板文件或样式文件更新时，生成另一个版本号的图标包。

例如，淘宝网图标包中的支付宝图标的图片文件、模板文件或样式文件，充值图标的图片文件、模板文件或样式文件，任何一个文件发生更新时，生成另一个版本号的淘宝网图标包2.0。其中，更新前的版本号的图标包是淘宝网图标包1.0，更新后是淘宝网图标包2.0。

图标包在gitlab中以包名和版本号对应的形式存在，本申请中的图标包是可以存储有更新前的版本号的图标包，也可以存储有更新后的版本号的图标包，即采用图标包存储的图标版本可以多版本共存，当网站中各网页共用的网站图标即通用网站图标发生更新时，各网页维护设备可以按需更新图标包，即需要更新通用网站图标的网页，可以下载最新版的图标代码对应的图标包，而无需更新通用网站图标的网页，则可以不必下载最新版的图标代码对应的图标包，继续使用原先下载的更新前的版本号图标包，从而有效减少整站的带宽浪费。

可以理解的是存储在仓库中的有更新前的和更新后的淘宝网图标包，通过点击更新前淘宝网图标包在仓库中的地址，可以下载获取更新后的淘宝网图标包。

其中，当仓库中的图标包的合并后的图片文件中有图片文件更新时，将更新后的图片文件替换更新前的图片文件的具体过程如下：

第一，在合并后的图片文件中划分坐标轴，通过坐标点定位合并后的图片文件中的待更新的图片文件；

例如，将支付宝图标的图片文件和充值图标的图片文件合并到一个图片文件后，在合并后的图片文件中划分坐标轴，以合并后的图片文件的左上角为坐标原点[0,0]，每个图片文件的左上角为每个图片文件的坐标点，通过坐标点定位合并后的图片文件中的每个图片文件。假如支付宝和充值图标的图片文件的宽度与高度均是16像素(Pixel，简称px)，两个图标的图片文件之间的水平间距是5px，那么可以从合并后的图片文件的左上角坐标[0,0]开始查找，参见图3，支付宝图标的图片文件的坐标是[0,0]，充值图标的图片文件的坐标是[21,0]。

第二，将更新后的图片文件上传至合并后的图片文件中，替换更新前的图片文件。

例如，当仓库中的淘宝网图标包中的支付宝图标需要更新时，将更新后的支付宝图标的图片文件上传至仓库中的淘宝网图标包中合并后的图片文件中，将更新后的图标的图片文件置在更新前的支付宝图标的图片文件的坐标点上，生成更新后的淘宝网合并后的图片文件，替换更新前的淘宝网合并后的图片文件，这时淘宝网图标包也产生了更新，生成另一个版本号的图标包。

优选地，当图标包更新后，将图标包的更新信息通知给服务器。

服务器可以是使用过图标包的所有服务器，例如所有网站，所有邮箱。更新信息可以是图标包更新的具体内容和图标包存储的地址。以淘宝网网站为例，当淘宝网图标包更新时，将图标包的更新信息通知给淘宝网网站，通知的方式可以是发送邮件给服务器，即将淘宝网图标包中的支付宝图标更新和淘宝网图标包的地址的信息通过发送邮件给淘宝网网站。

本申请实施例提供的图标包的生成方法，将至少两个图片文件合并为一个图片文件；将至少两个模板文件合并为一个模板文件；将至少两个样式文件合并为一个样式文件；根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。减少了接收的请求信息量，以及减少了发送的响应信息量，从而降低网络负载，提高效率。

图6为本申请实施例提供的图标的处理方法流程图。本实施例适用于所有网站对图标的处理的场景，该实施例的执行主体可以是网站的客户端也可以是网站的服务器，例如：淘宝网网站的客户端或淘宝网网站的服务器。

步骤S201，获取图标包。

图标包可以是合并后的图片文件、合并后的模板文件和合并后的样式文件组成。

可以是从代码仓库gitlab中获取图标包，代码仓库gitlab是用于仓库管理系统的开源项目，在代码管理工具git的基础上搭建起来的网络web服务，将网站系统中的包以代码的形式进行管理。

包是用于网络前端开发的包，可以用于分类管理文件，可以将任何类型的资源文件视为一个包。图标包属于网络包中的一种。

在包管理器中的注册表中，以图标包包名与在gitlab中存储的地址对应的形式存在，通过图标包在gitlab中存储的地址，从gitlab中获取图标包，该地址可以是网站通过包管理器中的注册表中查询得到的。网站可以根据图标包的包名从注册表中查找该图标包在gitlab中的存储的地址，网站可以从上述地址对应的gitlab存储空间中下载获取图标包。获取的图标包可以是一个压缩的文件夹，该压缩的文件夹中包括有合并后的图片文件、合并后的模板文件和合并后的样式文件。其中图片文件、模板文件和样式文件中的所有图标均采用统一的压缩比率。

网站从代码仓库gitlab中获取图标包。例如：淘宝网网站从gitlab中获取图标包，该图标包包含有支付宝图标、充值图标和正品图标等。因为支付宝图标后续需要在支付网页和交易中心网页中出现，淘宝网网站从gitlab中获取的图标包，主要是为淘宝网网站中的商品中心网页、支付网页和交易中心网页提供支持。

步骤S202，将所述图标包安装至资源库中，以目录的形式生成图标文件。

图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件，即图标文件指的是合并后的图片文件、合并后的模板文件和合并后的样式文件。

其中，资源库可以为网站中的图标文件的存储空间，其具体表现形式可以为一个文件夹。各网页可以按需求对图标文件进行下载。

例如：将图标包安装至资源库后，以目录的形式生成的图标文件在资源库中的结构如下：

-- icons //图标包的文件夹

-- TEMPLATE.md //图标包中合并后的模板文件

-- index.less //图标包中合并后的样式文件

-- index.scss

-- index.styl

-- taobao.jpg //图标包中合并后的图片文件

index.less、index.scss和index.styl为图标包中合并后的样式文件名称，TEMPLATE.md为图标包中合并后的模板文件名称，taobao.jpg为图标包中合并后的图片文件名称。

可选地，当仓库中的所述图标包更新时，接收更新信息；将更新后的图标包安装至所述资源库中。

当git lab中的图标包中的至少一个图标发生更新时，网站会接收到包管理器发送的更新信息，网站再向网站中的各网页维护设备发送图标更新通知，以使各网页维护设备在获知网站图标发生更新后，根据更新信息按需将下载获取的更新后的图标包安装到网站的资源库中。更新信息可以是图标包更新的具体内容和图标包存储的地址，例如淘宝网图标包中的支付宝图标更新，其他图标未更新。

优选地，将更新后的图标包安装至所述资源库中后，页面按需更新图标包。

各网页维护设备根据更新信息可以按需更新图标包，例如：当淘宝图标包中的支付宝图标发生更新时，对于商品中心网页、交易中心网页和支付网页而言，支付宝图标只出现在交易中心网页和支付网页中，所以交易中心网页和支付网页需要更新图标包，下载最新版的图标包，而商品中心网页不需要更新图标包，继续使用原先下载的更新前的图标包，从而有效减少整个网站的带宽浪费。

步骤S203，对所述图标文件进行解析，并生成合并后的图片文件、图标的模板文件和图标的样式文件。

图标文件包括图片文件、模板文件和样式文件，模板文件包括支付宝模板文件、充值模板文件等，样式文件包括支付宝样式文件、充值样式文件等。

例如：对支付宝图标的模板文件TEMPLATE.md进行解析后，生成的模板文件如下：

<！--支付宝icon-->

支付宝

对支付宝图标的样式文件进行解析后，生成的样式文件如下：

.tb-brand-alipay.tb-icon{

width:16px；

height:16px；

background-position:-17px 0px；}

.tb-brand-alipay.tb-desc{

height:16px；

line-height:16px；}

模板文件对应的是图标的结构HTML，样式文件对应的是图标的外观CSS，CSS用来表现HTML文件的计算机语言，CSS只有作用于HTML上才会生效，所以模板文件和样式文件在图标的显示中是缺一不可的。

图标的样式文件和模板文件，映射出图标的尺寸大小16px*16px，以及图标在合并后的图片文件中的坐标点，以便网站在维护网页时，根据图标在合并后的图片文件中的坐标点，获取该图标的图片文件。

步骤S204，将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中。

网站通过“@import‘tbower_components/icons/index.*’”将图片文件和样式文件集成到页面的CSS中。

优选地，根据所述图标的样式文件映射出的图标的尺寸大小，以及图标在合并后的图片文件中的坐标点，获取图标的图片文件；将图标的图片文件集成到页面的CSS中的预设的位置处。

网站根据图标的样式文件记录的图片文件的尺寸大小和合并后的图片文件中的坐标点，获取图标的图片文件，将图片文件集成在网页页面的CSS中预设的指定的位置处。网页页面的CSS中指定的位置可以是预设将图片文件放置在页面的坐标点。图标显示在网页页面中的位置，取决于样式文件添加在网页页面中的位置。

例如，首先开发人员在设计网页时，以网页的左上角为坐标原点，预计将支付宝图标放置在网页的坐标点[20,20]处，且尺寸为16px*16px。则将支付宝图标的图片文件和所述样式文件，集成到页面的层叠样式表CSS中指定的对应于网页的坐标点[20,20]且尺寸为16px*16px的位置处。

将所述图片文件和所述样式文件集成到各个页面的层叠样式表CSS中，各个网页中的这两个文件相同，且对这两个文件的处理方式相同，例如，图标的长度、宽度和压缩比率在集成到页面的CSS前后是固定不变的，所以对于后续图标的视觉品质在不同网页中的显示是相同的。

例如：将支付宝图标的样式文件集成到页面的层叠样式表CSS中：

//页面样式文件

/*导入图标包的样式文件*/

@import"tbower_component/icons/index"；

/*页面的样式文件*/

当图标更新时，将更新后的图标文件中的图片文件和样式文件集成到页面的层叠样式表CSS中，在集成期间，会将出现漏洞的样式文件进行修复和整理，得到一个安全的样式文件和图片文件，并集成到页面的层叠样式表CSS中。而不是网页直接调用更新后的图标文件来显示图标，避免了当样式文件出现漏洞时，影响整个网站，有效地规避网站的风险。

步骤S205，在所述页面中添加所述图标的模板文件。

例如：在支付网页页面中，添加支付宝图标的模板文件，用以后续将支付宝图标嵌入在支付网页页面中进行显示。

下面的代码是在网页中添加图标的模板文件的示例：例如，将支付宝图标的模板文件添加到支付网页页面中：

//页面模板文件

<！DOCTYPE html>

<html>

<head>

</head>

<body>

<！--产品内容的代码-->

<！--支付宝图标的模板文件-->

支付宝

</body>

</html>

在页面中添加图标的模板文件之后，然后提交测试图标是否在网站上正常显示。其中，上述正常显示包括图标的显示位置和显示大小均与预期相符；而当图标未显示，或者图标的显示位置与预期不相符，或者图标的显示大小与预期不相符，均认为网站图标非正常显示。

此外，当图标非正常显示时，可以由网页维护人员进行代码调试，当排查结果确认图标代码存在漏洞，则向服务器发送图标代码错误信息，以使网络侧的图标维护人员对图标包中存储的图标代码进行更新，并在更新完成后向网页维护设备发送图标代码更新通知，所述图标代码更新通知用于网页维护设备获知图标代码进行了更新。直到图标在网站上正常显示。

可选地，在页面中添加图标的模板文件之后，解析所述页面中的所述CSS和所述图标的模板文件；在所述页面中显示所述图标。

例如，在淘宝网网页页面中添加支付宝图标的模板文件之后，解析淘宝网网页页面中的CSS和支付宝图标的模板文件；在淘宝网网页页面中显示支付宝图标。

因此，本申请实施例提供的图标的处理方法，将所述图标包安装至资源库中，以目录的形式生成图标文件；使得各网页按需求对图标文件进行下载，当图标包更新时，各网页按需求对图标文件进行更新，有效减少网站的带宽浪费。将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中，在页面中添加所述图标的模板文件,从而使得图标的视觉品质在不同网页中的显示是相同的，且避免了当样式文件出现漏洞时，影响整个网站，规避了网站的风险。

与本申请实施例提供的图标包的生成方法相对应，本申请实施例还提供了一种服务器，适用于所有需要图标包的场景，该服务器可以是包管理服务器简称包管理器，参见图7所示的服务器示意图，该服务器具体可以包括：

获取单元701，用于获取图片文件、模板文件和样式文件；

合并单元702，用于将至少两个图片文件合并为一个图片文件；

所述合并单元702，还用于将至少两个模板文件合并为一个模板文件；

所述合并单元702，还用于将至少两个样式文件合并为一个样式文件；

生成单元703，用于根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。

所述服务器还可以包括：

存储单元704，用于将所述图标包存储于仓库中，并获取所述图标包在所述仓库中存储的地址。

注册单元705，用于注册所述图标包，将所述图标包的包名与所述图标包存储的所述地址关联。

生成单元703，还用于当所述图标包中的所述图片文件、所述模板文件或所述样式文件更新时，生成另一个版本号的图标包。

定位单元706，用于在所述合并后的图片文件中划分坐标轴，通过坐标点定位合并后的图片文件中的待更新的图片文件；

替换单元707，用于将更新后的图片文件上传至合并后的图片文件中，替换更新前的图片文件。

更新单元708，用于当所述图标包更新后，将所述图标包的更新信息通知给服务器。

本申请实施例提供的服务器中的单元可以实现本申请实施例提供的图标包的生成方法。本申请实施例提供的服务器中的各单元可以执行上述方法实施例中的各步骤。

本申请实施例提供的服务器，将至少两个图片文件合并为一个图片文件；将至少两个模板文件合并为一个模板文件；将至少两个样式文件合并为一个样式文件；根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。减少了接收的请求信息量，以及减少了发送的响应信息量，从而降低网络负载，提高效率。

与本申请实施例提供的图标的处理方法相对应，本申请实施例还提供了一种图标的处理系统，适用于所有网站对图标的处理的场景，该系统可以是客户端也可以是服务端，例如：淘宝网网站的客户端或淘宝网网站的服务器。参见图8所示的图标的处理系统示意图，该系统具体可以包括：

获取单元801，用于获取图标包；

安装单元802，用于将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；

解析单元803，用于对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的样式文件；

集成单元804，用于将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中；

添加单元805，用于在所述页面中添加所述图标的模板文件。

解析单元803，还用于解析所述页面中的所述CSS和所述图标的模板文件；

所述系统还可以包括：

显示单元806，用于在所述页面中显示所述图标。

集成单元804，具体用于根据所述图标的样式文件映射出的所述图标的尺寸大小，以及所述图标在所述合并后的图片文件中的坐标点，获取所述图标的图片文件；将所述图标的图片文件集成到所述页面的所述CSS中的预设的位置处。

安装单元802，还用于当仓库中的所述图标包更新时，接收更新信息，将更新后的图标包安装至所述资源库中。

更新单元807，用于所述页面按需更新所述图标包。

本申请实施例提供的图标的处理系统中的单元可以实现本申请实施例提供的图标的处理方法。本申请实施例提供的图标的处理系统中的各单元可以执行上述方法实施例中的各步骤。

因此，本申请实施例提供的图标的处理系统，将所述图标包安装至资源库中，以目录的形式生成图标文件；使得各网页按需求对图标文件进行下载，当图标包更新时，各网页按需求对图标文件进行更新，有效减少网站的带宽浪费。将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中，在页面中添加所述图标的模板文件,从而使得图标的视觉品质在不同网页中的显示是相同的，且避免了当样式文件出现漏洞时，影响整个网站，规避了网站的风险。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其与方法实施例相似，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本领域普通技术人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执轨道，取决于技术方案的特定应用和设计约束条件。本领域普通技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执轨道的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本申请的目的、技术方案和有益效果进轨道了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施方式而已，并不用于限定本申请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种图标的处理方法，其特征在于，应用于网站的服务器，所述方法包括：

获取用于维护多个页面的至少两个图标所对应的图标包；

将所述合并后的图片文件和所述图标的样式文件集成到所述页面的层叠样式表CSS中；

在所述页面中添加所述图标的模板文件。

2.根据权利要求1所述的方法，其特征在于，在所述页面中添加所述图标的模板文件之后，所述方法还包括：

解析所述页面中的所述CSS和所述图标的模板文件；

在所述页面中显示所述图标。

3.根据权利要求1所述的方法，其特征在于，将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中具体还包括：

根据所述图标的样式文件映射出的所述图标的尺寸大小，以及所述图标在所述合并后的图片文件中的坐标点，获取所述图标的图片文件；将所述图标的图片文件集成到所述页面的所述CSS中的预设的位置处。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

当仓库中的所述图标包更新时，接收更新信息，将更新后的图标包安装至所述资源库中。

5.根据权利要求1所述的方法，其特征在于，在将更新后的图标包安装至所述资源库中之后，所述方法还包括：所述页面按需更新所述图标包。

6.一种图标的处理系统，其特征在于，所述系统包括：

获取单元，用于获取用于维护多个页面的至少两个图标所对应的图标包；

集成单元，用于将所述合并后的图片文件和所述图标的样式文件集成到所述页面的层叠样式表CSS中；

添加单元，用于在所述页面中添加所述图标的模板文件。