网页主题更换方法及装置、存储介质、计算机设备制造方法及图纸

技术编号:30562978 阅读:53 留言:0更新日期:2021-10-30 13:46
本申请公开了一种网页主题更换方法及装置、存储介质、计算机设备,该方法包括:响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题;读取所述目标主题对应的目标变量文件,其中,所述目标变量文件包括待更换的目标变量种类以及与所述目标变量种类对应的变更值;通过浏览器原生程序对已加载的网页样式文件进行编译,将已加载的网页样式文件中与所述目标变量种类对应的参数值更新为对应的所述变更值,以使所述网页样式文件与所述目标主题匹配;加载所述网页样式文件中与所述目标变量种类对应的参数值,以将所述目标主题应用于所述目标网页上。本申请无需创建全量样式文件,减少了资源占用量,同时提高了页面刷新效率。页面刷新效率。页面刷新效率。

【技术实现步骤摘要】
网页主题更换方法及装置、存储介质、计算机设备


[0001]本申请涉及互联网
,尤其是涉及到一种网页主题更换方法及装置、存储介质、计算机设备。

技术介绍

[0002]随着互联网技术的不断发展和普及,目前的web应用中,用户对个性化的要求不断攀升,个性化的用户界面设计方案首当其冲,有大量的web应用中提供了“换肤”功能,对页面主题进行个性化切换。目前主要的实现方式为定制多套主题变量方案,然后使用sass、less等预处理器生成多套样式文件,在用户界面通过切换样式文件来实现“换肤”的功能。
[0003]上述“换肤”方式,每次切换主题时均需要通过预编译器生成与主题相应的样式文件,进而依据样式文件进行渲染生成与相应主题匹配的页面。样式文件资源量较大,且需要预编译器配合使用,给前端系统造成了编译和渲染压力。

技术实现思路

[0004]有鉴于此,本申请提供了一种网页主题更换方法及装置、存储介质、计算机设备。
[0005]根据本申请的一个方面,提供了一种网页主题更换方法,包括:响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题;读取所述目标主题对应的目标变量文件,其中,所述目标变量文件包括待更换的目标变量种类以及与所述目标变量种类对应的变更值;通过浏览器原生程序对已加载的网页样式文件进行编译,将已加载的网页样式文件中与所述目标变量种类对应的参数值更新为对应的所述变更值,以使所述网页样式文件与所述目标主题匹配;加载所述网页样式文件中与所述目标变量种类对应的参数值,以将所述目标主题应用于所述目标网页上。
[0006]可选地,所述响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题之前,所述方法还包括:基于对所述目标网页的请求指令,读取并加载所述网页样式文件,其中,所述网页样式文件包括初始主题文件以及至少一个主题变量文件;通过浏览器渲染所述初始主题文件,以展示与初始主题风格匹配的目标网页;相应地,所述读取所述目标主题对应的目标变量文件,具体包括:从所述至少一个主题变量文件中,读取所述目标主题对应的目标变量文件。
[0007]可选地,所述初始主题文件为CSS文件,所述初始主题文件包括至少一个初始主题对应的主题模块,任一主题模块中存储相应初始主题对应的模板参数值以及可更换变量的第一参数值;所述主题变量文件为CSS文件,所述主题变量文件包括至少一个可更换主题对应的变量模块,任一变量模块中存储相应可更换主题对应的可更换变量的第二参数值;
相应地,所述从所述至少一个主题变量文件中,读取所述目标主题对应的目标变量文件,具体包括:在所述变量模块中确定所述目标主题对应的目标变量模块,并从所述目标变量模块中读取所述可更换变量作为所述目标变量种类以及读取所述可更换变量的第二参数值作为所述变更值。
[0008]可选地,在所述初始主题文件包括多个主题模块的情况下,所述通过浏览器渲染所述初始主题文件,具体包括:依据所述目标网页对应的历史设定主题或标准设定主题,在多个主题模块中选择一个作为目标主题模块;通过所述浏览器渲染所述目标主题模块中的模板参数值以及可更换变量的第一参数值,以展示与所述历史设定主题或标准设定主题的风格匹配的目标网页。
[0009]可选地,所述响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题,具体包括:响应于对目标网页的主题更换指令,展示所述目标网页对应的可更换主题选择界面,其中,所述可更换主题选择界面包括所述至少一个可更换主题对应的触发选项以及主题预览图;当任一触发选项被选择时,将被选择的触发选项对应的可更换主题确定为所述目标主题。
[0010]可选地,所述变量模块中相应可更换主题对应的可更换变量的第二参数值包括多个固定值或所述第二参数值支持的取值范围;所述读取所述目标主题对应的目标变量文件之后,所述方法还包括:依据所述目标变量文件,展示所述目标主题对应的变量配置界面,其中,所述变量配置界面包括所述目标主题对应的第二参数值以及所述第二参数值对应的变量预览图;基于接收到的对所述第二参数值的选择数据,确定所述目标变量文件对应的所述目标变量种类及其对应的所述变更值。
[0011]可选地,所述可更换变量包括所述目标网页的主题颜色、背景颜色、字体颜色、字体型号、字体大小、图标形状中至少一种。
[0012]根据本申请的另一方面,提供了一种网页主题更换装置,包括:主题确定单元,用于响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题;文件读取单元,用于读取所述目标主题对应的目标变量文件,其中,所述目标变量文件包括待更换的目标变量种类以及与所述目标变量种类对应的变更值;变量编译单元,用于通过浏览器原生程序对已加载的网页样式文件进行编译,将已加载的网页样式文件中与所述目标变量种类对应的参数值更新为对应的所述变更值,以使所述网页样式文件与所述目标主题匹配;变量加载单元,用于加载所述网页样式文件中与所述目标变量种类对应的参数值,以将所述目标主题应用于所述目标网页上。
[0013]可选地,所述装置还包括:主题加载单元,用于所述响应于对目标网页的主题更换指令,确定所述目标网页
对应的待更换的目标主题之前,基于对所述目标网页的请求指令,读取并加载所述网页样式文件,其中,所述网页样式文件包括初始主题文件以及至少一个主题变量文件;通过浏览器渲染所述初始主题文件,以展示与初始主题风格匹配的目标网页;相应地,所述文件读取单元,具体用于:从所述至少一个主题变量文件中,读取所述目标主题对应的目标变量文件。
[0014]可选地,所述初始主题文件为CSS文件,所述初始主题文件包括至少一个初始主题对应的主题模块,任一主题模块中存储相应初始主题对应的模板参数值以及可更换变量的第一参数值;所述主题变量文件为CSS文件,所述主题变量文件包括至少一个可更换主题对应的变量模块,任一变量模块中存储相应可更换主题对应的可更换变量的第二参数值;相应地,所述文件读取单元,具体用于:在所述变量模块中确定所述目标主题对应的目标变量模块,并从所述目标变量模块中读取所述可更换变量作为所述目标变量种类以及读取所述可更换变量的第二参数值作为所述变更值。
[0015]可选地,在所述初始主题文件包括多个主题模块的情况下,所述主题加载单元,具体用于:依据所述目标网页对应的历史设定主题或标准设定主题,在多个主题模块中选择一个作为目标主题模块;通过所述浏览器渲染所述目标主题模块中的模板参数值以及可更换变量的第一参数值,以展示与所述历史设定主题或标准设定主题的风格匹配的目标网页。
[0016]可选地,所述主题确定单元,具体用于:响应于对目标网页的主题更换指令,展示所述目标网页对应的可更换主题选择界面,其中,所述可更换主题选择界面包括所述至少一个可更换主题对应的触发选项以及主题预览图;当任一触发选项被选择时,将被选择的触发选项对应的可更换主题确定为所述目标主题。
[0017]可选地,所述变量模块中相应可更换主题对应的可更换变量的第二参数值包括本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种网页主题更换方法,其特征在于,包括:响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题;读取所述目标主题对应的目标变量文件,其中,所述目标变量文件包括待更换的目标变量种类以及与所述目标变量种类对应的变更值;通过浏览器原生程序对已加载的网页样式文件进行编译,将已加载的网页样式文件中与所述目标变量种类对应的参数值更新为对应的所述变更值,以使所述网页样式文件与所述目标主题匹配;加载所述网页样式文件中与所述目标变量种类对应的参数值,以将所述目标主题应用于所述目标网页上。2.根据权利要求1所述的方法,其特征在于,所述响应于对目标网页的主题更换指令,确定所述目标网页对应的待更换的目标主题之前,所述方法还包括:基于对所述目标网页的请求指令,读取并加载所述网页样式文件,其中,所述网页样式文件包括初始主题文件以及至少一个主题变量文件;通过浏览器渲染所述初始主题文件,以展示与初始主题风格匹配的目标网页;相应地,所述读取所述目标主题对应的目标变量文件,具体包括:从所述至少一个主题变量文件中,读取所述目标主题对应的目标变量文件。3.根据权利要求2所述的方法,其特征在于,所述初始主题文件为CSS文件,所述初始主题文件包括至少一个初始主题对应的主题模块,任一主题模块中存储相应初始主题对应的模板参数值以及可更换变量的第一参数值;所述主题变量文件为CSS文件,所述主题变量文件包括至少一个可更换主题对应的变量模块,任一变量模块中存储相应可更换主题对应的可更换变量的第二参数值;相应地,所述从所述至少一个主题变量文件中,读取所述目标主题对应的目标变量文件,具体包括:在所述变量模块中读取所述目标主题对应的目标变量模块,并从所述目标变量模块中读取所述可更换变量作为所述目标变量种类以及读取所述可更换变量的第二参数值作为所述变更值。4.根据权利要求3所述的方法,其特征在于,在所述初始主题文件包括多个主题模块的情况下,所述通过浏览器渲染所述初始主题文件,具体包括:依据所述目标网页对应的历史设定主题或标准设定主题,在多个主题模块中选择一个作为目标主题模块;通过所述浏览器渲染所述目标主题模块中的模板参数值以及可更换变量的第一参数值,以展示与所述历史设定主题或标准设定...

【专利技术属性】
技术研发人员:刘喻杨雪静郭志鹏杨集宾王文君
申请(专利权)人:上海观安信息技术股份有限公司
类型:发明
国别省市:

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

1