Webpage configuration method and device

Abstract

The present disclosure provides a webpage configuration method and device, equipment, storage medium and computer program product, relates to the technical field of artificial intelligence, in particular to the technical field of deep learning, and can be applied to webpage configuration and the like. The specific implementation scheme is as follows: a target style token is acquired; the target style token is used to update a style token set, wherein the style token set is saved in a root node of a webpage; the updated style token set is used to perform style configuration on the webpage, so that a configured webpage is obtained. The efficiency of webpage configuration is improved.

Description

Technical Field

[0001] This disclosure relates to the field of artificial intelligence technology, specifically the field of deep learning technology, and can be applied to scenarios such as web page configuration. In particular, it relates to a web page configuration method, apparatus, device, storage medium, and computer program product. Background Technology

[0002] Currently, webpage configuration only allows for color adjustments, specifically background and inverted colors. Controls cannot be configured with different colors for different states (click, hover, etc.), nor can control attributes such as size and spacing be set. Furthermore, webpage configuration typically involves passing the settings to JavaScript, requiring multiple custom JavaScript implementations. This can easily cause webpage repaints, reflows, and style flickering, resulting in low configuration efficiency. Summary of the Invention

[0003] This disclosure provides a web page configuration method, apparatus, device, storage medium, and computer program product, which improves the efficiency of web page configuration.

[0004] According to one aspect of this disclosure, a webpage configuration method is provided, comprising: obtaining a target style token; updating a style token set using the target style token, wherein the style token set is stored in the root node of the webpage; and configuring the style of the webpage based on the updated style token set to obtain a configured webpage.

[0005] According to another aspect of this disclosure, a webpage configuration apparatus is provided, comprising: an acquisition module configured to acquire a target style token; an update module configured to update a style token set using the target style token, wherein the style token set is stored in the root node of the webpage; and a first configuration module configured to configure the style of the webpage based on the updated style token set to obtain a configured webpage.

[0006] According to another aspect of this disclosure, an electronic device is provided, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the web page configuration method.

[0007] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided that stores computer instructions, wherein the computer instructions are used to cause the computer to perform the webpage configuration method.

[0008] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the above-described webpage configuration method.

[0009] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0010] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0011] Figure 1 This is an exemplary system architecture diagram to which this disclosure can be applied;

[0012] Figure 2 This is a flowchart of an embodiment of the webpage configuration method according to the present disclosure;

[0013] Figure 3 This is a flowchart of another embodiment of the webpage configuration method according to the present disclosure;

[0014] Figure 4 This is a flowchart of yet another embodiment of the webpage configuration method according to the present disclosure.

[0015] Figure 5 This is a schematic diagram of a structure of an embodiment of a webpage configuration device according to the present disclosure;

[0016] Figure 6 This is a block diagram of an electronic device used to implement the webpage configuration method of the embodiments of this disclosure. Detailed Implementation

[0017] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0018] Figure 1 An exemplary system architecture 100 is shown that can be applied to embodiments of the web page configuration method or web page configuration apparatus disclosed herein.

[0019] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0020] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to obtain configured web pages, etc. Various client applications, such as web page style configuration applications, can be installed on terminal devices 101, 102, and 103.

[0021] Terminal devices 101, 102, and 103 can be either hardware or software. When terminal devices 101, 102, and 103 are hardware, they can be various electronic devices, including but not limited to smartphones, tablets, laptops, and desktop computers. When terminal devices 101, 102, and 103 are software, they can be installed in the aforementioned electronic devices. They can be implemented as multiple software programs or software modules, or as a single software program or software module. No specific limitations are made here.

[0022] Server 105 can provide various services based on obtaining the configured webpage. For example, server 105 can analyze and process the target style token obtained from terminal devices 101, 102, and 103, and generate processing results (such as obtaining the configured webpage).

[0023] It should be noted that server 105 can be either hardware or software. When server 105 is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When server 105 is software, it can be implemented as multiple software programs or software modules (e.g., used to provide distributed services), or as a single software program or software module. No specific limitations are made here.

[0024] It should be noted that the web page configuration method provided in this embodiment is generally executed by server 105, and correspondingly, the web page configuration device is generally set in server 105.

[0025] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0026] Continue to refer to Figure 2 The diagram illustrates a flow 200 of an embodiment of a webpage configuration method according to the present disclosure. The webpage configuration method includes the following steps:

[0027] Step 201: Obtain the target style token.

[0028] In this embodiment, the execution body of the webpage configuration method (e.g.) Figure 1The server 105 shown can obtain a target style token. This target style token is used to set the style of a webpage, specifying the target webpage style to be set and the specific value for that style. For example, the target style token specifies that the target webpage style to be set is the webpage's background color, and the specific value for that style is blue.

[0029] You can choose any webpage style and set a value for it as the target style token, or you can obtain a webpage configuration request, read the target webpage style and its setting value from the webpage configuration request, and use it as the target style token. This disclosure does not limit this.

[0030] Step 202: Update the style token set using the target style token, where the style token set is stored in the root node of the webpage.

[0031] In this embodiment, after obtaining the target style token, the executing entity can update the style token set using the target style token. Specifically, the style token set is stored in the root node of the webpage and can be read from the root node. The style token set contains multiple different style tokens, each specifying a webpage style to be set and its setting value. The target style token can be stored in the style token set, and then the multiple style tokens in the set are compared. If at least two style tokens specify the same webpage style, the storage times of the at least two style tokens are compared, and only the style token with the latest storage time is retained, while the other style tokens are deleted, resulting in an updated style token set.

[0032] Step 203: Configure the style of the webpage based on the updated style token set to obtain the configured webpage.

[0033] In this embodiment, after obtaining the updated set of style tokens, the executing entity can configure the style of the webpage based on the updated set of style tokens to obtain the configured webpage. Specifically, multiple style files can be written to configure the style of the webpage, and each style file can assign a specific value to a specified webpage style. When writing each style file, the updated set of style tokens can be obtained, the style token specifying the same webpage style can be found from the updated set of style tokens, the setting value of the webpage style can be read from the style token, and the value can be assigned to the corresponding style file. After all the style files are written, all the style files are applied, and the style of the webpage changes accordingly, resulting in the configured webpage.

[0034] The webpage configuration method provided in this disclosure first obtains a target style token, and then uses the target style token to update the style token set stored in the root node of the webpage. When configuring the style of the webpage based on the updated style token set, the target style token in the root node can be directly referenced, so that the configured webpage presents the target style, thereby improving the efficiency of webpage configuration.

[0035] Further reference Figure 3 This illustrates a flow 300 of another embodiment of a webpage configuration method according to the present disclosure. The webpage configuration method includes the following steps:

[0036] Step 301: Determine multiple configurable webpage styles.

[0037] In this embodiment, the aforementioned execution entity can determine multiple configurable webpage styles. Multiple webpage styles can be arbitrarily selected from a webpage as multiple configurable webpage styles, or the frequency of change of each webpage style over a period of time can be statistically compared, and multiple webpage styles with high change frequencies can be selected as multiple configurable webpage styles. This disclosure does not limit this approach.

[0038] A webpage style is a configurable element at the atomic level on a webpage. A webpage style can include color styles and control styles. For example, a webpage style can be a background color style or a control size style, and this disclosure does not limit it.

[0039] Step 302: Configure a style name and multiple candidate configuration values ​​for each webpage style, and determine an initial configuration value from the multiple candidate configuration values.

[0040] In this embodiment, after determining multiple configurable webpage styles, the execution entity can configure a style name and multiple candidate configuration values ​​for each webpage style, and determine an initial configuration value from the multiple candidate configuration values. Specifically, a style name can be configured for each webpage style. The style name can be a number, a letter, a Chinese character, or a combination of numbers, letters, and Chinese characters; this disclosure does not limit this. The minimum and maximum configurable values ​​for each webpage style can be calculated. For example, the minimum configurable value for each control size style can be a size that is visually distinguishable, and the maximum configurable value can be the maximum possible value for the size of each control, provided that the page size can fully accommodate all controls. Then, multiple intermediate values ​​are evenly selected between the minimum and maximum configurable values ​​for each webpage style. These multiple intermediate values, the minimum configurable value, and the maximum configurable value constitute multiple candidate configuration values ​​for a webpage style. After obtaining multiple candidate configuration values ​​for each webpage style, an initial configuration value can be determined from the multiple candidate configuration values ​​for each webpage style. Alternatively, a candidate configuration value can be randomly selected from the multiple candidate configuration values ​​as the initial configuration value for the corresponding webpage style, or the median value among the multiple candidate configuration values ​​can be selected as the initial configuration value for the corresponding webpage style. This disclosure does not limit this.

[0041] Step 303: Save the style name and initial configuration value of each webpage style as a style token to obtain a set of style tokens.

[0042] In this embodiment, after obtaining the style name and initial configuration value of each webpage style, the execution entity can save the style name and initial configuration value of each webpage style as a style token, thus obtaining a style token set. Specifically, a style token may include the style name and initial configuration value of a webpage style, and the style tokens of all configurable webpage styles constitute the style token set.

[0043] In some optional implementations of this embodiment, the style token set includes multiple color tokens and multiple control tokens; multiple color levels can be set for each of the multiple candidate configuration values ​​of each color token.

[0044] Specifically, a color token can configure the style of a type of color on a page. For example, a color token could be a background color token, used to configure the background color of the page, allowing it to be set to blue, green, or another color. A control token can configure the style of a type of attribute for all controls on the page. For example, a control token could be a control size token, used to configure the size of all controls on the page, ensuring that the size of all controls on the page is 12 pixels or another numerical value. Generally, a candidate configuration value for a style token is usually a single numerical value. However, for each color token, multiple color levels can be set for each candidate configuration value. These multiple color levels belong to the same color, differing only in brightness. For example, multiple color levels could all be green, including light green, medium green, dark green, and other shades of green. The multiple color levels for each candidate configuration value can be sorted according to brightness. For example, multiple color levels can be sorted from low to high brightness, and the sorted multiple color levels are determined as a candidate configuration value for the corresponding color token. By setting different color levels, controls can have different color changes in different states, improving the user experience.

[0045] In some optional implementations of this embodiment, the multiple color tokens include at least one of the following: theme color token, warning color token, error color token, and neutral color token; the multiple control tokens include at least one of the following: control spacing token, control height token, control line height token, control rounded corner token, control shadow token, font type token, font weight token, font size token, and webpage default baseline size token.

[0046] Specifically, the style name of the theme color token is theme color, and the multiple candidate configuration values ​​are multiple colors such as red, orange, yellow, green, cyan, blue, and purple. Each color includes ten color levels, and the initial configuration value of the theme color token is ten color levels of one of the colors red, orange, yellow, green, cyan, blue, and purple.

[0047] The style name of the warning color token is "Warning Color". Multiple candidate configuration values ​​are multiple colors such as red, orange, yellow, green, cyan, blue and purple. Each color includes ten color levels. The initial configuration value of the warning color token is ten color levels of one of the colors red, orange, yellow, green, cyan, blue and purple.

[0048] The style name of the error color token is "Error Color". Multiple candidate configuration values ​​are multiple colors such as red, orange, yellow, green, cyan, blue and purple. Each color includes ten color levels. The initial configuration value of the error color token is ten color levels of one of the colors red, orange, yellow, green, cyan, blue and purple.

[0049] The style name of the neutral color token is Neutral Color. The neutral color token has only one candidate configuration value, which is ten color levels from white to black. The initial configuration value of the neutral color token is ten color levels from white to black.

[0050] The style name of the control spacing token is Control Spacing. There are ten candidate configuration values: 4 pixels, 8 pixels...40 pixels. Each value is a multiple of 4. The initial configuration value of the control spacing token is one of the above ten values.

[0051] The style name of the control height token is control height. There are ten candidate configuration values: 4 pixels, 8 pixels...40 pixels. Each value is a multiple of 4. The initial configuration value of the control height token is one of the above ten values.

[0052] The style name of the control row height token is control row height. There are two candidate configuration values: 2 pixels and 4 pixels. The initial configuration value of the control row height token is one of the two values ​​mentioned above.

[0053] The style name of the control rounded corner token is Control Rounded Corners. There are six candidate configuration values: 0 pixels, 2 pixels...10 pixels. Each value is a multiple of 2. The initial configuration value of the control rounded corner token is one of the above six values. When the initial configuration value of the control rounded corner token is 0, it represents a right angle. The larger the value, the rounder the corner of the control.

[0054] The style name of the control shadow token is "Control Shadow". The multiple candidate configuration values ​​are multiple strings of numbers. The initial configuration value of the control shadow token is one of the multiple strings of numbers mentioned above.

[0055] The style name of the font type token is "Font Type". Multiple candidate configuration values ​​are various fonts such as Microsoft YaHei and SimSun. The initial configuration value of the font type token is one of the above fonts.

[0056] The style name of the weight token is "weight". The multiple candidate configuration values ​​are 400, 500 and 600. The larger the value, the thicker the font. The initial configuration value of the weight token is one of the three values ​​mentioned above.

[0057] The font size token's style name is "Font Size," and the multiple candidate configuration values ​​are 12 pixels, 14 pixels, and 16 pixels. The initial configuration value of the font size token is one of these three values.

[0058] The style name of the Webpage Default Base Size token is Webpage Default Base Size, which controls the size of each control relative to the page.

[0059] After obtaining the set of style tokens, the set of style tokens can be saved to the root node of the webpage. Specifically, steps 304-306 can be executed.

[0060] Step 304: Create style tags.

[0061] In this embodiment, after obtaining the set of style tokens, the executing entity can create style tags. Specifically, a style tag can be created based on a tag creation syntax.

[0062] Step 305: Convert the style token set into a string and assign it to the style tag.

[0063] In this embodiment, after obtaining the style tag, the execution entity can convert the style token set into a string and assign it to the style tag. Specifically, the style token set can be converted into a string based on an object-to-string conversion syntax. For example, an array can be created first, the style tokens in the style token set can be traversed, and the style names and initial configuration values ​​obtained from the traversal can be connected with an equal sign and placed in the newly created array. The values ​​in the array can then be concatenated with semicolons to form a string and returned, thus obtaining the string converted from the style token set. The string converted from the style token set is then assigned to the style tag.

[0064] Step 306: Save the style tags to the root node of the webpage.

[0065] In this embodiment, after obtaining the style tags, the executing entity can save the style tags to the root node of the webpage. Specifically, the style tags can be saved to the root node of the webpage based on a tag storage syntax.

[0066] Step 307: Obtain the target style token.

[0067] Step 308: Update the style token set using the target style token, where the style token set is stored in the root node of the webpage.

[0068] Step 309: Configure the style of the webpage based on the updated style token set to obtain the configured webpage.

[0069] In this embodiment, the specific operations of steps 307-309 have been described. Figure 2 Steps 201-203 in the illustrated embodiments are described in detail and will not be repeated here.

[0070] from Figure 3 It can be seen from this that, with Figure 2Compared to the corresponding embodiments, the webpage configuration method in this embodiment saves multiple webpage styles as a set of style tokens and pre-stores the set of style tokens in the root node, making it easier to configure the webpage by directly modifying the style tokens in the root node, thus improving the efficiency and convenience of webpage configuration; by setting multiple color levels for multiple candidate configuration values ​​for each color token, the control can present different brightness levels in different states, improving the user experience; by setting multiple control tokens, different control attributes can be configured based on different control tokens, realizing flexible configuration of controls and improving the flexibility of webpage configuration.

[0071] Further reference Figure 4 This illustrates a flow 400 of yet another embodiment of the webpage configuration method according to the present disclosure. The webpage configuration method includes the following steps:

[0072] Step 401: Determine multiple configurable webpage styles.

[0073] Step 402: Configure a style name and multiple candidate configuration values ​​for each webpage style, and determine an initial configuration value from the multiple candidate configuration values.

[0074] Step 403: Save the style name and initial configuration value of each webpage style as a style token to obtain a set of style tokens.

[0075] Step 404: Create style tags.

[0076] Step 405: Convert the style token set into a string and assign it to the style tag.

[0077] Step 406: Save the style tags to the root node of the webpage.

[0078] In this embodiment, the specific operations of steps 401-406 have been described. Figure 3 Steps 301-306 in the illustrated embodiments are described in detail and will not be repeated here.

[0079] Step 407: Obtain the target style token.

[0080] In this embodiment, the specific operation of step 407 has been described. Figure 2 Step 201 in the illustrated embodiment is described in detail and will not be repeated here.

[0081] It should be noted that the target style token includes a style name and a configuration value. The style name of the target style token is the same as the style name of a style token in the style token set, but the configuration value is different.

[0082] Step 408: Based on the style name of the target style token, determine the style token to be updated from the style token set.

[0083] In this embodiment, after obtaining the target style token, the executing entity can determine the style token to be updated from the style token set based on the style name of the target style token. Specifically, it can iterate through the style tokens in the style token set, compare the style name of the target style token with the style name of each style token in the style token set, and determine the style token with the same style name as the style token to be updated.

[0084] Step 409: Replace the style token to be updated with the target style token to obtain the updated set of style tokens.

[0085] In this embodiment, after obtaining the style token to be updated, the executing entity can replace the style token to be updated with the target style token to obtain an updated set of style tokens. Specifically, the configuration value of the target style token can be obtained, and the configuration value of the style token to be updated can be replaced with the configuration value of the target style token, while the style name of the style token to be updated remains unchanged, to obtain an updated style token. The style token to be updated in the style token set is then replaced with the updated style token to obtain an updated set of style tokens.

[0086] After obtaining the updated set of style tokens, the updated set of style tokens can be saved to the root node of the webpage. Specifically, steps 410-411 can be executed.

[0087] Step 410: Get the style tag from the root node.

[0088] In this embodiment, after obtaining the updated set of style tokens, the executing entity can retrieve style tags from the root node. Specifically, in step 406, the style tags have already been saved to the root node of the webpage; therefore, the style tags can be read directly from the root node of the webpage.

[0089] Step 411: Convert the updated set of style tokens into a string and assign it to the style tag.

[0090] In this embodiment, after obtaining the style tag, the execution entity can convert the updated style token set into a string and assign it to the style tag. Specifically, the updated style token set can be converted into a string based on an object-to-string conversion syntax. For example, an array can be created first, the style tokens in the updated style token set can be traversed, and the style names and configuration values ​​obtained from the traversal can be connected with an equal sign and placed in the newly created array. The values ​​in the array can then be concatenated with semicolons to form a string and returned, thus obtaining the string converted from the updated style token set. The string converted from the updated style token set is then used to replace the original string in the style tag.

[0091] Step 412: Obtain the target style token in the root node using the variable function of Cascading Style Sheets.

[0092] In this embodiment, after obtaining the updated style tag, the executing entity can retrieve the target style token in the root node through the variable functions of the Cascading Style Sheets (CSS). Specifically, when writing the style file, the style name of the target style token in the style tag of the root node can be referenced through the variable functions of the CSS.

[0093] Step 413: Configure the style of the webpage based on the target style token to obtain the configured webpage.

[0094] In this embodiment, the aforementioned execution entity can configure the style of the webpage based on the target style token to obtain the configured webpage. Specifically, the webpage has been pre-configured and multiple style files have been written. Each style file can set the style of a webpage. That is, by using a variable function of a Cascading Style Sheets (CSS) to reference the style name of a style token in the style tag of the root node, the configuration value corresponding to the style name can be returned. Based on the configuration value, the webpage is styled, and the webpage can display the style corresponding to the configuration value. When updating the webpage style, after obtaining the target style token and the updated style token set, the value of the style tag in the root node has already been replaced with the value of the updated style token set. Therefore, multiple pre-written style files can directly reference the corresponding style token in the updated style tag. If the variable function of Cascading Style Sheets (CSS) references an unupdated style token in the style tag, the corresponding page style remains unchanged. If the variable function of CSS references an updated style token in the style tag, i.e., the target style token, the variable function returns the updated configuration value. Based on this updated configuration value, the webpage is styled, and the webpage displays the style corresponding to the updated configuration value. The resulting configured webpage is the webpage updated based on the target style token.

[0095] In some optional implementations of this embodiment, in response to the webpage running in a preset browser, the configuration value of the target style token can be found; the style of the webpage can be configured based on the configuration value to obtain the configured webpage.

[0096] Specifically, when configuring webpage styles based on the updated set of style tokens, it's essential to first determine if the browser running the webpage is the default browser, where the default browser is Internet Explorer (IE). Since Cascading Style Sheets (CSS) variable functions are incompatible with IE, the CSS variable functions cannot be used to retrieve the configuration values ​​of style tokens within style tags when configuring webpage styles based on the updated set of style tokens. When updating the webpage style—that is, after obtaining the target style token and the updated set of style tokens—the values ​​of the style tags in the root node have already been replaced with the values ​​from the updated set of style tokens. If the webpage is running in the default browser, multiple style files can find the corresponding style token configuration values ​​from the updated style tags, and the webpage is configured based on these found values. If an outdated configuration value is found, the corresponding page style remains unchanged. If an updated configuration value is found, i.e., the configuration value of the target style token, the webpage displays the style corresponding to the target style token's configuration value. The resulting configured webpage is the webpage updated based on the target style token.

[0097] It should be noted that since each color token includes multiple color levels, the control can display different color levels and varying shades of color in clicked, hovered, and active states. The color levels displayed by the control in different states can be preset. For example, in the clicked state, the control displays the second color level with lower brightness; in the hovered state, it displays the fifth color level with medium brightness; and in the active state, it displays the ninth color level with higher brightness. When updating the colors of a webpage, for example, if the target style token is a background color token, and the webpage is styled based on this token, changing the background color from blue to green, the control will change from displaying different shades of blue to displaying different shades of green in different states.

[0098] from Figure 4 It can be seen from this that, with Figure 3Compared to the corresponding embodiments, the webpage configuration method in this embodiment can determine whether the browser is a preset browser. Different webpage configuration schemes are adopted depending on whether the browser is a preset browser or not, making the webpage configuration compatible with different browsers and improving the flexibility and compatibility of webpage configuration. By storing the style token set in the root node of the webpage, the variable functions based on Cascading Style Sheets directly reference the style tokens in the root node to configure the webpage, eliminating the need for backend calculations and achieving a one-click skinning effect, further improving the efficiency of webpage configuration. By directly replacing the style token to be updated in the style token set of the root node with the target style token, the webpage configuration can be changed more conveniently, further improving the efficiency of webpage configuration.

[0099] Further reference Figure 5 As an implementation of the above-mentioned webpage configuration method, this disclosure provides an embodiment of a webpage configuration device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0100] like Figure 5 As shown, the webpage configuration device 500 of this embodiment may include an acquisition module 501, an update module 502, and a first configuration module 503. The acquisition module 501 is configured to acquire a target style token; the update module 502 is configured to update a style token set using the target style token, wherein the style token set is stored in the root node of the webpage; and the first configuration module 503 is configured to configure the style of the webpage based on the updated style token set to obtain a configured webpage.

[0101] In this embodiment, the specific processing of the webpage configuration device 500 (acquisition module 501, update module 502, and first configuration module 503) and the resulting technical effects can be found in the following references: Figure 2 The relevant descriptions of steps 201-203 in the corresponding embodiments will not be repeated here.

[0102] In some optional implementations of this embodiment, the target style token includes a style name and a configuration value; the update module 502 includes: a determining submodule, configured to determine the style token to be updated from the style token set based on the style name of the target style token; a replacing submodule, configured to replace the style token to be updated with the target style token to obtain an updated style token set; and a first saving submodule, configured to save the updated style token set to the root node of the webpage.

[0103] In some optional implementations of this embodiment, the first saving submodule includes: an acquisition unit configured to acquire style tags from the root node; and an assignment unit configured to convert the updated set of style tokens into a string and assign it to the style tag.

[0104] In some optional implementations of this embodiment, the first configuration module 503 includes: an acquisition submodule, configured to acquire the target style token in the root node through a variable function of the Cascading Style Sheets; and a configuration submodule, configured to configure the style of the webpage based on the target style token to obtain the configured webpage.

[0105] In some optional implementations of this embodiment, the configuration submodule includes: a lookup unit configured to look up the configuration value of the target style token in response to the webpage running in a preset browser; and a configuration unit configured to configure the style of the webpage based on the configuration value to obtain the configured webpage.

[0106] In some optional implementations of this embodiment, before the acquisition module, the web page configuration device 500 further includes: a determination module configured to determine a plurality of configurable web page styles; a second configuration module configured to configure a style name and a plurality of candidate configuration values ​​for each web page style, and determine an initial configuration value from the plurality of candidate configuration values; a first storage module configured to store the style name and initial configuration value of each web page style as a style token, thereby obtaining a set of style tokens; and a second storage module configured to store the set of style tokens in the root node of the web page.

[0107] In some optional implementations of this embodiment, the second saving module includes: a creation submodule configured to create style tags; an assignment submodule configured to convert the style token set into a string and assign it to the style tag; and a second saving submodule configured to save the style tag to the root node of the webpage.

[0108] In some optional implementations of this embodiment, the style token set includes multiple color tokens and multiple control tokens; the web page configuration device 500 further includes: a third configuration module, configured to set multiple color levels for each of the multiple candidate configuration values ​​of the color token.

[0109] In some optional implementations of this embodiment, the multiple color tokens include at least one of the following: theme color token, warning color token, error color token, and neutral color token; the multiple control tokens include at least one of the following: control spacing token, control height token, control line height token, control rounded corner token, control shadow token, font type token, font weight token, font size token, and webpage default baseline size token.

[0110] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0111] Figure 6 A schematic block diagram of an example electronic device 600 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0112] like Figure 6 As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded from storage unit 608 into random access memory (RAM) 603. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0113] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, such as keyboard, mouse, etc.; output unit 607, such as various types of monitors, speakers, etc.; storage unit 608, such as disk, optical disk, etc.; and communication unit 609, such as network card, modem, wireless transceiver, etc. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0114] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as the web page configuration method. For example, in some embodiments, the web page configuration method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the web page configuration method described above may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform the web page configuration method by any other suitable means (e.g., by means of firmware).

[0115] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0116] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0117] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0118] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0119] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0120] Computer systems can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be servers in distributed systems or servers incorporating blockchain technology. Servers can also be cloud servers, or intelligent cloud computing servers or intelligent cloud hosts with artificial intelligence technology.

[0121] It should be understood that the various forms of processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0122] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A webpage configuration method, comprising: obtaining a target style token; updating a style token set with the target style token, wherein the style token set is saved in a root node of a webpage, the style token set comprises a plurality of style tokens, and each style token comprises a style name and a configuration value; styling the webpage based on the updated style token set to obtain a configured webpage, comprising: referencing the style name of the target style token in the root node by a variable function of a cascading style sheet to obtain the corresponding configuration value, and styling the webpage based on the configuration value; wherein the style token set comprises a plurality of color tokens and a plurality of control tokens, the color tokens are used to style a type of color of the webpage, the control tokens are used to style a type of attribute of all controls of the webpage, the configuration value of each color token sets a plurality of color scales, and the plurality of color scales are used to make the same color token present different colors with different brightness in different states of the controls.

2. The method of claim 1, wherein, The updating of the style token set with the target style token comprises: determining a style token to be updated from the style token set based on the style name of the target style token; replacing the style token to be updated with the target style token to obtain the updated style token set; and saving the updated style token set to the root node of the webpage.

3. The method of claim 2, wherein, The saving of the updated style token set to the root node of the webpage comprises: obtaining a style label from the root node; converting the updated style token set into a string, and assigning the string to the style label.

4. The method of claim 3, wherein, The referencing of the style name of the target style token in the root node by the variable function of the cascading style sheet to obtain the corresponding configuration value comprises: in response to the webpage running in a preset browser, referencing the style name of the target style token in the root node by the variable function of the cascading style sheet to find the configuration value of the target style token.

5. The method of claim 4, wherein, Before the obtaining of the target style token, the method further comprises: determining a plurality of configurable webpage styles; configuring a style name and a plurality of candidate configuration values for each of the webpage styles, and determining an initial configuration value from the plurality of candidate configuration values; saving the style name and the initial configuration value of each of the webpage styles as a style token to obtain the style token set; and saving the style token set to the root node of the webpage.

6. The method of claim 5, wherein, The saving of the style token set to the root node of the webpage comprises: creating the style label; converting the style token set into a string, and assigning the string to the style label; saving the style label to the root node of the webpage.

7. The method of claim 1, wherein: the plurality of color tokens comprise at least one of a theme color token, a warning color token, an error color token, and a neutral color token; the plurality of control tokens comprise at least one of a control spacing token, a control height token, a control line height token, a control corner radius token, a control shadow token, a font type token, a font weight token, a font size token, and a webpage default baseline size token.

8. A web page configuration apparatus, comprising: an obtaining module configured to obtain a target style token; an updating module configured to update a style token set with the target style token, wherein the style token set is saved in a root node of a web page, the style token set comprises a plurality of style tokens, and each style token comprises a style name and a configuration value; a first configuration module configured to perform style configuration on the web page based on the updated style token set, to obtain a configured web page, comprising: referencing a style name of the target style token in the root node by a variable function of a cascading style sheet, to obtain a corresponding configuration value, and performing style configuration on the web page; wherein the style token set comprises a plurality of color tokens and a plurality of control tokens, the color tokens perform style configuration on a type of color of a page, the control tokens perform style configuration on a type of attribute of all controls of the page, a plurality of color scales are set for the configuration value of each color token respectively, and the plurality of color scales are used to make the same color token present different brightness colors in different states of a control.

9. The apparatus of claim 8, wherein, the updating module comprises: a determining submodule configured to determine a style token to be updated from the style token set based on the style name of the target style token; a replacing submodule configured to replace the style token to be updated with the target style token, to obtain the updated style token set; a first saving submodule configured to save the updated style token set into the root node of the web page.

10. The apparatus of claim 9, wherein, the first saving submodule comprises: an obtaining unit configured to obtain a style label from the root node; an assignment unit configured to convert the updated style token set into a string, and assign the string to the style label.

11. The apparatus of claim 10, wherein, the first configuration module is further configured to, in response to the web page running in a preset browser, reference the style name of the target style token in the root node by a variable function of a cascading style sheet, to find the configuration value of the target style token.

12. The apparatus of claim 11, wherein, Before the obtaining module, the apparatus further comprises: a determining module configured to determine a plurality of configurable web page styles; a second configuration module configured to configure a style name and a plurality of candidate configuration values for each of the web page styles, and determine an initial configuration value from the plurality of candidate configuration values; a first saving module configured to save the style name and the initial configuration value of each of the web page styles as a style token, to obtain the style token set; a second saving module configured to save the style token set into the root node of the web page.

13. The apparatus of claim 12, wherein, the second saving module comprises: a creating submodule configured to create the style label; an assignment submodule configured to convert the style token set into a string, and assign the string to the style label; a second saving submodule configured to save the style label into the root node of the web page.

14. The apparatus of claim 8, wherein the plurality of color tokens comprise at least one of the following: a theme color token, a warning color token, an error color token, and a neutral color token. The plurality of control tokens comprises at least one of: a control spacing token, a control height token, a control line height token, a control corner radius token, a control shadow token, a font type token, a font weight token, a font size token, a web default baseline size token.

15. An electronic device, comprising: at least one processor; and a memory communicatively connected with the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-7.

16. A non-transitory computer readable storage medium having stored thereon computer instructions, wherein, The computer instructions are for causing the computer to perform the method of any one of claims 1-7.

17. A computer program product comprising a computer program which, when executed by a processor, implements the method of any one of claims 1-7.

Images