CN108228677A - 切换网站主题风格的方法和装置 - Google Patents

Abstract

本发明公开了一种切换网站主题风格的方法和装置。其中，该方法包括：接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项；在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；为配色变量赋值，得到配色变量值；将配色变量值和预设样式文件结合，编译得到目标主题风格；将目标主题风格应用于网站界面。本发明解决了现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的技术问题。

Description

切换网站主题风格的方法和装置

技术领域

本发明涉及互联网技术领域，具体而言，涉及一种切换网站主题风格的方法和装置。

背景技术

目前通常的各大网站，例如qq空间，新浪微博，博客等都具有主题风格切换功能。有些切换主题风格后需要手动刷新才能看到结果，有些直接就可以看到效果。实现主题风格的切换通常包括如下几种方法：

1、将几套主题风格都写在一个样式(css)文件内，切换主题风格的时候直接在最外层切换class，但使用这种方式会导致最终样式文件会很大，并且由于很多样式用不上。在网站初次加载的情况下，会耗费大量的带宽。

2、在用户发出指令进行主题风格切换时，重新请求一个新的页面，新的页面会有该页面的样式链接。效果相当于在该窗口下重新加载了一遍，用户的体验是页面进行了刷新，这样的方式需要做多套页面并事先进行保存，其中有大量的重复工作。

3、切换头文件链接的源文件，将样式表引到另一个位置，采用这种凡是同样需要预先配置好多套样式表保存到服务端，在用户需要切换主题风格时同样也需要请求后端数据。

由于目前的切换主题风格基本为上述这三种实现方案。概括来说就是如下三点：前端切换class、重新请求一个新的模板、前端修改链接的指向位置。如果用户想要自己配置界面风格，都无一例外的需要人工加入主题风格模板，过程繁琐且灵活度低。

针对现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种切换网站主题风格的方法和装置，以至少解决现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的技术问题。

根据本发明实施例的一个方面，提供了一种切换网站主题风格的方法，包括：接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项；在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；为配色变量赋值，得到配色变量值；将配色变量值和预设样式文件结合，编译得到目标主题风格；将目标主题风格应用于网站界面。

进一步地，主题风格操作界面上还包括标准主题风格选项，标准主题风格选项下具有多种标准主题风格，切换网站主题风格的方法还包括：在接收到选择标准主题风格选项的指令后，获取选中的标准主题风格，并将选中的标准主题风格应用于网站界面。

进一步地，在编译得到目标主题风格之后，切换网站主题风格的方法还包括：将目标主题风格进行缓存。

进一步地，在为配色变量赋值之前，切换网站主题风格的方法还包括：定义网站主题风格的基准色，基准色用于限定网站主题风格的配色基调，以使配色变量在基准色支持的取值范围内选取配色变量值。

进一步地，配色变量包括主题颜色、背景颜色和字体颜色中的一个或多个。

根据本发明实施例的另一方面，还提供了一种切换网站主题风格的装置，包括：接收模块，用于接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项；第一获取模块，用于在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；赋值模块，用于为配色变量赋值，得到配色变量值；编译模块，用于将配色变量值和预设样式文件结合，编译得到目标主题风格；应用模块，用于将目标主题风格应用于网站界面。

进一步地，主题风格操作界面上还包括标准主题风格选项，标准主题风格选项下具有多种标准主题风格，切换网站主题风格的装置还包括：第二获取模块，用于在接收到选择标准主题风格选项的指令后，获取选中的标准主题风格，并将选中的标准主题风格应用于网站界面。

进一步地，切换网站主题风格的装置还包括：缓存模块，用于在编译得到目标主题风格之后，将目标主题风格进行缓存。

进一步地，切换网站主题风格的装置还包括：定义模块，用于在为配色变量赋值之前，定义网站主题风格的基准色，基准色用于限定网站主题风格的配色基调，以使配色变量在基准色支持的取值范围内选取配色变量值。

进一步地，配色变量包括主题颜色、背景颜色和字体颜色中的一个或多个。

在本发明实施例中，获取后端服务器生成的配色信息，将配色信息与预设的样式文件结合，编译出新的主题风格文件。上述方案在生成新的主题风格文件时，不需要人工加入主题风格模板，后端服务器仅存储了配色变量，只要修改变量值就能达到修改整个主题风格的效果。这样，不管是网站中预设的主题风格也好，还是用户自己设置的颜色也好，都能够根据变量高效的生成css文件，避免手工去增加主题风格，从而提高了网站主题风格切换的灵活性，减小了切换网站主题风格所使用的带宽，提高了切换网站主题风格的效率，还由于无需重新请求页面，使切换后的主题风格可以直接应用于网站的界面上，实现无刷新的切换，从而解决了现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种切换网站主题风格的方法的流程图；

图2是根据本发明实施例的一种切换网站主题风格的装置的示意图；

图3是根据本发明实施例的一种可选的切换网站主题风格的装置的示意图；

图4是根据本发明实施例的一种可选的切换网站主题风格的装置的示意图；以及

图5是根据本发明实施例的一种可选的切换网站主题风格的装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本申请实施例进行描述的过程中出现的部分名词或术语适用于如下解释：

网站主题风格：互联网中一些优秀的网站都会有统一的风格，页面上会有修改主题风格的按键，用户可以根据喜好选择某一个主题风格应用到界面上，来改变该网站的风格。

css：层叠样式表，一种用来表现html文件样式的语言。

class：用于表示一条css规则，这个规则可以在任意标签上复用，使其具有同一种显示效果。

less/scss：css预处理语言，扩展了css，加入了变量，逻辑处理，函数等特性，极大方便了css的书写。本身并不能被浏览器识别，需要编译成css才能被浏览器识别。

实施例1

根据本发明实施例，提供了一种切换网站主题风格的方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的切换网站主题风格的方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项。

具体的，上述切换主题风格的请求可由前端，即用户终端接收，在前端接收到切换主题风格的请求后，可以在用户终端的屏幕上向用户展示主题风格的操作界面。上述自定义主题风格选项可以对主题风格自定义设置，尤其是颜色的自定义设置。

步骤S104，在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件。

在一种可选的实施例中，以QQ空间为例，在切换QQ空间的时，通常需要切换QQ空间访问页面的背景颜色、字体颜色等，那么背景颜色和字体颜色即为配色变量。

步骤S106，为配色变量赋值，得到配色变量值。

在一种可选的实施例中，仍以QQ空间为例，上述配色变量值为与配色变量对应的颜色值，可以由用户进行自定义选择，以配色变量为背景颜色为例，用户通过自定义选择背景颜色为绿色，则该配色变量对应的配色变量值为绿色；还可以根据用户选定的颜色进行搭配设计，根据预设的配色方案为每个配色变量设置的颜色值。

此处需要说明的是，配色变量不限于上述实施例中所提供的配色变量，在切换网站主题风格时需要统一根据主题风格的切换而至少发生颜色变动的，在css文件中通过赋值来实现在网站界面上的显示的均可以为配色变量。

步骤S108，将配色变量值和预设样式文件结合，编译得到目标主题风格。

具体的，上述预设样式文件可以为css文件，上述步骤可以通过工具scss/less将css文件中预设的配色变量的变量名称替换为配色变量对应的变量内容，也即配色信息，从而实现配色信息与预设的样式文件的结合。

此处需要说明是，上述方案优选的适用于整体配色统一的网站，在对网站的整体css架构由清楚认知的情况下，可以根据网站主题风格的需求提取出多个配色变量，并将这些配色变量存储于后端服务器。

此处还需要说明的是，上述步骤可以是前端来执行，前端用于指用户在切换网站主题风格时所使用的终端，包括电脑、智能手机等。

步骤S1010，将目标主题风格应用于网站界面。在将配色信息与预设的样式文件结合，编译出新的主题风格文件之后，方法还包括：将新的主题风格文件通过style应用至网站界面。

具体的，可以通过style将编译的主题风格文件应用至网站界面，上述style用于控制html的文档流结构，用于将编译好的主题风格文件应用于网站界面。

由上可知，本申请上述步骤接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项；在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；为配色变量赋值，得到配色变量值；将配色变量值和预设样式文件结合，编译得到目标主题风格；将目标主题风格应用于网站界面。上述方案在生成新的主题风格文件时，不需要人工加入主题风格模板，后端服务器仅存储了配色变量，只要修改变量值就能达到修改整个主题风格的效果。这样，不管是网站中预设的主题风格也好，还是用户自己自定义的颜色值也好，都能够根据变量高效的生成css文件，避免手工去增加主题风格，从而提高了网站主题风格切换的灵活性，减小了切换网站主题风格所使用的带宽，提高了切换网站主题风格的效率，还由于无需重新请求页面，使切换后的主题风格可以直接应用于网站的界面上，实现无刷新的切换，从而解决了现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的技术问题。

可选的，根据本申请上述实施例，主题风格操作界面上还包括标准主题风格选项，标准主题风格选项下具有多种标准主题风格，方法还包括：

步骤S1012，在接收到选择标准主题风格选项的指令后，获取选中的标准主题风格，并将选中的标准主题风格应用于网站界面。

可选的，根据本申请上述实施例，在编译得到目标主题风格之后，方法还包括：

步骤S1014，将目标主题风格进行缓存。

在新的主题风格文件生成后，需要通过编译才能应用于网站页面，在编译好新的主题风格文件并应用于网站界面后，为了方便下一次的使用，可以将编译结果进行缓存。

可选的，当接收到的切换主题风格的请求与之前接收到的切换主题风格的请求相同时，从缓存中读取编译过的新的主题风格文件。

在一种可选的实施例中，用户请求将网站主题风格更换为A主题风格，在应用A主题风格一段时间后将网站主题风格更换为B主题风格，其后又将网站的主题风格更换为A，在第二次将网站主题风格更换为A时，无需对A主题风格的主题风格文件再进行编译，而只需直接读取编译过的主题风格进行更换即可。

由上可知，上述方案通过对变异好的主题风格进行缓存，从而避免了反复编译主题风格文件对系统带来的压力，并且提高了更换网站主题风格的效率。

可选的，根据本申请上述实施例，在为配色变量赋值之前，上述方法还包括：

步骤S1016，定义网站主题风格的基准色，基准色用于限定网站主题风格的配色基调，以使配色变量在基准色支持的取值范围内选取配色变量值。

具体的，上述基准色可以为红绿蓝三色，经过不同程度的组合搭配可满足网页中的各种色彩，通过调整这几个颜色的明亮度或者深浅度，可以很好的保持网站风格的统一性。通过基准色搭配和/或调整深浅程度能够合成的颜色即为基准色支持的颜色，基准色能够合成的所有颜色的颜色值的范围即为基准色支持的取值范围，上述获取基准色可以从网站中提取，也可以自由设定。

可选的，根据本申请上述实施例，配色变量包括主题颜色、背景颜色和字体颜色中的一个或多个。

下面通过一个可选的实施例来描述上述方案。

在进行网站主题风格的切换之前，首先要整理网站的css结构，利用样式预处理技术(如scss/less)提取出网站用到的基准色以及配色变量。

在进行网站主题风格切换的步骤如下：

1、前端获取预处理变量。上述预处理变量即为配色变量。

2、前端通过采用scss/less对预处理变量进行赋值，并将赋值后的预处理变量与主题风格文件结合，编译出新的主题风格文件。

3、前端拿到新的主题风格css后通过style应用到界面上。

4、前端将编译好的新的主题风格文件进行缓存，只要编译过一次就不再去编译，将结果缓存，避免任何一个主题风格变量都需要编译。

5、当用户再次点击请求更换至同样的主题风格后，并不会去再次编译，而从前端缓存中去取之前的编译结果即可。

实施例2

根据本发明实施例，提供了一种切换网站主题风格的装置的实施例，图2是根据本发明实施例的切换网站主题风格的装置的示意图，如图2所示，该装置包括：

接收模块10，用于接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项。

具体的，上述切换主题风格的请求可由前端，即用户终端接收，在前端接收到切换主题风格的请求后，可以在用户终端的屏幕上向用户展示主题风格的操作界面。上述自定义主题风格选项可以对主题风格自定义设置，尤其是颜色的自定义设置。

第一获取模块20，用于在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件。

在一种可选的实施例中，以QQ空间为例，在切换QQ空间的时，通常需要切换QQ空间访问页面的背景颜色、字体颜色等，那么背景颜色和字体颜色即为配色变量。

赋值模块30，用于为配色变量赋值，得到配色变量值。

在一种可选的实施例中，仍以QQ空间为例，上述配色变量值为与配色变量对应的颜色值，可以由用户进行自定义选择，以配色变量为背景颜色为例，用户通过自定义选择背景颜色为绿色，则该配色变量对应的配色变量值为绿色；还可以根据用户选定的颜色进行搭配设计，根据预设的配色方案为每个配色变量设置的颜色值。

此处需要说明的是，配色变量不限于上述实施例中所提供的配色变量，在切换网站主题风格时需要统一根据主题风格的切换而至少发生颜色变动的，在css文件中通过赋值来实现在网站界面上的显示的均可以为配色变量。

编译模块40，用于将配色变量值和预设样式文件结合，编译得到目标主题风格。

具体的，上述预设样式文件可以为css文件，上述步骤可以通过工具scss/less将css文件中预设的配色变量的变量名称替换为配色变量对应的变量内容，也即配色信息，从而实现配色信息与预设的样式文件的结合。

此处需要说明是，上述方案优选的适用于整体配色统一的网站，在对网站的整体css架构由清楚认知的情况下，可以根据网站主题风格的需求提取出多个配色变量，并将这些配色变量存储于后端服务器。

此处还需要说明的是，上述步骤可以是前端来执行，前端用于指用户在切换网站主题风格时所使用的终端，包括电脑、智能手机等。

应用模块50，用于将目标主题风格应用于网站界面。

体的，可以通过style将编译的主题风格文件应用至网站界面，上述style用于控制html的文档流结构，用于将编译好的主题风格文件应用于网站界面。

由上可知，本申请上述装置通过接收模块接收到切换主题风格的请求后，展示主题风格操作界面，其中，主题风格操作界面上包括自定义主题风格选项；通过第一获取模块在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；通过赋值模块为配色变量赋值，得到配色变量值；通过编译模块将配色变量值和预设样式文件结合，编译得到目标主题风格；通过应用模块将目标主题风格应用于网站界面。上述方案在生成新的主题风格文件时，不需要人工加入主题风格模板，后端服务器仅存储了配色变量，只要修改变量值就能达到修改整个主题风格的效果。这样，不管是网站中预设的主题风格也好，还是用户自己自定义的颜色值也好，都能够根据变量高效的生成css文件，避免手工去增加主题风格，从而提高了网站主题风格切换的灵活性，减小了切换网站主题风格所使用的带宽，提高了切换网站主题风格的效率，还由于无需重新请求页面，使切换后的主题风格可以直接应用于网站的界面上，实现无刷新的切换，从而解决了现有技术中切换网站主题风格的灵活性低现有技术中切换网站主题风格的灵活性低的技术问题。

可选的，根据本申请上述实施例，结合图3所示，主题风格操作界面上还包括标准主题风格选项，标准主题风格选项下具有多种标准主题风格，上述装置还包括：

第二获取模块60，用于在接收到选择标准主题风格选项的指令后，获取选中的标准主题风格，并将选中的标准主题风格应用于网站界面。

可选的，根据本申请上述实施例，结合图4所示，上述装置还包括：

缓存模块70，用于在编译得到目标主题风格之后，将目标主题风格进行缓。

可选的，根据本申请上述实施例，结合图5所示，装置还包括：

定义模块80，用于在为配色变量赋值之前，定义网站主题风格的基准色，基准色用于限定网站主题风格的配色基调，以使配色变量在基准色支持的取值范围内选取配色变量值。

可选的，根据本申请上述实施例，上述配色变量包括如下任意一个或多个：主体颜色、背景色、字体颜色。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种切换网站主题风格的方法，其特征在于，包括：

接收到切换主题风格的请求后，展示主题风格操作界面，其中，所述主题风格操作界面上包括自定义主题风格选项；

在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；

为所述配色变量赋值，得到配色变量值；

将所述配色变量值和所述预设样式文件结合，编译得到目标主题风格；

将所述目标主题风格应用于网站界面。

2.根据权利要求1所述的方法，其特征在于，所述主题风格操作界面上还包括标准主题风格选项，所述标准主题风格选项下具有多种标准主题风格，所述方法还包括：

在接收到选择所述标准主题风格选项的指令后，获取选中的标准主题风格，并将所述选中的标准主题风格应用于所述网站界面。

3.根据权利要求1所述的方法，其特征在于，在编译得到目标主题风格之后，所述方法还包括：

将所述目标主题风格进行缓存。

4.根据权利要求1所述的方法，其特征在于，在为所述配色变量赋值之前，所述方法还包括：

定义所述网站主题风格的基准色，所述基准色用于限定所述网站主题风格的配色基调，以使所述配色变量在所述基准色支持的取值范围内选取配色变量值。

5.根据权利要求1至4中任意一项所述的方法，其特征在于，所述配色变量包括主题颜色、背景颜色和字体颜色中的一个或多个。

6.一种切换网站主题风格的装置，其特征在于，包括：

接收模块，用于接收到切换主题风格的请求后，展示主题风格操作界面，其中，所述主题风格操作界面上包括自定义主题风格选项；

第一获取模块，用于在接收到选定自定义主题风格选项的指令后，获取配色变量和预设样式文件；

赋值模块，用于为所述配色变量赋值，得到配色变量值；

编译模块，用于将所述配色变量值和所述预设样式文件结合，编译得到目标主题风格；

应用模块，用于将所述目标主题风格应用于网站界面。

7.根据权利要求6所述的装置，其特征在于，所述主题风格操作界面上还包括标准主题风格选项，所述标准主题风格选项下具有多种标准主题风格，所述装置还包括：

第二获取模块，用于在接收到选择所述标准主题风格选项的指令后，获取选中的标准主题风格，并将所述选中的标准主题风格应用于所述网站界面。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

缓存模块，用于在编译得到目标主题风格之后，将所述目标主题风格进行缓存。

9.根据权利要求6所述的装置，其特征在于，所述装置还包括：

定义模块，用于在为所述配色变量赋值之前，定义所述网站主题风格的基准色，所述基准色用于限定所述网站主题风格的配色基调，以使所述配色变量在所述基准色支持的取值范围内选取配色变量值。

10.根据权利要求6至9中任意一项所述的装置，其特征在于，所述配色变量包括主题颜色、背景颜色和字体颜色中的一个或多个。