CN113010167A - Page element style customization method, equipment and storage medium - Google Patents
Page element style customization method, equipment and storage medium Download PDFInfo
- Publication number
- CN113010167A CN113010167A CN202110217429.6A CN202110217429A CN113010167A CN 113010167 A CN113010167 A CN 113010167A CN 202110217429 A CN202110217429 A CN 202110217429A CN 113010167 A CN113010167 A CN 113010167A
- Authority
- CN
- China
- Prior art keywords
- file
- attribute
- variables
- variable
- state
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 239000000725 suspension Substances 0.000 claims description 17
- 238000004891 communication Methods 0.000 claims description 9
- 230000000694 effects Effects 0.000 abstract description 23
- 230000008859 change Effects 0.000 abstract description 2
- 230000000875 corresponding effect Effects 0.000 abstract 3
- 238000012360 testing method Methods 0.000 description 5
- 238000012423 maintenance Methods 0.000 description 3
- 238000007726 management method Methods 0.000 description 3
- 239000003086 colorant Substances 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention relates to a method, equipment and a storage medium for customizing page element styles, wherein the method comprises the following steps: determining a theme color basic variable; determining the element file and the attribute and attribute state needing to be customized in the element file; creating a corresponding attribute file based on the attribute needing to be customized in the element file; defining corresponding variables in the attribute file based on the attribute state needing to be customized in the element file, wherein the variables in the attribute file are associated with the basic variables of the theme color; based on user requirements, assigning the attributes in the element file by using variables in the attribute file according to the attribute state needing to be customized in the element file. Compared with the prior art, the method and the device can solve the problems of slow realization of element effect change, large customization granularity and wide influence range, and can quickly realize customization by only changing the variable of the corresponding effect in the unified file when the element effect is changed.
Description
Technical Field
The invention relates to the technical field of product page design, in particular to a page element style customization method, equipment and a storage medium.
Background
With the rapid development of the internet, users have more and more customized requirements on the presentation effect of product pages. Under the background, the method for managing element styles based on the Sass generation variables is produced and rapidly developed, and the method also supports updating of a large number of elements based on theme colors to achieve the theme customization effect.
The traditional theme color customization scheme has a default incidence relation among elements, namely when one theme color is changed, multiple attribute effects of multiple elements can be simultaneously changed, certain specific elements cannot be specified to be updated, and even the specific attribute effects of the elements cannot be specified to be updated; meanwhile, when the basic color of the theme color is changed, the influence range is large, and the maintenance is difficult.
For a traditional customization scheme, when the effect of updating specific elements and specific attributes of the elements needs to be realized, secondary development can be performed only on the original functions, so that a large amount of time needs to be consumed to realize and test the influence range, the cost is higher and higher, and the later maintenance is poorer and poorer under different customization requirements. Thus, the conventional theme color customization scheme has failed to satisfy the demand for rapid customization.
Disclosure of Invention
The present invention provides a method, an apparatus, and a storage medium for customizing a page element style, so as to overcome the above-mentioned drawbacks of the prior art, and achieve the purpose of quickly customizing a page element style.
The purpose of the invention can be realized by the following technical scheme: a method for customizing page element styles comprises the following steps:
s1, determining basic variables of the theme color;
s2, determining the element file and the attribute and attribute state of the element file needing to be customized;
s3, creating a corresponding attribute file based on the attribute needing to be customized in the element file;
defining corresponding variables in the attribute file based on the attribute state needing to be customized in the element file, wherein the variables in the attribute file are associated with the basic variables of the theme color;
and S4, based on the user requirement, according to the attribute state needing to be customized in the element file, assigning the attribute in the element file by using the variable in the attribute file.
Further, the step S2 specifically includes the following steps:
s21, determining the element file and the attribute to be customized in the element file;
and S22, determining the attribute state needing to be customized in the element file.
Further, the attribute states to be customized in the element file include a default state and a floating state.
Furthermore, the attribute file contains a state variable and an element variable corresponding to the state variable.
Further, the state variables include default state variables and hover state variables.
Further, the step S4 specifically includes the following steps:
s41, based on user requirements, according to the attribute default state in the element file, assigning values to the variables in the element file by using the default state variables, or directly finding the element variables in the attribute file to assign values;
and S42, based on user requirements, according to the attribute suspension state in the element file, assigning values to the variables in the element file by using the suspension state variables, or directly finding the element variables in the attribute file for assignment.
Further, step S41 is specifically to obtain a data value from the associated theme color basic variable by using a default state variable, and assign the obtained data value to a corresponding element variable;
or modifying the value of the current default state variable so as to assign the modified data value to the corresponding element variable;
or directly finding element variables in the attribute file for assignment.
Further, step S42 is specifically to obtain a data value from the associated theme color basic variable by using the suspension state variable, and assign the obtained data value to the corresponding element variable;
or modifying the value of the current suspension state variable to assign the modified data value to the corresponding element variable;
or directly finding element variables in the attribute file for assignment.
A page element style customization apparatus comprising a processor, a memory and a communication bus;
the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the method for customizing a style of a page element as described above.
A computer readable storage medium storing one or more programs, the one or more programs being executable by one or more processors to implement the steps in the method for customizing a style of a page element as described above.
Compared with the prior art, the invention aims at quickly realizing the element effect of the customized page, the element attribute needing to be changed can be quickly positioned and the attribute effects of different elements can be modified in batches by defining the same attribute values of a plurality of elements in the same attribute file and carrying out unified management according to different attribute states, and the whole theme color change effect of the product page and the customized finer-grained element effect can be quickly realized.
Under the traditional theme customization scheme, when a certain attribute value of a plurality of elements is modified, related attributes need to be searched in different files and are modified one by one, but the method can quickly and correspondingly modify the corresponding variable value in the element only by modifying in one attribute file, the influence range of the theme color is visible, the content only needs to be modified in a small amount of files, and meanwhile, the test range does not need to be completely covered, so that the customization cost and the later maintenance difficulty are greatly reduced.
Drawings
FIG. 1 is a schematic flow diagram of the process of the present invention;
fig. 2 is a schematic flow chart of an application in the embodiment.
Detailed Description
The invention is described in detail below with reference to the figures and specific embodiments.
Examples
As shown in fig. 1, a method for customizing a style of a page element includes the following steps:
s1, determining basic variables of the theme color;
s2, determining the element file and the attribute state which need to be customized in the element file, wherein the attribute state comprises a default state and a suspension state;
s3, creating a corresponding attribute file based on the attribute needing to be customized in the element file;
defining corresponding variables in the attribute file based on attribute states needing to be customized in the element file, wherein the variables in the attribute file are associated with basic variables of the theme color, the attribute file comprises state variables and element variables corresponding to the state variables, and the state variables comprise default state variables and suspension state variables;
and S4, based on the user requirement, according to the attribute state needing to be customized in the element file, assigning the attribute in the element file by using the variable in the attribute file.
In step S4, the method specifically includes:
based on user requirements, assigning values to variables in the element file by using default state variables according to attribute default states in the element file:
acquiring a data value from the associated theme color basic variable by using a default state variable, and assigning the acquired data value to a corresponding element variable;
or modifying the value of the current default state variable so as to assign the modified data value to the corresponding element variable;
in addition, element variables can be directly found in the attribute file for assignment;
based on user requirements, according to the attribute suspension state in the element file, assigning values to variables in the element file by using suspension state variables:
acquiring a data value from the associated theme color basic variable by using the suspension state variable, and assigning the acquired data value to the corresponding element variable;
or modifying the value of the current suspension state variable to assign the modified data value to the corresponding element variable;
in addition, the element variables can be directly found in the attribute file to be assigned.
In this embodiment, the above method is applied to create two element files: an element 1 file and an element 2 file, and two attributes are set in the two element files respectively: attributes 1 and 2, by creating corresponding attribute files: the attribute 1 file and the attribute 2 file are used for realizing the rapid customization of the element 1 and the element 2, and a specific application process is shown in fig. 2 and comprises the following steps:
1. and designing basic variables of the theme color, and referring to the content of the theme color frame in FIG. 2.
2. The design requires customized properties, see FIG. 2 for Property 1 framework content within the element 1 file.
3. The state of the property is designed to be customized, see FIG. 2 Default state and hover state contents within property 1 within the element 1 file.
4. Creating an attribute file according to the attribute designed in the step 2, and defining a corresponding variable in the attribute file according to the state designed in the step 3, wherein the content of an attribute 1 file frame in the figure 2 is "$ default-color $ base-blue; "defines the basic variable of default state in the attribute 1 file," $ base-blue "is the basic variable defined by the theme color, therefore, the element variable" $ button-default-color "uses the" $ default-color "variable to assign a value; similarly, define the suspension state variable "$ hover-color" and assign "$ button-hover-color".
5. Creating an element file, and assigning values to the attributes in the element file according to the state by using the corresponding variables of the attribute file, as shown in the segment identifiers shown in the boxes 1 and 2 in fig. 2. Element 1 is a button element, which contains attribute 1: color, while this property 1 has two states: assigning values by using the "$ button-default-color" variable of the element button corresponding to the default state of the attribute 1 file;
assigning a value by using a variable "$ button-cover-color" of the suspension state corresponding element button of the attribute 1 file;
and similarly, creating an element 2 file and assigning variables.
6. And repeating the steps 2-4, creating an attribute 2 file, an element 1 file attribute 2 and an element 2 file attribute 2, and assigning the attributes in the element file by using the variables of the attribute 2.
7. After the above steps are completed, it can be seen that the variables of the theme color affect the default states of attribute 1 and attribute 2 as well as the hover state. When any basic color of the theme color is changed, the influence range can be clearly seen, and extra workload for realizing effect verification and influence range testing is not needed.
8. When the specific attribute needs to be customized, the basic variable can be changed in the corresponding attribute file. For example: when the default state of the color needs to be realized is red and the suspension state is yellow, directly assigning the basic variable "$ default-color" to red and "$ driver-color" to yellow in the attribute 1 file.
9. When the specific attribute of the specific element needs to be customized, the corresponding element variable can be found in the corresponding attribute file for assignment. For example: when the default state of the color attribute of the input needs to be realized is green, directly assigning a variable "$ input-default-color" as green in the attribute 1 file.
The embodiment also provides a page element style customizing device, which comprises a processor, a memory and a communication bus;
the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes the connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the page element style customization method as above.
The present embodiments also provide a computer-readable storage medium storing one or more programs, the one or more programs being executable by one or more processors to implement the steps in the method for customizing a style of a page element as described above.
In summary, the present invention provides a management method for batch updating multiple element specific effects and different state effects of specific element attributes based on the Sass management element effect, and the overall idea is to add a middleware between the theme color variable and the attribute variable for processing the mapping relationship therebetween, and to control the mapping relationship in the middleware to realize batch updating of the specific element effect.
The invention provides a method for supporting quick realization of customized element effect, which solves the problems of slow realization of element changing effect, large customized granularity and wide influence range.
Under the traditional theme customization scheme, when a certain attribute value of a plurality of elements is modified, related attributes need to be searched in different files and are modified one by one, but the method is modified in only one file, and along with the increase of the modified attribute value, the advantages of the method are more obvious, and the efficiency can be improved by more than 50%. When the theme color is modified, due to the fact that the theme color affects attribute values of a plurality of elements, the influence range of the theme color needs to be confirmed in a plurality of files during modification, omission easily occurs, the page presenting effect is greatly different from the expected page presenting effect, the theme color is used in a plurality of attribute values of a plurality of elements, the workload is very large, meanwhile, comprehensive coverage is needed during testing, and the workload brought by changing the theme color is exponentially increased along with the fact that the number of the theme colors is continuously increased and the number of components is continuously increased. By adopting the method, the theme color influence range is visible, the content only needs to be modified in a small amount of files, and the test range does not need to be completely covered, so that the effect is obvious.
Taking a customized theme as an example, the theme effect can be changed only by replacing the content of the theme color file; taking customized specific attributes as an example, modifying basic variables in a corresponding attribute file can be realized; taking the customized specific attribute of the specific element as an example, finding the corresponding element variable in the corresponding attribute file, and modifying the element variable.
When the effect is achieved, the modified content is less, the influence range is visible, the maintainability is high, fine-grained customization is supported, the working efficiency is greatly improved, and the implementation cost is reduced.
Claims (10)
1. A method for customizing a page element style is characterized by comprising the following steps:
s1, determining basic variables of the theme color;
s2, determining the element file and the attribute and attribute state of the element file needing to be customized;
s3, creating a corresponding attribute file based on the attribute needing to be customized in the element file;
defining corresponding variables in the attribute file based on the attribute state needing to be customized in the element file, wherein the variables in the attribute file are associated with the basic variables of the theme color;
and S4, based on the user requirement, according to the attribute state needing to be customized in the element file, assigning the attribute in the element file by using the variable in the attribute file.
2. The method for customizing the style of a page element according to claim 1, wherein the step S2 specifically comprises the steps of:
s21, determining the element file and the attribute to be customized in the element file;
and S22, determining the attribute state needing to be customized in the element file.
3. A method for customizing the style of a page element according to any one of claims 1 or 2, wherein the attribute states required to be customized in the element file comprise a default state and a floating state.
4. The method according to claim 1, wherein the property file contains a state variable and an element variable corresponding to the state variable.
5. The method for customizing the style of a page element according to claim 4, wherein the state variables comprise a default state variable and a floating state variable.
6. The method for customizing the style of a page element according to claim 5, wherein the step S4 specifically comprises the steps of:
s41, based on user requirements, according to the attribute default state in the element file, assigning values to the variables in the element file by using the default state variables, or directly finding the element variables in the attribute file to assign values;
and S42, based on user requirements, according to the attribute suspension state in the element file, assigning values to the variables in the element file by using the suspension state variables, or directly finding the element variables in the attribute file for assignment.
7. The method for customizing the style of a page element according to claim 6, wherein the step S41 is to specifically use a default state variable to obtain a data value from an associated theme color basic variable, and assign the obtained data value to a corresponding element variable;
or modifying the value of the current default state variable so as to assign the modified data value to the corresponding element variable;
or directly finding element variables in the attribute file for assignment.
8. The method for customizing the style of a page element according to claim 6, wherein the step S42 is to specifically use a suspension state variable to obtain a data value from an associated theme color basic variable, and assign the obtained data value to a corresponding element variable;
or modifying the value of the current suspension state variable to assign the modified data value to the corresponding element variable;
or directly finding element variables in the attribute file for assignment.
9. A page element style customization device comprising a processor, a memory and a communication bus;
the memory has stored thereon a computer readable program executable by the processor;
the communication bus realizes connection communication between the processor and the memory;
the processor, when executing the computer readable program, implements the steps in the method for customizing a style of a page element according to any one of claims 1 to 8.
10. A computer-readable storage medium storing one or more programs, the one or more programs being executable by one or more processors to perform the steps of the method for customizing a style of a page element according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110217429.6A CN113010167A (en) | 2021-02-26 | 2021-02-26 | Page element style customization method, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110217429.6A CN113010167A (en) | 2021-02-26 | 2021-02-26 | Page element style customization method, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113010167A true CN113010167A (en) | 2021-06-22 |
Family
ID=76386332
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110217429.6A Pending CN113010167A (en) | 2021-02-26 | 2021-02-26 | Page element style customization method, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113010167A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1637991A1 (en) * | 2004-09-15 | 2006-03-22 | Research In Motion Limited | Palette-based color selection within a user interface theme |
| US9626080B1 (en) * | 2013-12-19 | 2017-04-18 | EMC IP Holding Company LLC | Style configuration mode |
| CN107329747A (en) * | 2017-06-20 | 2017-11-07 | 福建中金在线信息科技有限公司 | A kind of method and device for generating multi-threaded pattern |
| CN108363574A (en) * | 2018-01-23 | 2018-08-03 | 平安普惠企业管理有限公司 | Front end method for customizing, device, terminal device and storage medium based on SDK |
| CN111061470A (en) * | 2019-12-02 | 2020-04-24 | 用友网络科技股份有限公司 | Theme customizing method, system and computer readable storage medium |
| CN111273894A (en) * | 2020-02-25 | 2020-06-12 | 政采云有限公司 | Page skin changing method, device, equipment and computer readable storage medium |
-
2021
- 2021-02-26 CN CN202110217429.6A patent/CN113010167A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1637991A1 (en) * | 2004-09-15 | 2006-03-22 | Research In Motion Limited | Palette-based color selection within a user interface theme |
| US9626080B1 (en) * | 2013-12-19 | 2017-04-18 | EMC IP Holding Company LLC | Style configuration mode |
| CN107329747A (en) * | 2017-06-20 | 2017-11-07 | 福建中金在线信息科技有限公司 | A kind of method and device for generating multi-threaded pattern |
| CN108363574A (en) * | 2018-01-23 | 2018-08-03 | 平安普惠企业管理有限公司 | Front end method for customizing, device, terminal device and storage medium based on SDK |
| CN111061470A (en) * | 2019-12-02 | 2020-04-24 | 用友网络科技股份有限公司 | Theme customizing method, system and computer readable storage medium |
| CN111273894A (en) * | 2020-02-25 | 2020-06-12 | 政采云有限公司 | Page skin changing method, device, equipment and computer readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108664245B (en) | Method and device for generating web page interface based on JSON self-description structure | |
| CN111045655B (en) | Page rendering method and device, rendering server and storage medium | |
| TW202141300A (en) | Page processing method, device, apparatus and storage medium | |
| RU2604431C2 (en) | Automated transformation of user interface object and code generation | |
| CN105511873B (en) | User interface control display method and device | |
| CN103108243B (en) | Television display screen parameter independence and the method upgraded and system thereof | |
| CN102043618B (en) | Method and device for controlling display style of window object | |
| CN110362307A (en) | Forms pages configuration method and server | |
| CN109388396A (en) | Page generation method, device, computer equipment and storage medium | |
| CN111078221B (en) | Page color theme switching method and device, storage medium and electronic equipment | |
| WO2016113914A1 (en) | Development assistance system | |
| CN110221899B (en) | User interface adjusting method, device and system | |
| US11151314B2 (en) | Extensible grid layout | |
| CN108920496A (en) | A kind of rendering method and device | |
| CN105701165A (en) | Browser mode switching method and switching device | |
| Desolda et al. | End-user composition of interactive applications through actionable UI components | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN113010167A (en) | Page element style customization method, equipment and storage medium | |
| CN111858595B (en) | Dynamic configuration method and system for electric power engineering examination record table | |
| WO2021168711A1 (en) | Compiling control method, compiling control apparatus and storage medium | |
| US20150370460A1 (en) | Business-to-business document user interface and integration design | |
| CN110532031A (en) | OEM display methods, electronic equipment and storage medium based on linux system | |
| CN115032901B (en) | Equipment control method and electronic equipment | |
| CN111078726B (en) | Operation method of data access layer, server and storage medium | |
| CN114064021A (en) | Hospital management platform customization method and device based on user requirements and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210622 |