Webpage editing method and device, terminal and storage medium

Abstract

The invention discloses a webpage editing method and device, a terminal and a storage medium, and relates to the technical field of computers. The method comprises the steps of obtaining form setting data in response to an operation for starting webpage template setting; according to the form setting data, loading and displaying at least one form in the template setting interface; in response to an editing operation for the at least one form, obtaining user setting data, the user setting data being setting data of a user for the webpage template; template setting data is generated according to the user setting data, and the template setting data is used for generating a webpage template. The embodiment of the invention can be applied to scenes such as cloud technology and smart traffic. According to the embodiment of the invention, the user setting data is automatically obtained through the form, and then the template setting data is generated according to the user setting data, so that a user does not need to carry out secondary development of the webpage template on a code level, the secondary development difficulty of the webpage template is reduced, and the secondary development efficiency of the webpage template is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a webpage editing method, device, terminal and storage medium. Background Art

[0002] With the development of computer technology, users, enterprises, organizations, institutions, etc. have more and more demands for website production. Among them, web page editing plays an important role in website production.

[0003] In the related art, developers provide fixed web page templates to customers for them to edit. For example, each web page of a website is provided with a set of fixed web page templates, and customers edit the web pages in sequence to obtain the website. Since the web pages edited by each customer are all the same and have a fixed style, many customers perform secondary development on the web page templates at the code level, and the efficiency of secondary development of web page templates is not high. Summary of the invention

[0004] The embodiments of the present application provide a webpage editing method, device, terminal and storage medium, which can improve the secondary development efficiency of webpage templates. The technical solution is as follows:

[0005] According to one aspect of an embodiment of the present application, a webpage editing method is provided, the method comprising:

[0006] In response to an operation for opening a webpage template setting, obtaining form setting data;

[0007] According to the form setting data, at least one form is loaded and displayed in the template setting interface;

[0008] In response to an editing operation on the at least one form, acquiring user setting data, wherein the user setting data refers to setting data of the user for the webpage template;

[0009] Template setting data is generated according to the user setting data, and the template setting data is used to generate a web page template.

[0010] According to one aspect of an embodiment of the present application, a webpage editing device is provided, the device comprising:

[0011] A form data acquisition module, used to acquire form setting data in response to an operation for opening a webpage template setting;

[0012] A form loading and displaying module, used to load and display at least one form in the template setting interface according to the form setting data;

[0013] A user data acquisition module, configured to acquire user setting data in response to an editing operation on the at least one form, wherein the user setting data refers to setting data of the user for the webpage template;

[0014] The template data generating module is used to generate template setting data according to the user setting data, and the template setting data is used to generate a web page template.

[0015] According to one aspect of an embodiment of the present application, a terminal device is provided, the terminal device comprising a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement the above-mentioned web page editing method.

[0016] According to one aspect of an embodiment of the present application, a computer-readable storage medium is provided, in which a computer program is stored. The computer program is loaded and executed by a processor to implement the above-mentioned web page editing method.

[0017] According to one aspect of the embodiments of the present application, a computer program product is provided, the computer program product comprising a computer program, the computer program being stored in a computer-readable storage medium. A processor of a terminal device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, so that the terminal device executes the above-mentioned webpage editing method.

[0018] The technical solution provided by the embodiments of the present application may have the following beneficial effects:

[0019] By obtaining the user's setting data for the webpage template through at least one form, and then generating the template setting data for generating the webpage template according to the user setting data, the webpage template can be customized, so that the user has more webpage templates for webpage editing, thereby improving the personalization of webpage editing. At the same time, since there is no need to set the webpage template at the code level, the customization and development difficulty of the webpage template are reduced, thereby improving the customization efficiency and development efficiency of the webpage template, especially when the user has a secondary development demand for the webpage template. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0021] Figure 1 It is a schematic diagram of an implementation environment of a solution provided by an embodiment of the present application;

[0022] Figure 2 is a schematic diagram of a website template operation system provided by an embodiment of the present application;

[0023] Figure 3 It is a schematic diagram of the internal interaction of the website template operation system provided by an embodiment of the present application;

[0024] Figure 4 is a flow chart of a webpage editing method provided by an embodiment of the present application;

[0025] Figure 5 is a schematic diagram of a template setting interface provided by an embodiment of the present application;

[0026] Figure 6 is a schematic diagram of a form provided by an embodiment of the present application;

[0027] Figure 7 is a schematic diagram of a form provided by another embodiment of the present application;

[0028] Figure 8 is a flow chart of a webpage editing method provided by another embodiment of the present application;

[0029] Fig. 9 is a schematic diagram of an editor provided by an embodiment of the present application;

[0030] Fig.10 is a schematic diagram of a custom module provided by an embodiment of the present application;

[0031] Fig.11 This is a schematic diagram of web page style customization provided by an embodiment of the present application;

[0032] Fig.12 is a schematic diagram of head navigation editing provided by an embodiment of the present application;

[0033] Fig.13 is a schematic diagram of web page editing provided by an embodiment of the present application;

[0034] Fig.14 This is a schematic diagram of bottom navigation editing provided by an embodiment of the present application;

[0035] Fig.15 is a schematic diagram of a web page provided by an embodiment of the present application;

[0036] Fig.16 is a block diagram of a web page editing device provided by an embodiment of the present application;

[0037] Fig.17 is a block diagram of a web page editing device provided by another embodiment of the present application;

[0038] Fig.18 This is a block diagram of a terminal device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0039] Before introducing the embodiments of the present application, the relevant terms involved in the present application are first explained.

[0040] 1. EJS (Embedded JavaScript Templates)

[0041] It is a simple template engine that can be used to dynamically render data on a web page, such as generating HTML (Hyper Text Mark-up Language) pages on the client and server through JavaScript. The EJS engine can also specify the location of various data on the page.

[0042] 2. Dynamic Form

[0043] Dynamic forms are forms created programmatically when the front-end is running. Controls in the form can be added or deleted dynamically according to different needs. The corresponding control type and structure can be modified according to user input or other conditions. Dynamic forms can be used for data collection.

[0044] 3. Web page editing

[0045] Web page editing is a process of filling, modifying, adding, deleting, etc. web page elements on a web page. Web page editing in the embodiment of the present application may refer to the process of a user filling, modifying, adding, deleting, etc. web page elements on a web page template provided by a designer.

[0046] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0047] Cloud technology refers to a hosting technology that unifies hardware, software, network and other resources within a wide area network or local area network to achieve data computing, storage, processing and sharing.

[0048] Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, application technology, etc. based on the cloud computing business model. It can form a resource pool, which can be used on demand and is flexible and convenient. Cloud computing technology will become an important support. The backend services of the technical network system require a large amount of computing and storage resources, such as video websites, picture websites and more portal websites. With the rapid development and application of the Internet industry, in the future, each item may have its own identification mark, which needs to be transmitted to the backend system for logical processing. Data of different levels will be processed separately. All kinds of industry data need strong system backing support, which can only be achieved through cloud computing.

[0049] The technical solution provided in the embodiment of the present application relates to private cloud technology in cloud technology. Private cloud is a technology that creates cloud infrastructure and software and hardware resources within a firewall so that various departments within an organization or enterprise can share resources in a data center. In addition to hardware resources, creating a private cloud generally also requires cloud equipment (IaaS, Infrastructure as a Service) software.

[0050] Please refer to Figure 1 , which shows a schematic diagram of a solution implementation environment provided by an embodiment of the present application. The implementation environment can be implemented as a website template operation system, and the solution implementation environment may include: a first terminal device 10, a first server 20, a second terminal device 30 and a second server 40.

[0051] The above-mentioned website template operation system refers to a system for website management, which can be used for web page editing, web page display, web page operation, web page maintenance, web page viewing, web page template customization, web page style customization, etc., and the present application embodiment does not limit this. For example, enterprises, institutions, organizations, etc. can use the website template operation system to perform operations such as official website construction, official website operation, official website maintenance, official website display, and official website viewing.

[0052] Optionally, the website template operation system can be deployed in a private cloud (such as a private cloud leased by an enterprise), wherein the first terminal device 10 and the second terminal device 30 can be set as terminal devices in the private cloud, and the first server 20 and the second server 40 can be set as servers in the private cloud.

[0053] The first terminal device 10 may be an electronic device such as a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, a smart home appliance, a multimedia player, a PC (Personal Computer), an intelligent robot, a vehicle terminal, a wearable device, etc. The terminal device 10 may be installed with a first client, which may refer to a client such as a web page editing application, a website editing application, and any application with a web page editing function, which is not limited in the present embodiment of the application. The first client may be used for web page editing and web page template setting.

[0054] For example, reference Figure 2 , the first client in the first terminal device 10 can be implemented as an editor 202, then the first terminal device 10 corresponds to Figure 2 The front end 201 in the editor 202. The editor 202 can be used for web page editing, web page template customization and web page style customization. Among them, web page template customization refers to the process of users developing web page templates through the editor 202. The web page template can be used to indicate the architecture of the web page. It can be a pre-designed, reusable web page design, such as web page layout, color, font, image and interactive elements. Web page style customization can refer to the process of users setting web page styles through the editor 202. The web page style can refer to the specifications of the web page, which can be used to indicate the external expression of the web page, such as web page theme, mode, etc.

[0055] Optionally, the editor 202 has a preview function, that is, in addition to providing an interactive channel for users, the front end 201 can also be used to display the results of the user's operations on the editor 202, such as custom-generated web page templates, edited web pages, custom-set web page styles, etc.

[0056] The first server 20 is used to provide background services for the client of the target application (such as a web page editing application) in the first terminal device 10. For example, the first server 20 can be the background server of the target application (such as a web page editing application). The first server 20 can be a server corresponding to a private cloud system, which can be used to provide background services for business pages in the client, such as authority verification services, resource provision services, resource storage services, etc. The first server 20 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and basic cloud computing services such as big data and artificial intelligence platforms, which are not limited in this embodiment of the present application.

[0057] Optionally, the website template operation system may further include a database, and the database communicates with the first server 20 via a network. Figure 2 The web page data, template setting data, etc. generated by the user through the editor 202 in the front end 201 can be saved in the database.

[0058] The second terminal device 30 may be an electronic device such as a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, a smart home appliance, a multimedia player, a PC, a smart robot, a vehicle terminal, a wearable device, etc. A second client may be installed in the second terminal device 30, and the second client may refer to a client such as a browser application, a social entertainment application, a simulation learning application, and any application with a page display function, which is not limited in the present embodiment of the application. The second client may be used to display a web page.

[0059] For example, reference Figure 2 , the target application in the second terminal device 30 can implement the browser 203, then the second terminal device 30 corresponds to Figure 2 The front end 204 in the browser 203. The browser 203 can be used to obtain the web page data generated by the editor 202. The browser 203 saves the web page data and generates a web page according to the web page data. The browser 203 finally displays the web page to the user through the display screen of the front end 204.

[0060] The second server 40 is used to provide background services for the client of the target application (such as a browser application) in the second terminal device 30. The second server 40 can be a server corresponding to a private cloud system, which can be used to provide background services for the business pages in the client, such as permission verification services, resource provision services, resource storage services, etc. The second server 40 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0061] The first terminal device 10 and the first server 20 can communicate with each other through a network, the second terminal device 30 and the second server 40 can communicate with each other through a network, and the first server 20 and the second server 40 can communicate with each other through a network. The network can be a wired network or a wireless network.

[0062] In one example, reference Figure 3 , the internal interaction process of the above website template operation system can be as follows:

[0063] The first client 10 generates web page data in response to the user completing page editing; or, the first client 10 generates template setting data in response to the user completing web page template customization; or, the first client 10 generates theme setting data in response to the user completing style customization.

[0064] The first client 10 sends the page data or template setting data or theme setting data to the first server 20, and the first server 20 writes these data into the database.

[0065] The first server 20 generates a URL (Uniform Resource Location) corresponding to the web page data according to the storage location of the web page data in the database, and sends the URL to the first client 10 so that the user can obtain the URL.

[0066] The second server 40 will periodically pull web page data from the first server 30 to store it in the second server 40. When the second client 30 receives an access operation to the URL, it sends a web page data acquisition request to the second server 40 to acquire the web page data corresponding to the URL from the second server 40, and the second client 30 displays the web page according to the web page data.

[0067] Below, the technical solution provided by this application will be introduced and explained through method embodiments.

[0068] Please refer to Figure 4 , which shows a flowchart of a webpage editing method provided by an embodiment of the present application. The execution subject of each step of the method can be Figure 1 For the first terminal device 10 in the implementation environment of the solution shown, such as a client in the first terminal device 10, the method may include the following steps (401-404).

[0069] Step 401, in response to an operation for opening a web page template setting, obtaining form setting data.

[0070] The above operation for opening the webpage template setting may be referred to as the template setting opening operation, which is used to trigger the webpage template customization process. In the webpage template customization process, the user can customize and redevelop the webpage template according to their own needs (such as webpage architecture, webpage layout, etc.) to generate a customized webpage template. The customized webpage template can be used for webpage editing.

[0071] For example, Figure 2 Take the editor 202 in the example. When the fixed webpage template provided by the editor 202 cannot meet the business needs of the enterprise, the webpage operator of the enterprise can use the editor 202 to build a custom webpage template, and then use the custom webpage template to edit the webpage to generate the official website corresponding to the enterprise. Among them, the fixed webpage template can refer to the webpage template built by the designer at the code level for users to edit the webpage.

[0072] Optionally, a main interface corresponding to the editor 202 displays a plurality of setting options, including a web page template setting option. In response to a user triggering operation on the web page template setting option, the editor 202 obtains form setting data.

[0073] For example, refer to Figure 5 The user is editing a web page through the web page editing interface 500. The user can select a generated custom web page template 502 for web page editing, or select a fixed web page template for editing. If neither meets the user's needs, the user can trigger the web page template setting option 501 to start the web page template customization process to develop a custom web page template online.

[0074] The above-mentioned form setting data is used to render and display the form, which may refer to the code of the form created by the designer in a programmatic manner, such as Java language code. The form setting data may be pre-written by the designer. For example, the designer writes the form setting data according to the requirements in the web page template development process. For different requirements, the designer may use different form templates. After the form setting data is written, the designer deploys it in the editor, and the editor may render and display the form according to the form setting data.

[0075] Step 402: load and display at least one form in the template setting interface according to the form setting data.

[0076] The form is used for data collection, such as the form in the embodiment of the present application can be used to obtain the user's setting data for the webpage template. Exemplarily, the user can input the setting data through the form fields and form controls of the form, and the form can obtain the setting data through the form fields and form controls.

[0077] Optionally, the form fields of the form may include at least one of the following: a text box, a password box, a hidden field, a multi-line text box, a check box, a radio button, a drop-down selection box, and a file upload box. The form controls of the form may include at least one of the following: a submit control, a reset control, and a general control.

[0078] In the embodiment of the present application, the form may refer to a dynamic form, that is, during the front-end operation, the form items may automatically change depending on the business logic set by the designer.

[0079] The template setting interface refers to a user interface for customizing a web page template, and the template setting interface can be used to display the at least one form.

[0080] In one example, the form setting data includes a form data model and an initial value. The form data model is used to indicate the code architecture of the form. The display process of the form may also include the following contents:

[0081] 1. The client loads and displays at least one form based on the form data model and initial value.

[0082] Optionally, the client may load the entire form according to the form data model (schema) and initial values ​​(referred to as initialValues) corresponding to the form data model.

[0083] 2. The client loads and displays the first form field in the form according to the first form path.

[0084] The first form field may refer to any form field in the form, and the first form path may be used to indicate the position of the setting data corresponding to the first form field in the form setting data.

[0085] Optionally, the client can also load a specified form field in the form through a form path for editing, thereby improving the loading flexibility of the form.

[0086] Step 403: in response to the editing operation on at least one form, obtaining user setting data, where the user setting data refers to the user's setting data for the webpage template.

[0087] Optionally, the user may edit the form fields in the form to input setting data, and the client extracts the setting data from the form fields in response to a triggering operation on a submit control in the form, and determines the setting data as user setting data.

[0088] In one example, a form can be constructed according to a template data model, which is used to indicate the code architecture of a webpage template, such as setting the form according to corresponding template configuration parameters in the template data model. Exemplarily, the model configuration parameters include at least one of the following: identification information, label information, type, a first parameter for indicating whether it is a data type, a second parameter for indicating whether it is required, and a default value. Then, form fields or form controls can be set in the form in accordance with the above identification information, label information, type, first parameter, second parameter, default value, etc.

[0089] The user setting data may include setting data corresponding to each model configuration parameter, for example, the user setting data may include at least one of setting data such as identification information, tag information, type, first parameter, second parameter, default value, etc. corresponding to the webpage template. The setting data of the identification information is used to determine the value of the identification information, and the setting data of the first parameter is used to determine the value of the first parameter.

[0090] For example, taking the template data model of JavaScript as an example, the template data model can be expressed as follows:

[0091]

[0092]

[0093] Among them, Key is identification information, Name is name information, Type is type, Required is the first parameter, and IsArray is the second parameter. The embodiment of the present application supports custom complex types. Each time a complex type is defined, a unique key is automatically generated and saved. Optionally, the complex type can be selected by the name of the complex type.

[0094] In one example, user setting data of multiple web page templates can be obtained through a form. Alternatively, user setting data of a web page template can be obtained through a form. Alternatively, a template configuration parameter can be obtained through a form field, which is not limited in the present embodiment of the application.

[0095] For example, refer to Figure 6 , the user setting data corresponding to the template data models 1, 2, c, d, e and color can be obtained through form 600. For another example, refer to Figure 7 , the user setting data corresponding to the template data model a can be obtained through form 700.

[0096] Optionally, when a user edits a form field, an onValueChange method is triggered, thereby obtaining the setting data corresponding to the form field in real time, and further realizing real-time update of the user setting data.

[0097] Step 404: Generate template setting data according to the user setting data, and the template setting data is used to generate a web page template.

[0098] In the embodiment of the present application, the template setting data may refer to code data, such as code data in Java language, based on which a web page template may be generated.

[0099] In one example, the process of generating template setting data may be as follows:

[0100] 1. According to the user setting data, obtain the model configuration parameters, where the model configuration parameters include at least one of the following: identification information, tag information, type, a first parameter for indicating whether it is a data type, a second parameter for indicating whether it is required, and a default value.

[0101] Optionally, the setting data of the identification information is directly determined as the value of the identification information, the setting data of the tag information is directly determined as the value of the tag information, the setting data of the type is directly determined as the value of the type, the setting data of the first parameter is directly determined as the value of the first parameter, the setting data of the second parameter is directly determined as the value of the second parameter, and the setting data of the default value is directly determined as the default value.

[0102] 2. Update the model configuration parameters into the template data model to generate template setting data; wherein the template data model is used to indicate the code architecture of the web page template.

[0103] Optionally, by assigning corresponding variables in the template setting data according to the model configuration parameters, complete template setting data can be obtained, and the client can render and display the corresponding web page template based on the template setting data.

[0104] Optionally, the above process can be implemented by an EJS engine. After dynamically acquiring user setting data, the EJS engine automatically acquires model configuration parameters according to the user setting data, and inserts the model configuration parameters into the template data model to generate template setting data. The template setting data can also be generated by the EJS engine as a name file of a web page template, a description file of a web page template, an EJS file, a JS (JavaScript) file, and a CSS (Cascading Style Sheets) file to be saved in a database. Among them, the EJS file can refer to the template setting data, the JS file can refer to the template data model, and the CSS file can be used to indicate the web page style.

[0105] Different from the fixed web page template development process performed by designers at the code level, the embodiment of the present application is based on dynamic forms and EJS engine, which can realize the WYSIWYG custom web page template development process, thereby effectively improving the secondary development efficiency of web page templates.

[0106] In one example, a style root node is defined in the template data model, and the style root node is used to define the webpage style, that is, the user can customize the webpage style through the style root node. Then, the embodiment of the present application may also include the following content:

[0107] 1. Traverse and query the first declaration function, which is used to define the color value.

[0108] Optionally, the first declaration function may be a CSS function, which may be used to define a color (ie, a color value) of at least one theme mode.

[0109] For example, a hyperlink-style code can be expressed as follows:

[0110] a{

[0111] color:cc(GBK05A);

[0112] };

[0113] Among them, cc() is the first declaration function, GBK05A is a set of color values, which includes the colors in the two theme modes of Light mode (#646464) and Dark mode (#808080).

[0114] 2. When it is found that the first declaration function exists, color configuration data is obtained from the first declaration function, the color configuration data including the color value configured by the user; and theme setting data is constructed according to the color configuration data, the theme setting data being used to indicate the theme of the webpage.

[0115] Optionally, if there is a cc function (the first declaration function), read the color group configuration (i.e., color configuration data), evaluate the cc function through the color value, and get two colors, corresponding to the Light theme mode and the Dark theme mode respectively, compile the colors in the CSS in situ into the Light theme mode color values, and write the Dark theme mode color values ​​to the style root node.

[0116] 3. Add theme setting data to the attribute selector in the style root node.

[0117] For example, in the style root node, add the attribute selector data-theme = 'dark', which represents the dark theme mode, and add the a tag with a color value style of #808080 to achieve global attribute addition, then:

[0118]

[0119] Optionally, the above process can be implemented through the postcss plug-in of Webpack, which is a tool for compiling CSS. The postcss plug-in receives a CSS file and provides a plug-in mechanism to provide users with the ability to analyze and modify CSS rules. For example, the postcss plug-in can generate a CSS file corresponding to the web page template based on the above style root node. The user can modify the CSS file by defining a first declaration function, thereby realizing the customization of the web page style. Optionally, the color value corresponding to the first declaration function can be obtained through a dynamic form, that is, the user can define the first declaration function through a dynamic form.

[0120] Among them, the process of traversing and querying the first declaration function through the postcss plug-in can be expressed as follows:

[0121] new RegExp(`\\b${cc}\\(([^)]+)\\)`, 'g'). Among them, cc is the first declared function.

[0122] In summary, the technical solution provided by the embodiment of the present application obtains the user's setting data for the web page template through at least one form, and then generates the template setting data for generating the web page template according to the user setting data, so that the web page template can be customized, thereby allowing the user to have more web page templates for web page editing, thereby improving the personalization of web page editing. At the same time, since there is no need to set the web page template at the code level, the customization difficulty and development difficulty of the web page template are reduced, thereby improving the customization efficiency and development efficiency of the web page template, especially when the user has a secondary development demand for the web page template.

[0123] In addition, by supporting web page style customization, the customization level of web page editing is improved, thereby improving the personalization level of web pages.

[0124] In addition, since there is no need to manually write code to achieve secondary development of web page templates, compared with manual writing and entry, it solves the problem of errors easily caused by manual processing, thereby improving the accuracy of template setting data and saving labor costs in the secondary development process of web page templates.

[0125] Please refer to Figure 8 , which shows a flowchart of a webpage editing method provided by another embodiment of the present application. The execution subject of each step of the method can be Figure 1 For the first terminal device 10 in the implementation environment of the solution shown, such as a client in the first terminal device 10, the method may include the following steps (801-804).

[0126] Step 801, in response to an operation for starting web page editing, displaying a web page editing interface, where the web page editing interface is used for web page editing.

[0127] The above operation for starting web page editing can be called a web page editing start operation, which is used to trigger the web page editing process. In the web page editing process, the user can select a web page template, edit the web page content, edit the web page header navigation, edit the web page bottom navigation, etc. according to their own needs to build a complete web page. Among them, the editing of web page content refers to the process of setting web page elements by the user through the client under the constraints of the web page template.

[0128] For example, Figure 2 For example, the editor 202 in FIG. 202 has multiple setting options displayed in the main interface corresponding to the editor 202, including a web page editing option. In response to the user's triggering operation on the web page editing option, the editor 202 displays the web page editing interface. Optionally, the web page editing option can be used to create a new web page or to adjust an existing web page.

[0129] The webpage editing interface may refer to a user interface provided by the client in the first terminal device 10 , which may be used to receive a user's editing operation on a webpage and display a result of the editing operation.

[0130] Optionally, the web page editing interface in the initial state may be a blank page, or may display an initial web page having a default web page template, which is not limited in the embodiment of the present application.

[0131] Step 802, in response to an operation for selecting a web page template, obtains template setting data corresponding to a first web page template from a web page template database, and displays the first web page template in a web page editing interface; wherein the web page template library includes fixed web page templates and custom web page templates, the custom web page templates are custom generated by the user through a template setting interface, and the fixed web page templates are provided by a designer.

[0132] Optionally, when the default webpage template meets the user's needs, the user can directly edit the webpage under the constraints of the default webpage template; when the default webpage template does not meet the user's needs, the user can select a webpage template from the webpage template database to edit the webpage. The webpage template database is used to store template setting data corresponding to the webpage template.

[0133] Optionally, during the development process of the client, the designer can generate template setting data corresponding to the fixed web page template through the EJS engine, and store it in the web page template database. Alternatively, when receiving a web page template customization requirement from a customer, the designer can generate template setting data corresponding to the customization requirement through the EJS engine, and store it in the web page template database for user use. Alternatively, when a customer has a web page template customization requirement, the user can customize the template setting data required through the template setting interface of the client, and store it in the web page template database for use in subsequent page editing, which is not limited in this embodiment of the present application.

[0134] The first webpage template may refer to a webpage template selected by a user from a webpage template database. For example, a plurality of webpage template options may be displayed in a webpage editing interface. In response to a trigger operation of a user on a webpage template option, the client pulls template setting data corresponding to the webpage template option from the webpage template database through the server to display the webpage template corresponding to the webpage template option in the webpage editing interface.

[0135] For example, Figure 2 For example, the editor 202 in the preview area will preload the script file (such as JS file) and style file (such as CSS file) corresponding to the fixed web page template or the custom web page template into the iframe (Inline Frame) in the preview area to ensure that the script file and style file of the web page template are effective, so as to display the corresponding web page template in the web page editing interface. Among them, the script file and style file are template setting data.

[0136] Step 803: obtaining web page editing data corresponding to the first web page template through the web page editing interface. The web page editing data is data generated by the user performing web page editing under the constraints of the first web page template.

[0137] Optionally, the webpage editing interface is mounted with a method for communicating with the outer layer to obtain webpage editing data. The webpage editing data may include data of webpage elements set by the user under the constraints of the first webpage template, such as data corresponding to text, images, controls, links, etc.

[0138] For example, Figure 2 For example, a receiveMessage method for communicating with the outer layer is mounted on the web page editing interface of the editor 202, and the receiveMessage method can be used to receive instructions from outside the iframe and send internal instructions of the iframe. Optionally, a click event can be added in the iframe through the addEventListener method to shield the href attributes of all a tags to prevent jumps. Optionally, the editor 202 can compile and generate a preview web page through a rendering component according to the template setting data and the web page editing data obtained in real time, and display it in real time in the web page editing interface to achieve a WYSIWYG effect. The editor 202 saves the template setting data and the web page editing data as a whole in the database in real time. Among them, the editor 202 saves data through the outer layer of the iframe, and performs page rendering preview through the iframe.

[0139] In one example, the web page editing interface corresponds to at least one of the following selection states: a swipe selection state and a click selection state. The swipe selection state is used to prompt the user that the area swiped is editable, and the click selection state is used to prompt the user that the area clicked is editable. This allows the user to quickly obtain the editable area to edit the web page, thereby improving the efficiency of web page editing.

[0140] Optionally, the selected state is loaded in the outer layer of the iframe, the main purpose of which is to achieve internal and external style isolation.

[0141] Exemplarily, the selected state is to add a mouseover event globally through the addEventListener method. When the user swipes over any element in the page editing interface, the client will execute this event, determine whether the element has a data attribute, and check the parent element whether there is an element with a data attribute containing group, until our wrapping layer ends. The client then sends the element and the parent element to the outer layer of the iframe through the receiveMessage method. The outer layer of the iframe obtains the position and size information of the element through the getBoundingClientRect method. The outer layer of the iframe creates a div (area) element in the outer layer of the iframe, adds the obtained information to the div element, and adds borders and colors to the div element, thereby reminding the user that the area and the upper layer are clickable.

[0142] The click selected state can be achieved through the globally bound click event. When the user clicks on the editable area, the client will render the editable area in the clicked state to remind the user that the current area is editable.

[0143] In addition, this application also supports scrolling selection state following. When the preview page is displayed, the selection state is in the outer layer of the iframe. When scrolling in the iframe, the outer layer of the iframe updates the information of the DOM (Document Object Model) element to prompt the user. The client can monitor the scrolling event of the iframe by adding a scroll event to the iframe to force the update of the selection state.

[0144] Optionally, the user can input web page editing data by editing the editable areas corresponding to the first web page template, and the client obtains the web page editing data through these editable areas.

[0145] Step 804 , generating web page data according to the template setting data and the web page editing data of the first web page template, wherein the web page data is used to render and display a web page having web page content corresponding to the first web page template and the web page editing data.

[0146] Page data refers to the data required for rendering and displaying a web page. Optionally, web page data can be obtained by inserting web page editing data into template setting data. Exemplarily, when the template setting data is an EJS file, the client can combine the EJS file and the web page editing data to generate an HTML file (i.e., web page data), and the client can render and display the HTML page based on the HTML file.

[0147] In one example, the page data will be stored in the direction of the waterfall flow, and each operation of adding, deleting, modifying, querying, etc. can be saved through an array. For example, the client can save the page data according to the following data structure:

[0148]

[0149] In one example, an embodiment of the present application also supports preview of a web page being edited, and the process may be as follows: loading template setting data corresponding to a first web page template in a preview inline frame, and displaying the first web page template; for each mounting point in the preview inline frame, loading corresponding web page editing data, and displaying the web page content.

[0150] The preview iframe may refer to an iframe in the preview area. The first webpage template may be displayed by loading the template setting data corresponding to the first webpage template in the iframe. The mount point is used to load webpage editing data to mount and display webpage content at the position corresponding to the mount point. For example, each editable area corresponds to a mount point to realize the webpage editing data corresponding to each editable area.

[0151] Exemplarily, the user operates the web page template by dragging or clicking to insert, delete, move, etc. the web page content. After the user operates the outer layer of the iframe, the client can send instructions through the receiveMessage method and carry the currently edited web page editing data to the iframe. The iframe will use a rendering component to combine the web page template data (such as an EJS file) and the web page editing data (data) to generate HTML data in a string format, and create a div element to bind the ID and initialization method of the web page template. The client then loads it into the specified area of ​​the iframe through native JS to achieve web page preview.

[0152] In one example, the user may also update the webpage editing data. Exemplarily, the updating process of the webpage editing data may be as follows:

[0153] When the user clicks on any element (i.e., the editable area), the element will trigger a bubbling event to bubble up to the outermost wrapping element of each element, and then trigger a click event on the outer layer of the iframe. Here, the user gets the clicked element and the wrapping element. The client finds the corresponding schema and data in the web page data through the ID (Identity Document) corresponding to the wrapping element. The client obtains the value corresponding to the data (i.e., web page editing data) through the clicked element.

[0154] The client loads the form through the schema and fills in the initial value through the data. When the user edits the form, the change event will be triggered in real time. When the client detects the change event, it synchronizes the web page editing data corresponding to the form and sends it to the iframe. The client finds the outer div through the ID and uses the innerHTML method to overwrite the latest content rendered by the web page editing data to the corresponding position.

[0155] In one example, an embodiment of the present application also supports switching of web page themes, and the process may also include the following contents: obtaining theme setting data selected by a user according to at least one form; switching the theme setting data corresponding to the attribute selector to the theme setting data selected by the user.

[0156] The theme setting data is used to indicate the theme of the webpage. The user can switch the theme setting data through the form. For example, a plurality of theme options are displayed in the form. In response to the user's trigger operation on a certain theme option, the client obtains the theme setting data corresponding to the theme option, and switches the theme setting data corresponding to the attribute selector to the theme setting data corresponding to the theme option, thereby realizing the switching of the webpage theme.

[0157] Optionally, the theme setting data in the database may be provided by a designer, or may be customized by a user through the above-mentioned first declaration function, which is not limited in this embodiment of the present application.

[0158] For example, taking switching the web page theme to the Dark theme mode as an example, in response to the user clicking the "Switch Theme" button, the client switches the attribute value of data-theme in the style root node to dark through JavaScript. At this time, the CSS selector html[data-theme='dark']a will come into play to achieve the web page theme switching.

[0159] In summary, the technical solution provided by the embodiments of the present application effectively improves the flexibility of web page editing and thus improves user stickiness by supporting the selection of web page templates, customization of web page templates, web page editing, and switching of web page themes.

[0160] In some embodiments, reference Figure 9-11 , taking the above client implemented as an editor as an example, the web page template customization process can be as follows:

[0161] refer to Fig. 9 The user can use the default web page template to edit the web page through the editor 900, or use the fixed web page template and the custom web page template to edit the web page.

[0162] The user can also customize the webpage template through the editor 900 to obtain a customized webpage template. For example, the editor 900 dynamically generates a form according to the configuration data and type of the form to obtain the user setting data, and the editor 900 then generates the EJS file, CSS file and JS file (i.e., template setting data) corresponding to the customized webpage template according to the user setting data through the EJS engine.

[0163] In one example, reference Fig.10 , a custom template 1000 is correspondingly set in the editor 900. A template data model and a form data model are created in the editor 900, and the form name of the form data model is bound to the ID of the template data model.

[0164] The user can enter the template setting data through the editor 900, then select the required template data model through the ID of the template data model, and finally enter the template setting data into the template data model, and bind the template setting data to the ID of the template data model. Optionally, the editor 900 can generate template setting data such as a name file of a custom web page template, a description file of a web page template, an EJS file, a JS file, and a CSS file according to the template setting data and the template data model.

[0165] The user can enter the basic information of the custom web page template, such as the name file, JS file, etc., through the front-end UI (User Interface) corresponding to the editor 900, and then add it to the web page template list for user selection.

[0166] Optionally, the editor 900 can also be used to edit and preview the customized web page template, and generate thumbnails of the customized web page template. For example, during the web page template customization process, the user can preview the web page template through the editor 900. The editor 900 can be deployed on the operation end (i.e., the first terminal device 10 mentioned above).

[0167] The editor 900 can obtain corresponding template setting data, such as EJS files, JS files, and CSS files, according to the ID of the custom webpage template through a universal interface, and then load the corresponding EJS files, JS files, and CSS files in the iframe to realize the preview of the custom webpage template.

[0168] Optionally, the editor 900 also supports test preview. The editor 900 loads EJS files, CSS files, and JS files in an iframe to generate preview data and provide a debuggable function for the customer.

[0169] In one example, reference Fig.11The editor 900 also supports web page style customization. For example, the editor 900 is also deployed with a postcss plug-in 1100. The client recognizes the cc function (i.e., the first declaration function) through the postcss plug-in 1100, obtains color setting data from the cc function, and then adds the theme setting data determined by the color setting data to the attribute selector in the style root node, thereby obtaining the final CSS style, thereby realizing web page style customization.

[0170] In some embodiments, reference Figure 12-15 , the web page editing process can be as follows:

[0171] refer to Fig.12 The user can first edit the header navigation corresponding to the web page through the editor 900. The user can add header navigation options, delete header navigation options, modify header navigation options, etc. through the web page editing interface 1200. After the user completes the header navigation editing, the editor 900 generates a corresponding HTML file and publishes the HTML file.

[0172] When the editor 900 is deployed in the first client 10 , the second server 40 pulls the HTML file from the first server 20 , so that the second client 30 performs header navigation display according to the HTML file.

[0173] refer to Fig.13 , the user can edit the web page through the editor 900. The user can drag the web page template in the template database to the web page editing interface 1200 through the web page editing interface 1200, and then add, delete, modify, etc. web page elements (such as themes, images, buttons, text, etc.) under the constraints of the web page template. Optionally, the editable area is displayed in the form of a waterfall flow. After the user completes the web page editing, the corresponding HTML file is generated, and the editor 900 publishes the HTML file. The second client 20 displays the web page according to the HTML file.

[0174] refer to Fig.14 , the user can edit the bottom navigation through the editor 900. The user can add bottom navigation options, delete bottom navigation options, modify bottom navigation options, etc. through the web page editing interface 1200. After the user completes the bottom navigation editing, the editor 900 generates a corresponding HTML file and publishes the HTML file. The second client 30 can display the bottom navigation according to the HTML file. Optionally, the editor 900 can support navigation configuration, friend link configuration, service settings, etc.

[0175] Optionally, the second server 40 periodically pulls the HTML file from the first server 20 and saves it in a file directory. The second server 40 can obtain different HTML files through different routes. Fig.15 The second client 30 can render and display a complete web page in the user interface 1500 of the second client 30 according to the HTML files corresponding to the head navigation, the web page and the bottom navigation respectively.

[0176] In summary, the technical solution provided by the embodiment of the present application obtains the user's setting data for the web page template through at least one form, and then generates the template setting data for generating the web page template according to the user setting data, so that the web page template can be customized, thereby allowing the user to have more web page templates for web page editing, thereby improving the personalization of web page editing. At the same time, since there is no need to set the web page template at the code level, the customization difficulty and development difficulty of the web page template are reduced, thereby improving the customization efficiency and development efficiency of the web page template, especially when the user has a secondary development demand for the web page template.

[0177] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0178] refer to Fig.16 , which shows a block diagram of a page editing device provided by an embodiment of the present application. The device has the function of implementing the above method example, and the function can be implemented by hardware, or by hardware executing corresponding software. The device can be the terminal device introduced above, or it can be set in the terminal device. Fig.16 As shown, the device 1600 includes: a form data acquisition module 1601, a form loading and display module 1602, a user data acquisition module 1603 and a template data generation module 1604.

[0179] The form data acquisition module 1601 is used to acquire form setting data in response to an operation for starting webpage template setting.

[0180] The form loading and displaying module 1602 is used to load and display at least one form in the template setting interface according to the form setting data.

[0181] The user data acquisition module 1603 is used to acquire user setting data in response to the editing operation on the at least one form, where the user setting data refers to the setting data of the user for the webpage template.

[0182] The template data generating module 1604 is used to generate template setting data according to the user setting data, and the template setting data is used to generate a web page template.

[0183] In some embodiments, the template data generating module 1604 is used to:

[0184] Acquire model configuration parameters according to the user setting data, wherein the model configuration parameters include at least one of the following: identification information, tag information, type, a first parameter for indicating whether it is an array type, a second parameter for indicating whether it is required, and a default value;

[0185] The model configuration parameters are updated into the template data model to generate the template setting data; wherein the template data model is used to indicate the code architecture of the web page template.

[0186] In some embodiments, the form setting data includes a form data model and an initial value, the form data model is used to indicate the code architecture of the form;

[0187] The form loading and displaying module 1602 is used to load and display the at least one form according to the form data model and the initial value; or to load and display the first form field in the form according to the first form path.

[0188] In some embodiments, a style root node is defined in the template data model, and the style root node is used to define the web page style; Fig.17 As shown, the device 1600 also includes: a declaration function query module 1605, a color data acquisition module 1606, a theme data construction module 1607 and a theme data adding module 1608.

[0189] The declaration function query module 1605 is used to traverse and query the first declaration function, where the first declaration function is used to define a color value.

[0190] The color data acquisition module 1606 is configured to acquire color configuration data from the first declaration function when it is found that the first declaration function exists, wherein the color configuration data includes a color value configured by a user.

[0191] The theme data construction module 1607 is used to construct theme setting data according to the color configuration data, and the theme setting data is used to indicate the theme of the web page.

[0192] The theme data adding module 1608 is used to add the theme setting data to the attribute selector in the style root node.

[0193] In some embodiments, Fig.17 As shown, the device 1600 also includes: a theme data selection module 1609 and a theme data switching module 1610.

[0194] The theme data selection module 1609 is used to obtain the theme setting data selected by the user according to the at least one form.

[0195] The theme data switching module 1610 is used to switch the theme setting data corresponding to the attribute selector to the theme setting data selected by the user.

[0196] In some embodiments, Fig.17 As shown, the device 1600 also includes: an editing interface display module 1611, a web page template display module 1612, an editing data acquisition module 1613 and a web page data generation module 1614.

[0197] The editing interface display module 1611 is used to display a web page editing interface in response to an operation for starting web page editing, where the web page editing interface is used for web page editing.

[0198] The web page template display module 1612 is used to respond to the operation for selecting a web page template, obtain the template setting data corresponding to the first web page template from the web page template database, and display the first web page template in the web page editing interface; wherein the web page template library includes fixed web page templates and custom web page templates, the custom web page template is customized by the user through the template setting interface, and the fixed web page template is provided by the designer.

[0199] The editing data acquisition module 1613 is used to acquire the webpage editing data corresponding to the first webpage template through the webpage editing interface. The webpage editing data is the data generated by the user when editing the webpage under the constraint of the first webpage template.

[0200] The web page data generating module 1614 is used to generate web page data according to the template setting data of the first web page template and the web page editing data, wherein the web page data is used to render and display a web page having web page content corresponding to the first web page template and the web page editing data.

[0201] In some embodiments, Fig.17 As shown, the device 1600 also includes: a web page content display module 1615.

[0202] The web page template display module 1612 is used to load the template setting data corresponding to the first web page template in the preview iframe and display the first web page template.

[0203] The web page content display module 1615 is used to load the corresponding web page editing data for each mounting point in the preview iframe and display the web page content.

[0204] In some embodiments, the web page editing interface corresponds to at least one of the following selection states: a swipe selection state and a click selection state; the swipe selection state is used to prompt the user that the area swiped is editable; the click selection state is used to prompt the user that the area clicked is editable.

[0205] In some embodiments, the method is applied to a website template operation system, which is deployed in a private cloud, and the website template operation system includes a first client, a second client, a first server and a second server; wherein the first server is used to provide background services for the first client, the first client is used for web page editing and web page template setting, the second server is used to provide background services for the second client, and the second client is used for web page display.

[0206] In summary, the technical solution provided by the embodiment of the present application obtains the user's setting data for the web page template through at least one form, and then generates the template setting data for generating the web page template according to the user setting data, so that the web page template can be customized, thereby allowing the user to have more web page templates for web page editing, thereby improving the personalization of web page editing. At the same time, since there is no need to set the web page template at the code level, the customization difficulty and development difficulty of the web page template are reduced, thereby improving the customization efficiency and development efficiency of the web page template, especially when the user has a secondary development demand for the web page template.

[0207] It should be noted that the device provided in the above embodiment, when implementing its functions, is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. In addition, the device and method embodiments provided in the above embodiment belong to the same concept, and the specific implementation process is detailed in the method embodiment, which will not be repeated here.

[0208] Please refer to Fig.18 , which shows a block diagram of a terminal device provided by an embodiment of the present application. The terminal device may be the terminal device described above, and the terminal device 1800 may be used to implement the above webpage editing method, specifically:

[0209] Typically, the terminal device 1800 includes: a processor 1801 and a memory 1802 .

[0210] Optionally, the processor 1801 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the like. The processor 1801 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). The processor 1801 may also include a main processor and a coprocessor. The main processor is a processor for processing data in an awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in a standby state. In some embodiments, the processor 1801 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1801 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0211] Optionally, the memory 1802 may include one or more computer-readable storage media, which may be non-transitory. The memory 1802 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 1802 is used to store a computer program, which is configured to be executed by one or more processors to implement the above-mentioned web page editing method.

[0212] In some embodiments, the terminal device 1800 may further optionally include: a peripheral device interface 1803 and at least one peripheral device. The processor 1801, the memory 1802 and the peripheral device interface 1803 may be connected via a bus or a signal line. Each peripheral device may be connected to the peripheral device interface 1803 via a bus, a signal line or a circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 1804, a display screen 1805, an audio circuit 1806 and a power supply 1807.

[0213] Those skilled in the art will understand that Fig.18 The structure shown in the figure does not constitute a limitation on the terminal device 1800, and may include more or fewer components than shown in the figure, or combine certain components, or adopt a different component arrangement.

[0214] In some embodiments, a computer-readable storage medium is further provided, wherein a computer program is stored in the storage medium, and when the computer program is executed by a processor of a terminal device, the web page editing method described above is implemented.

[0215] Optionally, the computer readable storage medium may include: ROM (Read-Only Memory), RAM (Random-Access Memory), SSD (Solid State Drives) or optical disks, etc. Among them, the random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0216] In some embodiments, a computer program product is further provided, the computer program product comprising a computer program, the computer program being stored in a computer-readable storage medium. A processor of a terminal device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, so that the terminal device executes the above-mentioned webpage editing method.

[0217] It should be noted that, before collecting the relevant data of the user and during the process of collecting the relevant data of the user, the embodiment of the present application can display a prompt interface, a pop-up window or output a voice prompt information, and the prompt interface, pop-up window or voice prompt information is used to prompt the user that the relevant data is currently being collected, so that the present application only starts to execute the relevant steps of obtaining the relevant data of the user after obtaining the confirmation operation issued by the user to the prompt interface or pop-up window, otherwise (that is, when the confirmation operation issued by the user to the prompt interface or pop-up window is not obtained), the relevant steps of obtaining the relevant data of the user are terminated, that is, the relevant data of the user is not obtained. In other words, all user data collected by this application are processed strictly in accordance with the requirements of the laws and regulations of relevant countries, and the informed consent or separate consent of the subject of personal information is obtained with the consent and authorization of the user. The subsequent data use and processing behavior is carried out within the scope of authorization of laws and regulations and the subject of personal information, and the collection, use and processing of relevant user data need to comply with the relevant laws, regulations and standards of relevant countries and regions. For example, the user setting data, template setting data, theme setting data, etc. involved in this application are all obtained with full authorization.

[0218] It should be understood that the "multiple" mentioned in this article refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. In addition, the step numbers described in this article only illustrate a possible execution sequence between the steps. In some other embodiments, the above steps may not be executed in the order of the numbers, such as two steps with different numbers are executed at the same time, or two steps with different numbers are executed in the opposite order to the diagram. The embodiments of the present application are not limited to this.

[0219] The above description is only an exemplary embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A webpage editing method, characterized in that: The method comprises: In response to an operation for opening a webpage template setting, obtaining form setting data; According to the form setting data, at least one form is loaded and displayed in the template setting interface; In response to an editing operation on the at least one form, acquiring user setting data, wherein the user setting data refers to setting data of the user for the webpage template; Template setting data is generated according to the user setting data, and the template setting data is used to generate a web page template.

2. The method according to claim 1, characterized in that: The step of generating template setting data according to the user setting data comprises: According to the user setting data, a model configuration parameter is acquired, where the model configuration parameter includes at least one of the following: identification information, tag information, type, a first parameter for indicating whether it is an array type, a second parameter for indicating whether it is required, and a default value; The model configuration parameters are updated into the template data model to generate the template setting data; wherein the template data model is used to indicate the code architecture of the web page template.

3. The method according to claim 1, characterized in that The form setting data includes a form data model and an initial value, wherein the form data model is used to indicate the code structure of the form; The step of loading and displaying at least one form in a template setting interface according to the form setting data includes: According to the form data model and the initial value, load and display the at least one form; or, According to the first form path, a first form field in the form is loaded and displayed.

4. The method according to claim 2, characterized in that: The template data model defines a style root node, and the style root node is used to define the webpage style; the method further includes: Traversing and querying a first declaration function, where the first declaration function is used to define a color value; In a case where it is found that the first declaration function exists, obtaining color configuration data from the first declaration function, the color configuration data including a color value configured by a user; constructing theme setting data according to the color configuration data, wherein the theme setting data is used to indicate the theme of the webpage; The attribute selector in the style root node adds the theme setting data.

5. The method according to claim 4, characterized in that The method further comprises: According to the at least one form, obtaining the theme setting data selected by the user; The theme setting data corresponding to the attribute selector is switched to the theme setting data selected by the user.

6. The method according to claim 1, characterized in that The method further comprises: In response to an operation for starting web page editing, displaying a web page editing interface, wherein the web page editing interface is used for web page editing; In response to an operation for selecting a webpage template, template setting data corresponding to a first webpage template is acquired from a webpage template database, and the first webpage template is displayed in the webpage editing interface; wherein the webpage template database includes fixed webpage templates and custom webpage templates, the custom webpage template is custom-generated by a user through the template setting interface, and the fixed webpage template is provided by a designer; Acquiring webpage editing data corresponding to the first webpage template through the webpage editing interface, the webpage editing data being data generated by a user performing webpage editing under the constraints of the first webpage template; Web page data is generated according to the template setting data of the first web page template and the web page editing data, and the web page data is used to render and display a web page having web page content corresponding to the first web page template and the web page editing data.

7. The method according to claim 6, characterized in that The method further comprises: Loading template setting data corresponding to the first webpage template in the preview inline frame, and displaying the first webpage template; For each mounting point in the preview embedded frame, the corresponding web page editing data is loaded respectively to display the web page content.

8. The method according to claim 6, characterized in that The webpage editing interface corresponds to at least one of the following selected states: a swipe selected state and a click selected state; The swipe selection state is used to prompt the user that the area swiped is editable; the click selection state is used to prompt the user that the area clicked is editable.

9. The method according to claim 1, characterized in that: The method is applied to a website template operation system, the website template operation system is deployed in a private cloud, and the website template operation system includes a first client, a second client, a first server, and a second server; The first server is used to provide background services for the first client, and the first client is used for web page editing and web page template setting. The second server is used to provide background services for the second client, and the second client is used for web page display.

10. A web page editing device, characterized in that: The device comprises: A form data acquisition module, used to acquire form setting data in response to an operation for opening a webpage template setting; A form loading and displaying module, used to load and display at least one form in the template setting interface according to the form setting data; A user data acquisition module, configured to acquire user setting data in response to an editing operation on the at least one form, wherein the user setting data refers to setting data of the user for the webpage template; The template data generating module is used to generate template setting data according to the user setting data, and the template setting data is used to generate a web page template.

11. A computer device, characterized in that: The computer device includes a processor and a memory, wherein a computer program is stored in the memory, and the computer program is loaded and executed by the processor to implement the page editing method according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which is loaded and executed by a processor to implement the page editing method according to any one of claims 1 to 9.

13. A computer program product, characterized in that The computer program product includes a computer program, which is stored in a computer-readable storage medium. A processor reads and executes the computer program from the computer-readable storage medium to implement the page editing method according to any one of claims 1 to 9.

Images