A webpage generation method and device, electronic equipment and storage medium
By configuring the primary color parameter in the Cascading Style Sheets (CSS) of the webpage template, and constructing the document tree and CSS object model tree, the problem of not being able to adjust the primary color of the promotion page in the existing technology is solved. This allows operators to adjust the primary color of the webpage independently, reducing the configuration costs for operations and developers.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-26
- Publication Date
- 2026-03-03
AI Technical Summary
Existing promotional page generation platforms do not support modifying the main color scheme of web pages, making it impossible to adjust the main color scheme of promotional pages for different product positioning according to needs.
By configuring the primary color scheme parameters in the Cascading Style Sheets (CSS) of a webpage template, a document tree and a CSS object model tree are constructed to generate the target webpage, thus enabling the modification of the webpage's primary color scheme.
Operations staff can independently adjust the main color scheme of the promotional page, reducing the cost of configuration coordination between operations and developers, and improving the flexibility and consistency of the webpage style.
Smart Images

Figure CN117271934B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer technology, and in particular to a webpage generation method, apparatus, electronic device, and storage medium. Background Technology
[0002] Currently, existing product promotion pages can be automatically generated using the platform. Operators only need to add product-related text and images to the template to obtain promotion pages provided by the same template for different software.
[0003] However, because different products have different positioning, the main color scheme of the corresponding promotional page is also different. But the current promotional page generation platform does not support modifying the main color scheme of the webpage. Whatever the main color scheme of the template is, that is the main color scheme of the promotional page. Summary of the Invention
[0004] In view of this, embodiments of the present invention provide a webpage generation method, apparatus, electronic device, and storage medium, which can realize the modification of the main color scheme of promotional webpages.
[0005] In a first aspect, embodiments of the present invention provide a webpage generation method, comprising: loading and displaying a webpage template in response to a webpage template loading instruction; configuring the main color scheme configuration parameters in a Cascading Style Sheets (CSS) in response to a main color scheme configuration parameter input on the webpage template; parsing the document content of the webpage template and constructing a document tree in response to a webpage generation instruction; parsing the CSS of the webpage template and constructing a CSS Object Model (CSS) tree; creating a rendering tree based on the document tree and the CSS object model tree; and generating a target webpage based on the rendering tree.
[0006] Optionally, configuring the main color configuration parameter in the Cascading Style Sheet in response to the main color configuration parameter input on the web page template includes: configuring the main color configuration parameter in the Cascading Style Sheet in response to the main color configuration parameter input at a specified position on the web page template.
[0007] Optionally, configuring the main color scheme parameter in the Cascading Style Sheet includes: configuring the main color scheme parameter between the style start tag and the style end tag before the header end tag of the web page template.
[0008] Optionally, the main color configuration parameters include at least one of the following parameters: webpage background color value, text color value, and button color value.
[0009] Optionally, before parsing the Cascading Style Sheets (CSS) of the webpage template and constructing the CSS object model tree, the method further includes: configuring the first color value in the CSS in response to a first color value of a specified element on the webpage template entered at a specified position on the webpage template.
[0010] Optionally, generating the target webpage based on the rendering tree includes: determining the current state of the specified element based on a Cascading Style Sheets pseudo-class selector; determining the current state color of the specified element based on the current state of the specified element and the first color value; and rendering the specified element based on the current state color of the specified element.
[0011] Optionally, determining the current state color of the specified element based on its current state and the first color value includes: determining whether the first color value is the color value of the current state of the specified element; if yes, then using the first color value as the color value of the current state of the specified element; if no, then increasing or decreasing the first color value by at least one gradient color value as the color value of the current state of the specified element.
[0012] Secondly, embodiments of the present invention also provide a webpage generation apparatus, comprising: a first loading module, configured to load and display a webpage template in response to a webpage template loading instruction; a first configuration module, configured to configure the main color scheme configuration parameters input on the webpage template in a Cascading Style Sheets (CSS); a first construction module, configured to parse the document content of the webpage template and construct a document tree in response to a webpage generation instruction; a second construction module, configured to parse the CSS of the webpage template and construct a CSS object model tree; a first creation module, configured to create a rendering tree based on the document tree and the CSS object model tree; and a first generation module, configured to generate a target webpage based on the rendering tree.
[0013] Optionally, the first configuration module is specifically used to configure the main color configuration parameter in the Cascading Style Sheet in response to the main color configuration parameter entered at a specified position on the web page template.
[0014] Optionally, the first configuration module is specifically used to configure the main color scheme parameter between the style start tag and the style end tag before the header end tag of the web page template.
[0015] Optionally, the main color configuration parameters include at least one of the following parameters: webpage background color value, text color value, and button color value.
[0016] Optionally, the apparatus further includes: a color value configuration module, configured to configure the first color value in the Cascading Style Sheet (CSS) in response to a first color value of a specified element on the webpage template input at a specified position on the webpage template before parsing the CSS of the webpage template and constructing the CSS object model tree.
[0017] Optionally, the first generation module includes: a state determination submodule, used to determine the current state of the specified element based on the Cascading Style Sheets pseudo-class selector; a color determination submodule, used to determine the current state color of the specified element based on the current state of the specified element and the first color value; and a rendering submodule, used to render the specified element based on the current state color of the specified element.
[0018] Optionally, the color determination submodule is specifically used to determine whether the first color value is the color value of the current state of the specified element; if yes, then the first color value is used as the color value of the current state of the specified element; if no, then the first color value is increased or decreased by at least one gradient color value and used as the color value of the current state of the specified element.
[0019] Thirdly, the present invention also provides an electronic device comprising: a housing, a processor, a memory, a circuit board, and a power supply circuit, wherein the circuit board is disposed within the space enclosed by the housing, and the processor and the memory are disposed on the circuit board; the power supply circuit is used to supply power to various circuits or devices of the electronic device; the memory is used to store executable program code; the processor runs a program corresponding to the executable program code by reading the executable program code stored in the memory, for executing any of the webpage generation methods described in the first aspect.
[0020] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing one or more programs, which can be executed by one or more processors to implement the webpage generation method described in any of the first aspects.
[0021] This invention provides a webpage generation method, apparatus, electronic device, and storage medium. It utilizes a webpage template, adds configuration parameters to the Cascading Style Sheets (CSS) of the template to modify the webpage's main color scheme, further constructs a document tree and a CSS object model tree, and creates a rendering tree based on the document tree and CSS object model tree. This generates a target main color scheme webpage by configuring the main color scheme, enabling the modification of the main color scheme of promotional webpages. Attached Figure Description
[0022] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0023] Figure 1 This is a schematic diagram of a webpage generation method according to an embodiment of the present invention;
[0024] Figure 2 This is a schematic diagram of the architecture of a webpage generation device according to an embodiment of the present invention;
[0025] Figure 3 This is a schematic block diagram illustrating the architecture of an embodiment of the electronic device of the present invention. Detailed Implementation
[0026] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.
[0027] It should be understood that the described embodiments are merely some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.
[0028] Key terms:
[0029] Button three states:
[0030] The button has different appearances in different states, typically including the following three states:
[0031] 1: Normal State: The default state of the button when it is not clicked or hovered, which usually displays a normal appearance.
[0032] 2: Hover State: The state when the mouse hovers over the button. It usually displays an effect that changes the brightness or saturation to indicate to the user that the button can be clicked.
[0033] 3: Active State: The state of the button when it is clicked. It usually displays the effect of pressing the button to inform the user that the button has been clicked.
[0034] Website main color scheme:
[0035] This refers to the primary color used on a webpage, typically to highlight important elements, enhance visual appeal, and build brand image. Setting a primary color scheme for a webpage can make the overall style of the website or application more unified and attractive.
[0036] CSS (Cascading Style Sheets):
[0037] Cascading Style Sheets (CSS) is a style sheet language used to describe how HTML or XML (including XML fork languages such as SVG, MathML, or XHTML) documents should be rendered. CSS describes how elements should be rendered on screen, print, audio, and other media.
[0038] CSS pseudo-class selectors:
[0039] These are selectors used to select specific states or positions of elements. They begin with a colon (:) and can be appended at the end of the selector. The CSS pseudo-class selectors for hover and active states are:
[0040] 1. :hover: Used to select the state when the mouse hovers over an element.
[0041] 2. :active: Used to select the state when an element is active (when the mouse is pressed).
[0042] Example 1
[0043] Figure 1 For the webpage generation method provided in the embodiments of the present invention, see [link to documentation]. Figure 1 As shown, the method includes:
[0044] S110. In response to the webpage template loading instruction, load and display the webpage template.
[0045] Specifically, a typical webpage includes HTML, CSS, and JavaScript. HTML, or HyperText Markup Language, is a standard markup language used to create webpages. HTML is responsible for the structure of the three components of a webpage, using tags to identify different parts. CSS, or Cascading Style Sheets, defines how HTML elements are displayed and controls the appearance of the webpage. CSS is responsible for the presentation of the three components, and styles are usually stored in external .css files. We only need to edit a simple CSS document to change the layout and appearance of all pages. JavaScript, or Scripting Language (JS), is a lightweight programming language used to control the behavior of webpages. JavaScript is responsible for the behavior of the three components and can be inserted into HTML pages. Once inserted, JavaScript can be executed by all modern browsers.
[0046] In this step, the webpage template of this embodiment has already set the overall framework content of the webpage, that is, the document content has been set. Operators can directly open these templates to apply them. In actual application, after the operator clicks to open the template, the operation platform will load the template. In response to the operator's webpage template loading instruction, the platform loads and displays the webpage template for the operator to operate.
[0047] S120. In response to the main color configuration parameter entered on the web page template, configure the main color configuration parameter in the Cascading Style Sheet.
[0048] Optionally, in one embodiment of the present invention, the main color configuration parameter includes at least one of the following parameters: webpage background color value, text color value, and button color value.
[0049] Specifically, the main color scheme of a webpage is reflected in the background color, text color, button color, etc. The operators can modify the main color scheme of the webpage template according to the positioning of different promotional software, and configure the color scheme parameters to be added in the Cascading Style Sheets (CSS) of the template file; while the main color scheme of the promotional webpage is generally obtained by the web designer from the most common color values used by the official website of different software or the internal interface of the software. The operators only need to configure the specific hexadecimal color value code in the template, such as white: #FFFFFF; black: #000000.
[0050] S130. In response to the webpage generation instruction, parse the document content of the webpage template and construct a document tree.
[0051] In this step, after configuring the main color scheme parameters, the HTML document content is read and parsed based on the webpage generation instructions. Bytes are converted into characters to determine tokens (tags), and then the tokens are converted into nodes to build the Document Tree (DOM).
[0052] S140. Parse the Cascading Style Sheets (CSS) of the webpage template and construct the CSS object model tree.
[0053] S150. Based on the document tree and the Cascading Style Sheets Object Model tree, create a rendering tree.
[0054] S160. Based on the rendering tree, generate the target webpage.
[0055] Furthermore, during the construction of the Document Tree (DOM), when a `<link>` tag is encountered within the `<head>` tag of the HTML document, this tag references an external CSS stylesheet. Anticipating the need to utilize this CSS resource for page rendering, the browser immediately requests that CSS resource and constructs the Cascading Style Sheets Object Model (CSSDOM). This CSSDOM is built by parsing the primary color scheme configuration parameters entered in the webpage template. Combining the Document Tree (DOM) and the CSSDOM, a render tree is generated. Based on the render tree, the layout of each visible element is calculated and output to the rendering process, rendering the pixels onto the screen to generate the target webpage.
[0056] This invention provides a webpage generation method that adds configuration parameters to the Cascading Style Sheet (CSS) of a webpage template to modify the main color scheme of the webpage. This allows operators to modify the main color scheme of promotional webpages, reducing their operational costs and eliminating the configuration costs required from developers.
[0057] Optionally, in one embodiment of the present invention, configuring the main color configuration parameter in a Cascading Style Sheet in response to the main color configuration parameter input on the web page template includes: configuring the main color configuration parameter in a Cascading Style Sheet in response to the main color configuration parameter input at a specified position on the web page template.
[0058] In this embodiment, when operators generate promotional web pages using web page templates, they can input the desired main color configuration parameters at a specified location on the web page template. For example, if there is a main color configuration entry in the template, the desired color number, #FFFFFF, can be entered in the configuration entry. In response to the input main color configuration color value parameter, the main color configuration color value parameter is configured in the Cascading Style Sheet.
[0059] Optionally, in one embodiment of the present invention, configuring the main color scheme parameter in the Cascading Style Sheet includes: configuring the main color scheme parameter between the style start tag and the style end tag before the header end tag of the web page template.
[0060] Specifically, before configuring the main color scheme of a webpage according to an embodiment of the present invention, the CSS styles of elements affecting the main color scheme are placed before the closing `<head>` tag using the `style` tag. Thus, when configuring color values, the main color scheme color value parameters are configured between the `style` start tag and `style` end tag before the closing `<head>` tag of the webpage template. Using the color values configured by the platform referenced in the webpage template, color values are set for most elements of the webpage in batches, such as the background color, text color, and button color values. Simultaneously, for elements with three states, such as buttons, CSS pseudo-class selectors can be used to configure the corresponding styles between the `style` start tag and `style` end tag before the closing `<head>` tag of the webpage template. Only the color value for the normal state needs to be configured; the brightness and saturation of the normal state color value are changed using the HSL color model to obtain the color values for other states, thus realizing the configuration of color values for three-state elements.
[0061] Optionally, in one embodiment of the present invention, before parsing the Cascading Style Sheets (CSS) of the webpage template and constructing the CSS object model tree, the method further includes: configuring the first color value in the CSS in response to a first color value of a specified element on the webpage template input at a specified position on the webpage template.
[0062] In this embodiment, before parsing the CSS document and constructing the CSS Object Model Tree (CSSOM), in response to the first color value that needs to be configured for a specified element (such as a button or text) in the web page template, which is entered in the configuration entry on the web page template, the first color value is configured in the Cascading Style Sheets (CSS). After the configuration is completed, the Document Tree (DOM) and the Cascading Style Sheets Object Model Tree (CSSDOM) are merged to create a new rendering tree. In this rendering tree, each node has its own style information, indicating its position on the screen and how it is displayed.
[0063] Optionally, in one embodiment of the present invention, generating a target webpage based on the rendering tree includes: determining the current state of the specified element based on a Cascading Style Sheets pseudo-class selector; determining the current state color of the specified element based on the current state of the specified element and the first color value; and rendering the specified element based on the current state color of the specified element.
[0064] In this embodiment, if the specified element is a text or webpage background element without three states, it is only necessary to render these elements according to the set first color value. However, for some elements with three states, such as buttons, the current state of the button is determined based on the Cascading Style Sheets pseudo-class selector. Based on the current state of the button and the first color value, the current state color of the button is determined and the button in the current state is rendered.
[0065] Optionally, in one embodiment of the present invention, determining the current state color of the specified element based on the current state of the specified element and the first color value includes: determining whether the first color value is the color value of the current state of the specified element; if yes, then using the first color value as the color value of the current state of the specified element; if no, then increasing or decreasing the first color value by at least one gradient color value as the color value of the current state of the specified element.
[0066] Furthermore, for elements with three states, such as buttons, this embodiment of the invention, when configuring color values, first determines whether the first color value is the color value of its current state; if so, the first color value is used as the color value of its current state; if not, the first color value is increased or decreased by at least one gradient color value, which is then used as the color value of the specified element's current state. Specifically, the process involves converting the hexadecimal color value of the first color value to an HSL color and modifying the saturation and brightness components in the HSL. Generally, the first color value is increased or decreased by at least one gradient component; for example, the initial color (normal state) HSL components are (120%, 70%, 50%), the hover state HSL components are (120%, 50%, 30%), and the active state is (120%, 100%, 70%).
[0067] This invention provides a webpage generation method. In response to a webpage template loading instruction, a webpage template is loaded and displayed; in response to a primary color scheme configuration parameter input on the webpage template, the primary color scheme configuration parameter is configured in a Cascading Style Sheets (CSS); in response to a webpage generation instruction, the document content of the webpage template is parsed to construct a document tree; the CSS of the webpage template is parsed to construct a CSS object model tree; a rendering tree is created based on the document tree and the CSS object model tree; and a target webpage is generated based on the rendering tree. In this way, by configuring a parameter in the CSS of the webpage template that allows modification of the webpage's primary color scheme, operators can easily modify the primary color scheme of promotional webpages, reducing operational costs and eliminating the configuration costs required from developers.
[0068] Example 2
[0069] Figure 2 A webpage generation apparatus provided in an embodiment of the present invention, see below. Figure 2 As shown, it includes:
[0070] The first loading module 21 is used to load and display the web page template in response to the web page template loading instruction;
[0071] The first configuration module 22 is configured to configure the main color configuration parameters in the Cascading Style Sheet in response to the main color configuration parameters input on the web page template.
[0072] The first construction module 23 is used to respond to the webpage generation instruction, parse the document content of the webpage template, and construct a document tree;
[0073] The second construction module 24 is used to parse the cascading style sheets of the web page template and construct a cascading style sheet object model tree;
[0074] The first creation module 25 is used to create a rendering tree based on the document tree and the Cascading Style Sheets Object Model tree;
[0075] The first generation module 26 is used to generate a target webpage based on the rendering tree.
[0076] Optionally, in one embodiment of the present invention, the first configuration module is specifically configured to configure the main color configuration parameter in the Cascading Style Sheet in response to the main color configuration parameter input at a specified position on the web page template.
[0077] Optionally, in one embodiment of the present invention, the first configuration module is specifically used to configure the main color configuration parameter between the style start tag and the style end tag before the header end tag of the web page template.
[0078] Optionally, in one embodiment of the present invention, the main color configuration parameter includes at least one of the following parameters: webpage background color value, text color value, and button color value.
[0079] Optionally, in one embodiment of the present invention, the apparatus further includes: a color value configuration module, configured to configure the first color value in the Cascading Style Sheet (CSS) in response to a first color value of a specified element on the webpage template input at a specified position on the webpage template before parsing the CSS of the webpage template and constructing the CSS object model tree.
[0080] Optionally, in one embodiment of the present invention, the first generation module includes: a state determination submodule, configured to determine the current state of the specified element based on a Cascading Style Sheets pseudo-class selector; a color determination submodule, configured to determine the current state color of the specified element based on the current state of the specified element and the first color value; and a rendering submodule, configured to render the specified element based on the current state color of the specified element.
[0081] Optionally, in one embodiment of the present invention, the color determination submodule is specifically used to determine whether the first color value is the color value of the current state of the specified element; if yes, then the first color value is used as the color value of the current state of the specified element; if no, then the first color value is increased or decreased by at least one gradient color value and used as the color value of the current state of the specified element.
[0082] The apparatus in this embodiment can be used to execute the technical solution of the method shown in Embodiment 1. Its implementation principle and technical effect are similar, and will not be described again here.
[0083] Example 3
[0084] Figure 3 This is a schematic block diagram of the architecture of an embodiment of the electronic device of the present invention. Based on the same technical concept as the aforementioned embodiment one, the electronic device provided by the present invention, as shown in Figure 3, can implement the steps and flow of any of the embodiments described in embodiment one of the present invention.
[0085] The aforementioned electronic device may include: a housing 31, a processor 32, a memory 33, a circuit board 34, and a power supply circuit 35, wherein the circuit board 34 is disposed inside the space enclosed by the housing 31, and the processor 32 and the memory 33 are disposed on the circuit board 34; the power supply circuit 35 is used to supply power to the various circuits or devices of the aforementioned electronic device; the memory 33 is used to store executable program code; the processor 32 runs the program corresponding to the executable program code by reading the executable program code stored in the memory 33, for executing any of the web page generation methods described in the aforementioned embodiment one.
[0086] For details on the specific execution process of the above steps by the processor 32 and the steps further executed by the processor 32 by running executable program code, please refer to the description of Embodiment 1 of the present invention, which will not be repeated here.
[0087] The electronic device exists in various forms, including but not limited to:
[0088] (1) Mobile communication devices: These devices are characterized by their mobile communication capabilities and primarily aim to provide voice and data communication. These terminals include: smartphones (e.g., iPhones), multimedia phones, feature phones, and low-end phones, etc.
[0089] (2) Ultra-mobile personal computer devices: These devices fall under the category of personal computers, possessing computing and processing capabilities, and generally also have mobile internet access features. These terminals include PDAs, MIDs, and UMPCs, such as the iPad.
[0090] (3) Portable entertainment devices: These devices can display and play multimedia content. This category includes: audio and video players (such as iPods), handheld game consoles, e-books, as well as smart toys and portable car navigation devices.
[0091] (4) Server: A device that provides computing services. The components of a server include a processor, hard disk, memory, system bus, etc. Servers are similar to general computer architectures, but because they need to provide highly reliable services, they have higher requirements in terms of processing power, stability, reliability, security, scalability, and manageability.
[0092] (5) Other electronic devices with data interaction functions.
[0093] Example 4
[0094] This invention also provides a computer-readable storage medium storing one or more programs that can be executed by one or more processors to implement the webpage generation method described in any of the preceding embodiments.
[0095] In summary, embodiments of the present invention provide a webpage generation method, apparatus, electronic device, and storage medium. Responding to a webpage template loading instruction, a webpage template is loaded and displayed; responding to a primary color scheme configuration parameter input on the webpage template, the primary color scheme configuration parameter is configured in a Cascading Style Sheets (CSS); responding to a webpage generation instruction, the document content of the webpage template is parsed to construct a document tree; the CSS of the webpage template is parsed to construct a CSS Object Model (OOM) tree; based on the document tree and the CSS OMM tree, a rendering tree is created; and based on the rendering tree, a target webpage is generated. Thus, by configuring a parameter in the CSS of the webpage template that allows modification of the webpage's primary color scheme, operators can easily modify the primary color scheme of promotional webpages, reducing operational costs and eliminating the configuration costs required from developers.
[0096] Furthermore, based on the primary color tone, it enables the setting of three-state color values for elements that require three states, even when the operator only provides a normal color value.
[0097] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0098] The various embodiments in this specification are described in a related manner. For the same or similar parts between the various embodiments, please refer to each other. Each embodiment focuses on describing the differences from other embodiments.
[0099] For ease of description, if systems, servers, etc. are involved, they may be described separately as various units / modules based on their functions. Of course, in implementing this invention, the functions of each unit / module can be implemented in one or more software and / or hardware.
[0100] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.
[0101] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.
Claims
1. A method of generating a web page, characterized by, The method comprises the following steps: in response to a webpage template loading instruction, loading and displaying a webpage template; in response to a main color configuration parameter input on the webpage template, configuring the main color configuration parameter in a cascading style sheet; wherein the main color configuration parameter comprises at least one of the following parameters: a webpage background color value, a text color value, and a button color value; in response to a webpage generation instruction, parsing a document content of the webpage template to build a document tree; parsing a cascading style sheet of the webpage template to build a cascading style sheet object model tree; based on the document tree and the cascading style sheet object model tree, creating a rendering tree; based on the rendering tree, generating a target webpage; before the loading and displaying of the webpage template, placing a cascading style sheet style defining a main color before a head end tag through a style tag; the response to the main color configuration parameter input on the webpage template and the configuration of the main color configuration parameter in the cascading style sheet comprise: in response to the main color configuration parameter input at a specified position on the webpage template, configuring the main color configuration parameter in the cascading style sheet; before the parsing of the cascading style sheet of the webpage template and the building of the cascading style sheet object model tree, the method further comprises: in response to a first color value of a specified element on the webpage template input at a specified position on the webpage template, configuring the first color value in the cascading style sheet; the generation of the target webpage based on the rendering tree comprises: determining a current state of the specified element based on a cascading style sheet pseudo-class selector; determining a current state color of the specified element based on the current state of the specified element and the first color value; rendering the specified element based on the current state color of the specified element; wherein the current state comprises a normal state, a hover state, or an active state, and the current state color is obtained by adjusting saturation and brightness components of the first color value in an HSL color model.
2. The web page generation method of claim 1, wherein, the configuration of the main color configuration parameter in the cascading style sheet comprises: configuring the main color configuration parameter between a style start tag and a style end tag before a head end tag of the webpage template.
3. The web page generation method of claim 1, wherein, the determination of the current state color of the specified element based on the current state of the specified element and the first color value comprises: judging whether the first color value is a color value of the current state of the specified element; if yes, taking the first color value as the color value of the current state of the specified element; if no, increasing or decreasing at least one gradient color value from the first color value to obtain a color value of the current state of the specified element.
4. A web page generating apparatus characterized by comprising: The method comprises the following steps: a first loading module for loading and displaying a webpage template in response to a webpage template loading instruction; a first configuration module for configuring a main color configuration parameter in a cascading style sheet in response to the main color configuration parameter input on the webpage template; wherein the main color configuration parameter comprises at least one of the following parameters: a webpage background color value, a text color value, and a button color value; The first construction module is configured to parse document content of the web page template and construct a document tree in response to a web page generation instruction. The second construction module is configured to parse Cascading Style Sheets of the web page template and construct a Cascading Style Sheets object model tree. The first creation module is configured to create a rendering tree based on the document tree and the Cascading Style Sheets object model tree. The first generation module is configured to generate a target web page based on the rendering tree. The first pre-module is configured to place a Cascading Style Sheets style defining a primary color before a head end tag via a style tag before the web page template is loaded and displayed. The first configuration module is specifically configured to configure a primary color configuration parameter in the Cascading Style Sheets in response to the primary color configuration parameter input at a specified position on the web page template. The device further includes a color value configuration module configured to configure a first color value of a specified element on the web page template in the Cascading Style Sheets in response to the first color value input at the specified position on the web page template before the Cascading Style Sheets of the web page template is parsed and the Cascading Style Sheets object model tree is constructed. The first generation module includes: A state determination submodule configured to determine a current state of the specified element based on a Cascading Style Sheets pseudo-class selector. A color determination submodule configured to determine a current state color of the specified element based on the current state of the specified element and the first color value. A rendering submodule configured to render the specified element based on the current state color of the specified element.
5. The web page generation device according to claim 4, wherein The first configuration module is specifically configured to configure the primary color configuration parameter between a style start tag and a style end tag before a head end tag of the web page template.
6. The web page generation apparatus according to claim 4, wherein The color determination submodule is specifically configured to determine whether the first color value is a color value of the current state of the specified element. If yes, the first color value is taken as the color value of the current state of the specified element. If no, the first color value is increased or decreased by at least one gradient color value to be taken as the color value of the current state of the specified element.
7. An electronic device, comprising: The electronic device includes a housing, a processor, a memory, a circuit board, and a power circuit, wherein the circuit board is arranged inside a space enclosed by the housing, and the processor and the memory are arranged on the circuit board; the power circuit is configured to supply power to each circuit or device of the electronic device; the memory is configured to store executable program codes; and the processor is configured to run programs corresponding to the executable program codes by reading the executable program codes stored in the memory, and execute the web page generation method according to any one of claims 1 to 3.
8. A computer-readable storage medium, characterized in that, The computer readable storage medium stores one or more programs executable by one or more processors to implement the web page generation method according to any one of claims 1 to 3.
Citation Information
Patent Citations
A web page setting method and device
CN108984632A
Webpage rendering method and device
CN114238819A
Page color processing method and device, storage medium and electronic device
CN114840794A