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

图标包的生成方法及服务器、图标的处理方法及系统的制作方法
【专利摘要】本申请公开了一种图标包的生成方法及服务器、图标的处理方法及系统，所述图标的处理方法包括：获取图标包；将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的样式文件；将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中；在所述页面中添加所述图标的模板文件。通过本申请，有效减少网站的带宽浪费，避免了当样式文件出现漏洞时，影响整个网站，规避了网站的风险。
【专利说明】
图标包的生成方法及服务器、图标的处理方法及系统
技术领域
[0001] 本申请设及网站安全的技术领域，尤其设及图标包的生成方法及服务器、图标的 处理方法及系统。
【背景技术】
[0002] 随着网络技术的不断发展，网站的规模逐渐增大，通常一个网站包含多个网页，在 网站的每个网页中都会显示网站的图标，并且网站的图标通常需要定期进行维护，例如，更 新图标等。其中，对于一些在网站的多个网页都使用的图标被称为通用图标。
[0003] 现有的图标的处理方法，通常有W下两种方式来对图标进行处理：
[0004] 现有技术一：各个网页直接引用图标的图片文件、模板文件和样式文件后，每个网 页再采用单独的方式对图标的文件进行处理后，再将图标显示。由于每个网页对图标的处 理方式不同，W及对图标的图片压缩比率和对显示屏分辨率的支持不同，使得通用图标的 视觉品质在不同网页中的显示存在差异的问题。 阳〇化]现有技术二：W通用模板的方式提供一份通用图标样式文件，具体来说，就是将通 用图标样式文件存储于服务器上，获取通用图标样式文件在服务器上对应的访问地址，将 该访问地址W通用模板的方式进行存储。当需要在网页上显示通用图标时，可W通过调用 该通用模板，从而调用通用网站图标样式文件，W便达到在网页上显示通用网站图标的目 的。
[0006] 现有技术二中，在更新图标时，直接更新通用图标样式文件，即将存储于服务器上 的通用图标样式文件由原来的版本替换为最新版本，当需要在网页上显示通用图标时，由 于各网页通过调用通用图标样式文件来显示网站图标，所W各网页上直接显示更新后的网 站图标，对该通用网站图标样式文件的更新所带来的影响是全站级的，一旦该样式文件出 现漏桐化ug)，整个网站都会受到影响，风险较大。

【发明内容】

[0007] 本申请实施例的目的是，提供一种图标包的生成方法及服务器、图标的处理方法 及系统，W解决现有技术中通用图标的视觉品质在不同网页中的显示存在差异，W及图标 的样式文件出现漏桐时影响整个网站的问题。
[0008] 为实现上述目的，本申请提供了如下方案：
[0009] 一种图标包的生成方法，所述方法包括：
[0010] 获取图片文件、模板文件和样式文件；
[0011] 将至少两个图片文件合并为一个图片文件；
[0012] 将至少两个模板文件合并为一个模板文件；
[0013] 将至少两个样式文件合并为一个样式文件；
[0014] 根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标 包。
[0015] 一种图标的处理方法，所述方法包括：
[0016] 获取图标包；
[0017] 将所述图标包安装至资源库中，W目录的形式生成图标文件，所述图标文件包括 合并后的图片文件、合并后的模板文件和合并后的样式文件；
[0018] 对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图 标的样式文件；
[0019] 将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS 中；
[0020] 在所述页面中添加所述图标的模板文件。
[0021] 一种服务器，所述服务器包括：
[0022] 获取单元，用于获取图片文件、模板文件和样式文件；
[0023] 合并单元，用于将至少两个图片文件合并为一个图片文件；
[0024] 所述合并单元，还用于将至少两个模板文件合并为一个模板文件；
[00巧]所述合并单元，还用于将至少两个样式文件合并为一个样式文件；
[0026] 生成单元，用于根据合并后的图片文件、合并后的模板文件和合并后的样式文件 生成所述图标包。
[0027] 一种图标的处理系统，所述系统包括：
[002引获取单元，用于获取图标包；
[0029] 安装单元，用于将所述图标包安装至资源库中，W目录的形式生成图标文件，所述 图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；
[0030] 解析单元，用于对所述图标文件进行解析，并生成所述合并后的图片文件、图标的 模板文件和图标的样式文件；
[0031] 集成单元，用于将所述合并后的图片文件和所述图标的样式文件集成到页面的层 叠样式表CSS中；
[0032] 添加单元，用于在所述页面中添加所述图标的模板文件。
[0033] 根据本申请提供的具体实施例，本申请公开了 W下技术效果：
[0034] 本申请实施例提供的图标的处理方法及系统，将所述图标包安装至资源库中，W 目录的形式生成图标文件；使得各网页按需求对图标文件进行下载，有效减少网站的带宽 浪费。将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中， 在页面中添加所述图标的模板文件，从而使得图标的视觉品质在不同网页中的显示是相 同的，且避免了当样式文件出现漏桐时，影响整个网站，规避了网站的风险。解决了通用图 标的视觉品质在不同网页中的显示存在差异，W及图标的样式文件出现漏桐时影响整个网 站的问题。
[0035] 在优选实施例中，当仓库中的所述图标包更新时，各网页页面按需更新所述图标 包，再对图标文件进行更新，有效减少网站的带宽浪费。
[0036] 当然，实施本申请的任一产品并不一定需要同时达到W上所述的所有优点。
【附图说明】
[0037] 为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所 需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施 例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可W根据运些附图获 得其他的附图。
[0038] 图1为本申请实施例提供的图标包交互的场景示意图；
[0039] 图2为本申请实施例提供的图标包的生成方法流程图；
[0040] 图3为本申请实施例提供的合并后的图片文件示意图；
[0041] 图4为本申请实施例提供的合并后的图片文件示意图；
[0042] 图5为本申请实施例提供的图标包的结构示意图；
[0043] 图6为本申请实施例提供的图标的处理方法流程图；
[0044] 图7为本申请实施例提供的服务器示意图；
[0045] 图8为本申请实施例提供的图标的处理系统示意图。
【具体实施方式】
[0046] 为使得本申请的发明目的、特征、优点能够更加的明显和易懂，下面将结合本申请 实施例中的附图，对本申请实施例中的技术方案进行描述，显然，所描述的实施例仅仅是本 申请一部分实施例，而非全部实施例。基于本申请中的实施例，本领域普通技术人员在没有 做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0047] 本申请实施例提供的图标包的生成方法及服务器、图标的处理方法及系统，适用 于所有网站的系统，在本申请实施例中W淘宝网网站系统为例进行说明，但并不W此作为 限制。
[0048] W淘宝网网站系统为例，应用系统可W包括前端应用系统和后端服务系统，前端 应用系统，例如，商品中屯、系统，对应于商品中屯、服务器；后端服务系统包括商品中屯、、交易 中屯、等等，对应于商品中屯、服务器、交易中屯、服务器等等。图1为本申请实施例提供的图标 包11交互的场景示意图，参见图1，生成图标包的服务器可W是包管理器10,淘宝网网站 从包管理器的仓库中获取淘宝网图标包，淘宝网网站12包括有商品中屯、网页、交易中屯、网 页和支付网页13等，对淘宝网图标包中的图片文件和样式文件解析后，集成到商品中屯、网 页、交易中屯、网页和支付网页的层叠样式表CSS中，图标文件可W包括支付宝图标、充值图 标等，再将图标在相应的网页中显示。所W，本申请实施例提供的图标的处理方法，可W为 网站系统提供支持，从而使得图标的视觉品质在不同网页中的显示是相同的，且有效减少 整个网站的带宽浪费，避免了当样式文件出现漏桐时，影响整个网站，有效地提高了网站的 安全性。 W例为了更好地理解本申请的优点，下面通过附图和详细的描述来介绍本申请的实施 例。
[0050] 图2为本申请实施例提供的图标包的生成方法流程图。本实施例适用于所有需要 图标包的场景，该实施例的执行主体可W是包管理服务器简称包管理器，参见图2所示的 图标包的生成流程图，图标包的生成具体包括W下步骤：
[0051] 步骤S101，获取图片文件、模板文件和样式文件。
[0052] 图片文件可W是从网站中下载获取的，或者，由设计人员预先设计好的图片文件 并保存在电脑中，从电脑中获取的等等，模板文件和样式文件具体可W是由开发人员编辑 的。
[0053] 例如，获取到设计人员设计的支付宝图标和充值图标的图片文件，W及开发人员 编辑的支付宝图标和充值图标的模板文件和样式文件。
[0054] 步骤S102,将至少两个图片文件合并为一个图片文件。
[0055] 例如，将支付宝图标的图片文件和充值图标的图片文件合并为一个图片文件。如 图3所示为合并后的图片文件示意图，图片文件的左边是支付宝图标的图片文件，右边是 充值图标的图片文件。如图4所示为合并后的图片文件示意图，图4中的合并后的图片文 件包括有多个图标的图片文件。
[0056] 步骤S103,将至少两个模板文件合并为一个模板文件。
[0057] 例如：将支付宝图标的模板文件和充值图标的模板文件，W及其他图标的模板文 件合并为一个模板文件。下面的代码是合并模板文件的示例：
[0058]
[0059] 步骤S104,将至少两个样式文件合并为一个样式文件。
[0060] 例如：将支付宝图标的样式文件和充值图标的样式文件合并为一个样式文件。下 面的代码是合并模板文件的示例：
[0061] /*支付宝icon样式*/
[0062] .忧-brand-alipay. tb-icon {
[0063] wi 化h:16阳；
[0064] hei 曲t:16 阳；
[0065] b曰ck邑round-position:-17px Opx ；}
[0066] .忧-brand-alipay. tb-desc {
[0067] hei 曲t :16 阳；
[0068] line-hei曲t: 16px ;} W例 /*充值icon样式*/
[0070] .忧-brand-bdsh.忧-icon {
[0071] wi 化h:16阳；
[0072] hei 曲t :16 阳；
[0073] background-position: _85px 0阳；}
[0074] .忧-brand-bdsh.忧-desc {
[00^75] hei 曲t :16 阳；
[0076] line-hei曲t: 16px ;}
[0077] /*货到付款icon样式*/
[0078] .忧-brand-cod.忧-icon { 阳0巧]wi化h:16阳；
[0080] hei 曲t :16 阳；
[0081] background-position:0ρχ-17ρχ ;}
[0082] .忧-brand-cod.忧-desc {
[0083] hei 曲t :16 阳；
[0084] line-hei曲t: 16px ;}
[0085] 步骤S105,根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成 所述图标包。
[0086] 合并后的图片文件W-个图片文件存在，合并后的模板文件和合并后的样式文件 均W-个文档的文件存在，将合并后的图片文件、合并后的模板文件和合并后的样式文件 可W是压缩生成所述图标包，或直接生成图标包。参见图5所示的图标包的结构示意图，图 标包可W是W-个文件夹的形式存在，图标包文件夹里面包括合并后的图片文件、合并后 的模板文件和合并后的样式文件。例如，根据合并后的运Ξ个文件，即合并后的图片文件、 合并后的模板文件和合并后的样式文件生成淘宝网图标包。
[0087] 将图片文件合并、模板文件合并和样式文件合并，运些图标文件合并是为了减少 后续包管理器接收的网站发送的请求信息量，W及减少包管理器发送的响应信息量，从而 降低网络负载，提高效率。例如：淘宝网网站中在维护商品中屯、网页时需要充值图标，在维 护支付网页时需要支付宝图标，本发明实施例中直接在维护淘宝网网站时，接收网站发送 的获取淘宝网图标包的请求信息，包管理器再将淘宝网图标包发送给网站的响应信息，可 见无论淘宝网网站需要多少个图标，包管理器只需要接收一次请求，并对应响应一次便可 W满足网站维护时所需的充值图标、支付宝图标W及其他图标。
[0088] 而在现有技术中的没有将运些图标文件合并时的情况下，淘宝网网站中在维护商 品中屯、网页需要充值图标时，接收网站发送的获取充值图标包的请求信息，包管理器再将 充值图标包发送给网站的响应信息；同理，在维护支付网页需要支付宝图标时，接收网站发 送的获取支付宝图标包的请求信息，包管理器再将支付宝图标包发送给网站的响应信息， 可见，在网站维护淘宝网网站的过程中，包管理器将充值图标发送给网站时，包管理器与网 站有第一次交互，将支付宝图标发送给网站时，包管理器与网站有第二次交互，所W淘宝网 网站需要N个图标，N属于正整数，包管理器就需要接收N次请求，并对应响应N次才可W 满足网站维护时所需的图标。
[0089] 可选地，将所述图标包存储于仓库中，并获取所述图标包在仓库中存储的地址。
[0090] 仓库可W是代码仓库gitl油，gitl油里有多个存储空间，每个存储空间均对应一 个存储的地址。将图标包存储在gitl油中后，该图标包在gitl油中会有一个对应的存储 的地址，获取该图标包的存储的地址，W便后续可W通过运个地址下载获取到图标包。可W 理解的是，将淘宝网图标包存储于仓库中，并获取淘宝网图标包在仓库中的地址，通过点击 淘宝网图标包的地址，可W下载获取该图标包。
[0091] 例如，将淘宝网图标包存储于仓库中，获取淘宝网图标包在仓库中的地址git@ gitl油.alib油a-inc. com:&/lcons. git,通过点击淘宝网图标包的地址git@gitl油. alib油a-inc. com:&^cons.邑;[1:，可^下载获取淘宝网图标包。
[0092] 获取所述图标包存储的地址之后，包管理器对图标包在包管理服务器中进行注 册，具体包括：
[0093] 注册所述图标包，将所述图标包的包名与所述图标包存储的地址关联。
[0094] 其中，包管理器为一个工具，用于对图标包进行统一管理，其具有对所述图标包 进行注册的功能，上述注册即存储图标包的包名与该图标包在gitl油中存储的地址的对 应关系，并将图标包的包名与所述图标包的存储地址关联，图标包的包名与该图标包在 gitl油中的存储地址即为图标包的注册信息。具体地，在包管理服务器上设置一张图标包 注册表，该注册表中存储了图标包的包名与图标包在gitl油中的存储地址的对应关系，该 注册表可W如表一所示。 阳0巧]表一
[0096]
[0097] 包管理器对图标包进行注册的具体过程为：执行命令忧ower register icons git@gitl油.alib油a-inc. com: &^cons. git,命令行工具会收到信息化ckage icons registered success化lly !表示该图标包注册成功，在包管理服务器中会生成该图标包 的包名与图标包存储于gitlab中的存储地址的对应关系，例如：
[0098] icons gitigitlab. alibaba-inc. com:tb/icons. git
[0099] 其中，上述的对应关系中icons是淘宝网图标包的包名，git@gitl油. alib油a-inc. com:&^cons. git是淘宝网图标包存储的地址一。
[0100] 通过对图标包进行注册W后，后续网页维护设备就可W根据图标包的包名从包管 理服务器上查找该图标包在gitl油中的存储地址，从上述地址对应的gitl油存储空间中 下载获取图标包，并存储到本地进行存储。 阳101] 由于生成的淘宝网图标包在gitl油中的存储形式是W包名和地址对应关联的形 式存储。可W理解的是在包管理服务器中的注册表中，通过输入包名淘宝网或淘宝网图标 包，包管理服务器在注册表中捜索后便输出淘宝网图标包的地址，再点击淘宝网图标包的 地址，便可W在gitl油中获取到淘宝网图标包。 阳102] 优选地，当图标包中的图片文件、模板文件或样式文件更新时，生成另一个版本号 的图标包。 阳103]例如，淘宝网图标包中的支付宝图标的图片文件、模板文件或样式文件，充值图标 的图片文件、模板文件或样式文件，任何一个文件发生更新时，生成另一个版本号的淘宝网 图标包2. 0。其中，更新前的版本号的图标包是淘宝网图标包1. 0,更新后是淘宝网图标包 2. 0。 阳104] 图标包在gitl油中W包名和版本号对应的形式存在，本申请中的图标包是可W 存储有更新前的版本号的图标包，也可W存储有更新后的版本号的图标包，即采用图标包 存储的图标版本可W多版本共存，当网站中各网页共用的网站图标即通用网站图标发生更 新时，各网页维护设备可W按需更新图标包，即需要更新通用网站图标的网页，可W下载最 新版的图标代码对应的图标包，而无需更新通用网站图标的网页，则可W不必下载最新版 的图标代码对应的图标包，继续使用原先下载的更新前的版本号图标包，从而有效减少整 站的带宽浪费。
[01化]可W理解的是存储在仓库中的有更新前的和更新后的淘宝网图标包，通过点击更 新前淘宝网图标包在仓库中的地址，可W下载获取更新后的淘宝网图标包。 阳106] 其中，当仓库中的图标包的合并后的图片文件中有图片文件更新时，将更新后的 图片文件替换更新前的图片文件的具体过程如下：
[0107] 第一，在合并后的图片文件中划分坐标轴，通过坐标点定位合并后的图片文件中 的待更新的图片文件；
[0108] 例如，将支付宝图标的图片文件和充值图标的图片文件合并到一个图片文件后， 在合并后的图片文件中划分坐标轴，化合并后的图片文件的左上角为坐标原点[0,0]，每个 图片文件的左上角为每个图片文件的坐标点，通过坐标点定位合并后的图片文件中的每个 图片文件。假如支付宝和充值图标的图片文件的宽度与高度均是16像素（Pixel,简称PX)， 两个图标的图片文件之间的水平间距是5px，那么可W从合并后的图片文件的左上角坐标 [0,0]开始查找，参见图3,支付宝图标的图片文件的坐标是[0,0]，充值图标的图片文件的 坐标是巧1，0]。
[0109] 第二，将更新后的图片文件上传至合并后的图片文件中，替换更新前的图片文件。
[0110] 例如，当仓库中的淘宝网图标包中的支付宝图标需要更新时，将更新后的支付宝 图标的图片文件上传至仓库中的淘宝网图标包中合并后的图片文件中，将更新后的图标的 图片文件置在更新前的支付宝图标的图片文件的坐标点上，生成更新后的淘宝网合并后的 图片文件，替换更新前的淘宝网合并后的图片文件，运时淘宝网图标包也产生了更新，生成 另一个版本号的图标包。 阳111] 优选地，当图标包更新后，将图标包的更新信息通知给服务器。
[0112] 服务器可W是使用过图标包的所有服务器，例如所有网站，所有邮箱。更新信息可 W是图标包更新的具体内容和图标包存储的地址。W淘宝网网站为例，当淘宝网图标包更 新时，将图标包的更新信息通知给淘宝网网站，通知的方式可W是发送邮件给服务器，即将 淘宝网图标包中的支付宝图标更新和淘宝网图标包的地址的信息通过发送邮件给淘宝网 网站。
[0113] 本申请实施例提供的图标包的生成方法，将至少两个图片文件合并为一个图片 文件；将至少两个模板文件合并为一个模板文件；将至少两个样式文件合并为一个样式文 件；根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。减少 了接收的请求信息量，W及减少了发送的响应信息量，从而降低网络负载，提高效率。
[0114] 图6为本申请实施例提供的图标的处理方法流程图。本实施例适用于所有网站对 图标的处理的场景，该实施例的执行主体可W是网站的客户端也可W是网站的服务器，例 如：淘宝网网站的客户端或淘宝网网站的服务器。
[0115] 步骤S201，获取图标包。
[0116] 图标包可W是合并后的图片文件、合并后的模板文件和合并后的样式文件组成。 阳117] 可W是从代码仓库gitl油中获取图标包，代码仓库gitl油是用于仓库管理系统 的开源项目，在代码管理工具git的基础上搭建起来的网络web服务，将网站系统中的包W 代码的形式进行管理。
[0118] 包是用于网络前端开发的包，可W用于分类管理文件，可W将任何类型的资源文 件视为一个包。图标包属于网络包中的一种。 阳119] 图标包在gitl油中W包名和版本号对应的形式存在，本申请中的图标包是可W 存储有更新前的版本号的图标包，也可W存储有更新后的版本号的图标包，即采用图标包 存储的图标版本可W多版本共存，当网站中各网页共用的网站图标即通用网站图标发生更 新时，各网页维护设备可W按需更新图标包，即需要更新通用网站图标的网页，可W下载最 新版的图标代码对应的图标包，而无需更新通用网站图标的网页，则可W不必下载最新版 的图标代码对应的图标包，继续使用原先下载的更新前的版本号图标包，从而有效减少整 站的带宽浪费。 阳120] 在包管理器中的注册表中，W图标包包名与在gitl油中存储的地址对应的形式 存在，通过图标包在gitl油中存储的地址，从gitl油中获取图标包，该地址可W是网站通 过包管理器中的注册表中查询得到的。网站可W根据图标包的包名从注册表中查找该图标 包在gitl油中的存储的地址，网站可W从上述地址对应的gitl油存储空间中下载获取图 标包。获取的图标包可W是一个压缩的文件夹，该压缩的文件夹中包括有合并后的图片文 件、合并后的模板文件和合并后的样式文件。其中图片文件、模板文件和样式文件中的所有 图标均采用统一的压缩比率。 阳121] 网站从代码仓库gitl油中获取图标包。例如：淘宝网网站从gitl油中获取图标 包，该图标包包含有支付宝图标、充值图标和正品图标等。因为支付宝图标后续需要在支付 网页和交易中屯、网页中出现，淘宝网网站从gitlab中获取的图标包，主要是为淘宝网网站 中的商品中屯、网页、支付网页和交易中屯、网页提供支持。
[0122] 步骤S202,将所述图标包安装至资源库中，W目录的形式生成图标文件。
[0123] 图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件，即图 标文件指的是合并后的图片文件、合并后的模板文件和合并后的样式文件。
[0124] 其中，资源库可W为网站中的图标文件的存储空间，其具体表现形式可W为一个 文件夹。各网页可W按需求对图标文件进行下载。
[0125] 例如：将图标包安装至资源库后，W目录的形式生成的图标文件在资源库中的结 构如下： 阳126] - icons //图标包的文件夹 阳127] - TEMPLATE, md //图标包中合并后的模板文件
[0128] - index, less //图标包中合并后的样式文件
[0129] - index, scss
[0130] -- index, styl 阳13U -taobao. //图标包中合并后的图片文件 阳132] index, less、index. SCSS和index. st}d为图标包中合并后的样式文件名称， TEMPLATE, md为图标包中合并后的模板文件名称，taobao. jpg为图标包中合并后的图片文 件名称。
[0133] 可选地，当仓库中的所述图标包更新时，接收更新信息；将更新后的图标包安装至 所述资源库中。
[0134] 当git 1油中的图标包中的至少一个图标发生更新时，网站会接收到包管理器发 送的更新信息，网站再向网站中的各网页维护设备发送图标更新通知，W使各网页维护设 备在获知网站图标发生更新后，根据更新信息按需将下载获取的更新后的图标包安装到网 站的资源库中。更新信息可W是图标包更新的具体内容和图标包存储的地址，例如淘宝网 图标包中的支付宝图标更新，其他图标未更新。
[0135] 优选地，将更新后的图标包安装至所述资源库中后，页面按需更新图标包。 阳136] 各网页维护设备根据更新信息可W按需更新图标包，例如：当淘宝图标包中的支 付宝图标发生更新时，对于商品中屯、网页、交易中屯、网页和支付网页而言，支付宝图标只出 现在交易中屯、网页和支付网页中，所W交易中屯、网页和支付网页需要更新图标包，下载最 新版的图标包，而商品中屯、网页不需要更新图标包，继续使用原先下载的更新前的图标包， 从而有效减少整个网站的带宽浪费。 阳137] 步骤S203,对所述图标文件进行解析，并生成合并后的图片文件、图标的模板文件 和图标的样式文件。
[0138] 图标文件包括图片文件、模板文件和样式文件，模板文件包括支付宝模板文件、充 值模板文件等，样式文件包括支付宝样式文件、充值样式文件等。
[0139] 例如：对支付宝图标的模板文件TEMPLATE, md进行解析后，生成的模板文件如下：
[0140] < !-支付宝 icon->
[0141] <sp曰η cl曰ss = "tb-br曰nd tb-br曰nd-曰lip曰y"〉 阳 14引 <i class = "tb-icon"X/i〉
[0143] <em class ="忧-desc"〉支付宝 </em〉
[0144] 〈/span〉
[0145] 对支付宝图标的样式文件进行解析后，生成的样式文件如下：
[0146] .化-brand-alipay. tb-icon {
[0147] wicith: 16px ;
[0148] hei組t: 16px ;
[0149] background-position：-17px Opx ；}
[0150] .化-brand-alipay. tb-desc {
[0151] hei組t: 16px ;
[0152] line-hei組t: 16px ;}
[0153] 模板文件对应的是图标的结构HTML样式文件对应的是图标的外观CSS，CSS用来 表现HTML文件的计算机语言，CSS只有作用于HTML上才会生效，所W模板文件和样式文件 在图标的显示中是缺一不可的。 阳154] 图标的样式文件和模板文件，映射出图标的尺寸大小16px*l化X，W及图标在合并 后的图片文件中的坐标点，W便网站在维护网页时，根据图标在合并后的图片文件中的坐 标点，获取该图标的图片文件。 阳155] 步骤S204,将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样 式表CSS中。 阳?56] 网站通过"Oimport '忧owe;r_components/lcons/lndex. "将图片文件和样式文 件集成到页面的CSS中。
[0157] 优选地，根据所述图标的样式文件映射出的图标的尺寸大小，W及图标在合并后 的图片文件中的坐标点，获取图标的图片文件；将图标的图片文件集成到页面的CSS中的 预设的位置处。
[0158] 网站根据图标的样式文件记录的图片文件的尺寸大小和合并后的图片文件中的 坐标点，获取图标的图片文件，将图片文件集成在网页页面的CSS中预设的指定的位置处。 网页页面的CSS中指定的位置可W是预设将图片文件放置在页面的坐标点。图标显示在网 页页面中的位置，取决于样式文件添加在网页页面中的位置。 阳159] 例如，首先开发人员在设计网页时，W网页的左上角为坐标原点，预计将支付宝图 标放置在网页的坐标点巧0, 20]处，且尺寸为16px*l化X。则将支付宝图标的图片文件和所 述样式文件，集成到页面的层叠样式表CSS中指定的对应于网页的坐标点[20, 20]且尺寸 为16px*l化X的位置处。
[0160] 将所述图片文件和所述样式文件集成到各个页面的层叠样式表CSS中，各个网页 中的运两个文件相同，且对运两个文件的处理方式相同，例如，图标的长度、宽度和压缩比 率在集成到页面的CSS前后是固定不变的，所W对于后续图标的视觉品质在不同网页中的 显示是相同的。 阳161] 例如：将支付宝图标的样式文件集成到页面的层叠样式表CSS中：
[0162] //页面样式文件
[0163] /*导入图标包的样式文件*/
[0164] @import"tbower_component/icons/index"; 阳1化]/*页面的样式文件*/ 阳166] 当图标更新时，将更新后的图标文件中的图片文件和样式文件集成到页面的层叠 样式表CSS中，在集成期间，会将出现漏桐的样式文件进行修复和整理，得到一个安全的样 式文件和图片文件，并集成到页面的层叠样式表css中。而不是网页直接调用更新后的图 标文件来显示图标，避免了当样式文件出现漏桐时，影响整个网站，有效地规避网站的风 险。 阳167] 步骤S205,在所述页面中添加所述图标的模板文件。
[0168] 例如：在支付网页页面中，添加支付宝图标的模板文件，用W后续将支付宝图标嵌 入在支付网页页面中进行显示。
[0169] 下面的代码是在网页中添加图标的模板文件的示例：例如，将支付宝图标的模板 文件添加到支付网页页面中：
[0170] //页面模板文件
[0171] < ! D0CTYPE html> 阳 17引 <html> 阳 173] 〈head〉
[0174] <meta charset = "gbk"〉 阳175] 〈title〉淘宝网-淘！我喜欢〈/title〉 阳 176] 〈link rel = "stylesheet"虹ef ="产品样式文件地址"〉
[0177] </head> 阳 178] 〈body〉 阳179] < !--产品内容的代码一〉 阳180] < !--支付宝图标的模板文件一〉
[0181] <sp曰η cl曰SS = "tb-br曰nd tb-br曰nd-曰lip曰y"〉 阳 18引 <i class = "tb-icon"X/i〉
[0183] <em class ="忧-desc"〉支付宝 </em〉 阳184] 〈/span〉
[0 化 5] 〈/body〉
[0186] </html>
[0187] 在页面中添加图标的模板文件之后，然后提交测试图标是否在网站上正常显示。 其中，上述正常显示包括图标的显示位置和显示大小均与预期相符；而当图标未显示，或者 图标的显示位置与预期不相符，或者图标的显示大小与预期不相符，均认为网站图标非正 常显示。
[0188] 此外，当图标非正常显示时，可W由网页维护人员进行代码调试，当排查结果确 认图标代码存在漏桐，则向服务器发送图标代码错误信息，W使网络侧的图标维护人员对 图标包中存储的图标代码进行更新，并在更新完成后向网页维护设备发送图标代码更新通 知，所述图标代码更新通知用于网页维护设备获知图标代码进行了更新。直到图标在网站 上正常显示。
[0189] 可选地，在页面中添加图标的模板文件之后，解析所述页面中的所述CSS和所述 图标的模板文件；在所述页面中显示所述图标。
[0190] 例如，在淘宝网网页页面中添加支付宝图标的模板文件之后，解析淘宝网网页页 面中的CSS和支付宝图标的模板文件；在淘宝网网页页面中显示支付宝图标。 阳191] 因此，本申请实施例提供的图标的处理方法，将所述图标包安装至资源库中，W目 录的形式生成图标文件；使得各网页按需求对图标文件进行下载，当图标包更新时，各网页 按需求对图标文件进行更新，有效减少网站的带宽浪费。将所述合并后的图片文件和所述 图标的样式文件集成到页面的层叠样式表CSS中，在页面中添加所述图标的模板文件，从 而使得图标的视觉品质在不同网页中的显示是相同的，且避免了当样式文件出现漏桐时， 影响整个网站，规避了网站的风险。 阳192]与本申请实施例提供的图标包的生成方法相对应，本申请实施例还提供了一种服 务器，适用于所有需要图标包的场景，该服务器可W是包管理服务器简称包管理器，参见图 7所示的服务器示意图，该服务器具体可W包括： 阳193] 获取单元701，用于获取图片文件、模板文件和样式文件； 阳194] 合并单元702,用于将至少两个图片文件合并为一个图片文件；
[0195] 所述合并单元702,还用于将至少两个模板文件合并为一个模板文件； 阳196] 所述合并单元702,还用于将至少两个样式文件合并为一个样式文件； 阳197] 生成单元703，用于根据合并后的图片文件、合并后的模板文件和合并后的样式文 件生成所述图标包。
[0198] 所述服务器还可W包括：
[0199] 存储单元704,用于将所述图标包存储于仓库中，并获取所述图标包在所述仓库中 存储的地址。 阳200] 注册单元705,用于注册所述图标包，将所述图标包的包名与所述图标包存储的所 述地址关联。 阳201] 生成单元703,还用于当所述图标包中的所述图片文件、所述模板文件或所述样式 文件更新时，生成另一个版本号的图标包。 阳202] 定位单元706,用于在所述合并后的图片文件中划分坐标轴，通过坐标点定位合并 后的图片文件中的待更新的图片文件； 阳203] 替换单元707,用于将更新后的图片文件上传至合并后的图片文件中，替换更新前 的图片文件。 阳204] 更新单元708,用于当所述图标包更新后，将所述图标包的更新信息通知给服务 器。 阳205] 本申请实施例提供的服务器中的单元可W实现本申请实施例提供的图标包的生 成方法。本申请实施例提供的服务器中的各单元可W执行上述方法实施例中的各步骤。 阳206] 本申请实施例提供的服务器，将至少两个图片文件合并为一个图片文件；将至少 两个模板文件合并为一个模板文件；将至少两个样式文件合并为一个样式文件；根据合并 后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。减少了接收的请 求信息量，W及减少了发送的响应信息量，从而降低网络负载，提高效率。
[0207]与本申请实施例提供的图标的处理方法相对应，本申请实施例还提供了一种图标 的处理系统，适用于所有网站对图标的处理的场景，该系统可W是客户端也可W是服务端， 例如：淘宝网网站的客户端或淘宝网网站的服务器。参见图8所示的图标的处理系统示意 图，该系统具体可W包括： 阳20引获取单元801，用于获取图标包； 阳209] 安装单元802,用于将所述图标包安装至资源库中，W目录的形式生成图标文件， 所述图标文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件；
[0210] 解析单元803,用于对所述图标文件进行解析，并生成所述合并后的图片文件、图 标的模板文件和图标的样式文件； 阳211] 集成单元804,用于将所述合并后的图片文件和所述图标的样式文件集成到页面 的层叠样式表CSS中；
[0212] 添加单元805,用于在所述页面中添加所述图标的模板文件。
[0213] 解析单元803,还用于解析所述页面中的所述CSS和所述图标的模板文件；
[0214] 所述系统还可W包括：
[0215] 显示单元806,用于在所述页面中显示所述图标。
[0216] 集成单元804,具体用于根据所述图标的样式文件映射出的所述图标的尺寸大小， W及所述图标在所述合并后的图片文件中的坐标点，获取所述图标的图片文件；将所述图 标的图片文件集成到所述页面的所述CSS中的预设的位置处。
[0217] 安装单元802,还用于当仓库中的所述图标包更新时，接收更新信息，将更新后的 图标包安装至所述资源库中。
[0218] 更新单元807,用于所述页面按需更新所述图标包。 阳219] 本申请实施例提供的图标的处理系统中的单元可W实现本申请实施例提供的图 标的处理方法。本申请实施例提供的图标的处理系统中的各单元可W执行上述方法实施例 中的各步骤。
[0220] 因此，本申请实施例提供的图标的处理系统，将所述图标包安装至资源库中，W目 录的形式生成图标文件；使得各网页按需求对图标文件进行下载，当图标包更新时，各网页 按需求对图标文件进行更新，有效减少网站的带宽浪费。将所述合并后的图片文件和所述 图标的样式文件集成到页面的层叠样式表CSS中，在页面中添加所述图标的模板文件，从 而使得图标的视觉品质在不同网页中的显示是相同的，且避免了当样式文件出现漏桐时， 影响整个网站，规避了网站的风险。 阳221] 本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部 分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或 系统实施例而言，由于其与方法实施例相似，所W描述得比较简单，相关之处参见方法实施 例的部分说明即可。W上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离 部件说明的单元可W是或者也可W不是物理上分开的，作为单元显示的部件可W是或者也 可W不是物理单元，即可W位于一个地方，或者也可W分布到多个网络单元上。可W根据实 际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员 在不付出创造性劳动的情况下，即可W理解并实施。 阳222] 本领域普通技术人员应该还可W进一步意识到，结合本文中所公开的实施例描述 的各示例的单元及算法步骤，能够W电子硬件、计算机软件或者二者的结合来实现，为了清 楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组 成及步骤。运些功能究竟W硬件还是软件方式来执轨道，取决于技术方案的特定应用和设 计约束条件。本领域普通技术人员可W对每个特定的应用来使用不同方法来实现所描述的 功能，但是运种实现不应认为超出本申请的范围。 阳223] 结合本文中所公开的实施例描述的方法或算法的步骤可W用硬件、处理器执轨道 的软件模块，或者二者的结合来实施。软件模块可W置于随机存储器（RAM)、内存、只读存储 器（ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领 域内所公知的任意其它形式的存储介质中。
[0224] W上所述的【具体实施方式】，对本申请的目的、技术方案和有益效果进轨道了进一 步详细说明，所应理解的是，W上所述仅为本申请的【具体实施方式】而已，并不用于限定本申 请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包 含在本申请的保护范围之内。
【主权项】
1. 一种图标包的生成方法，其特征在于，所述方法包括： 获取图片文件、模板文件和样式文件； 将至少两个图片文件合并为一个图片文件； 将至少两个模板文件合并为一个模板文件； 将至少两个样式文件合并为一个样式文件； 根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成所述图标包。2. 根据权利要求1所述的方法，其特征在于，所述方法还包括： 将所述图标包存储于仓库中，并获取所述图标包在所述仓库中存储的地址。3. 根据权利要求1或2所述的方法，其特征在于，在所述获取所述图标包在所述仓库中 存储的地址之后，所述方法还包括： 注册所述图标包，将所述图标包的包名与所述图标包存储的所述地址关联。4. 根据权利要求1所述的方法，其特征在于，所述方法还包括： 当所述图标包中的所述图片文件、所述模板文件或所述样式文件更新时，生成另一个 版本号的图标包。5. 根据权利要求1所述的方法，其特征在于，所述方法还包括： 在所述合并后的图片文件中划分坐标轴，通过坐标点定位合并后的图片文件中的待更 新的图片文件； 将更新后的图片文件上传至合并后的图片文件中，替换更新前的图片文件。6. 根据权利要求1所述的方法，其特征在于，所述方法还包括： 当所述图标包更新后，将所述图标包的更新信息通知给服务器。7. -种图标的处理方法，其特征在于，所述方法包括： 获取图标包； 将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标文件包括合并 后的图片文件、合并后的模板文件和合并后的样式文件； 对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板文件和图标的 样式文件； 将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样式表CSS中； 在所述页面中添加所述图标的模板文件。8. 根据权利要求7所述的方法，其特征在于，在所述页面中添加所述图标的模板文件 之后，所述方法还包括： 解析所述页面中的所述CSS和所述图标的模板文件； 在所述页面中显示所述图标。9. 根据权利要求7所述的方法，其特征在于，将所述合并后的图片文件和所述图标的 样式文件集成到页面的层叠样式表CSS中具体还包括： 根据所述图标的样式文件映射出的所述图标的尺寸大小，以及所述图标在所述合并后 的图片文件中的坐标点，获取所述图标的图片文件；将所述图标的图片文件集成到所述页 面的所述CSS中的预设的位置处。10. 根据权利要求7所述的方法，其特征在于，所述方法还包括： 当仓库中的所述图标包更新时，接收更新信息，将更新后的图标包安装至所述资源库 中。11. 根据权利要求7所述的方法，其特征在于，在将更新后的图标包安装至所述资源库 中之后，所述方法还包括：所述页面按需更新所述图标包。12. -种服务器，其特征在于，所述服务器包括： 获取单元，用于获取图片文件、模板文件和样式文件； 合并单元，用于将至少两个图片文件合并为一个图片文件； 所述合并单元，还用于将至少两个模板文件合并为一个模板文件； 所述合并单元，还用于将至少两个样式文件合并为一个样式文件； 生成单元，用于根据合并后的图片文件、合并后的模板文件和合并后的样式文件生成 所述图标包。13. -种图标的处理系统，其特征在于，所述系统包括： 获取单元，用于获取图标包； 安装单元，用于将所述图标包安装至资源库中，以目录的形式生成图标文件，所述图标 文件包括合并后的图片文件、合并后的模板文件和合并后的样式文件； 解析单元，用于对所述图标文件进行解析，并生成所述合并后的图片文件、图标的模板 文件和图标的样式文件； 集成单元，用于将所述合并后的图片文件和所述图标的样式文件集成到页面的层叠样 式表CSS中； 添加单元，用于在所述页面中添加所述图标的模板文件。
【文档编号】G06F17/30GK105989098SQ201510077213
【公开日】2016年10月5日
【申请日】2015年2月12日
【发明人】王兆平, 王觯程
【申请人】阿里巴巴集团控股有限公司