Page content editing method and device, page content display method and device, storage medium and program product
By displaying a preview window that is adapted to the target device type in the editing interface, and storing the layout information and content data of page elements in a structured data storage format, the rendering problem of HTML format page data on the mobile terminal is solved, and the consistency between editing results and rendering results and efficient page rendering effect is achieved.
Patent Information
- Application Number
- CN202411773994.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-04
- Publication Date
- 2025-04-25
AI Technical Summary
In the prior art, when editing and displaying page contents, the HTML format page data has the problem of unsatisfactory rendering results, especially in mobile terminals, it is difficult to meet the needs of different application scenarios.
By displaying a preview window that is suitable for the target device type in the editing interface, displaying the edit results synchronously in response to editing operations, and storing the target layout information and content data in a structured data storage format, ensuring that the page is rendered reliably and accurately on the target device.
It realizes the intuitiveness of the page editing process and the adaptability of the editing results, ensures the consistency between the editing results and the rendering results, and improves the rendering effect of the page data.
Smart Images

Figure CN119886069A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a method, device, storage medium and program product for editing and displaying page content. Background Art
[0002] With the rapid development of Internet technology, users' demands for information display are becoming increasingly diversified, especially in online services. For example, when an online shopping platform handles the refund process, detailed knowledge such as various user rights, transportation insurance, and the scope of application of discount coupons needs to be clearly conveyed to users. In order to ensure that this information can be understood accurately, it is necessary to edit the relevant knowledge documents into page content and display the page content to users. In some solutions for editing page content, web development engineers can complete the arrangement of document content through coding. This editing method can achieve complex layout and interactive effects, but it has the problems of high labor costs and high technical barriers.
[0003] In some other existing solutions, a rich text editor can be used to edit knowledge documents into a clear text layout, and a variety of rich media elements such as pictures, hyperlinks, operation buttons, videos, etc. can be combined to enhance the expression of information. The page content edited by the rich text editor is usually stored as page data in HTML (Hypertext Markup Language) format. This solution lowers the technical threshold for page editing, but in some scenarios, the page data in HTML format has the problem of unsatisfactory rendering results. Therefore, a new solution needs to be proposed. Summary of the invention
[0004] Multiple aspects of the present application provide a page content editing, display method, device, storage medium and program product to improve the rendering effect of page data.
[0005] An embodiment of the present application provides a page content editing method, comprising: displaying an editing interface, the editing interface comprising an editing area and a preview window adapted to a target device type, the preview window comprising a plurality of page elements required for generating a target page, and initial layout information being provided between the plurality of page elements; in response to an editing operation on the plurality of page elements in the editing area, synchronously displaying editing results corresponding to the plurality of page elements in the preview window, the editing results comprising: target layout information between the plurality of page elements and content data corresponding to the plurality of page elements; storing the target layout information and the content data corresponding to the plurality of page elements in a structured data storage format to obtain structured data corresponding to the target page, the structured data being used to render the target page on a device corresponding to the target device type.
[0006] The embodiment of the present application also provides a page content display method, which is applied to a terminal device of a target device type, including: in response to an access operation to a target page, obtaining structured data corresponding to the target page, wherein the structured data is edited using the page editing method provided in the embodiment of the present application; parsing the structured data using a data parsing protocol corresponding to a structured data storage format to obtain target layout information between multiple page elements on the target page and content data corresponding to the multiple page elements; rendering the target page according to the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
[0007] An embodiment of the present application also provides an electronic device, comprising: a memory and a processor; the memory is used to store one or more computer instructions; the processor is used to execute the one or more computer instructions to: execute the steps in the method provided in the embodiment of the present application.
[0008] The embodiment of the present application also provides a computer-readable storage medium storing a computer program, which can implement the steps in the method provided in the embodiment of the present application when the computer program is executed by a processor.
[0009] The embodiment of the present application also provides a computer program product, including: a computer program / instructions, which, when executed by a processor, can implement the steps in the method provided in the embodiment of the present application.
[0010] In the page content editing method provided by the embodiment of the present application, by displaying a preview window adapted to the target device type in the editing interface, the editing result of the target page can be synchronously displayed in the preview window during the editing of the target page, making the page editing process and the editing result more intuitive, thereby facilitating the dynamic adjustment of the editing process according to the editing result, so that the editing result can adapt to the target device type. Among them, the target layout information between the page elements and the content data corresponding to the page elements are stored in a structured data storage format, which is convenient for reliably and accurately parsing the editing results adapted to the target device type on the terminal device of the target device type, thereby ensuring the consistency of the editing results and the rendering results, and achieving the effect of "what you see when editing is what you get when rendering". BRIEF DESCRIPTION OF THE DRAWINGS
[0011] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:
[0012] Figure 1A flowchart of a method for editing page content provided by an exemplary embodiment of the present application;
[0013] Figure 2 A schematic diagram of displaying a preview window of mobile phone adaptation in an editing interface is provided for an exemplary embodiment of the present application;
[0014] Figure 3 A schematic diagram of displaying a preview window adapted for a smart watch in an editing interface is provided for an exemplary embodiment of the present application;
[0015] Figure 4a A schematic diagram of displaying a variable insertion control in an editing interface is provided for an exemplary embodiment of the present application;
[0016] Figure 4b A schematic diagram of displaying a font color editing control in an editing interface is provided for an exemplary embodiment of the present application;
[0017] Figure 5 A flowchart of a method for displaying page content provided by an exemplary embodiment of the present application;
[0018] Figure 6 for Figure 2 A schematic diagram showing the target page being edited in the preview window displayed on a mobile phone;
[0019] Figure 7 A schematic diagram of the method provided in the embodiment of the present application being applied to a FAQ page editing scenario;
[0020] Figure 8 A schematic diagram of the structure of an electronic device provided as an exemplary embodiment of the present application. DETAILED DESCRIPTION
[0021] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.
[0022] The terms used in the embodiments of the present invention are only for the purpose of describing specific embodiments, and are not intended to limit the present invention. The singular forms "a", "said" and "the" used in the embodiments of the present invention and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings, and "multiple" generally includes at least two, but does not exclude the inclusion of at least one.
[0023] It should be understood that the term "and / or" used in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.
[0024] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a product or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such a product or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other identical elements in the product or system including the element.
[0025] In some solutions for editing page content, the page content can be edited through a rich text editor. In the rich text editor, you can insert text, lists, hyperlinks, pictures, videos and other multimedia resources, and support custom layout and style. The page content edited by the rich text editor is stored in HTML format. HTML provides a structured markup language that can flexibly display page content. When the page content needs to be adjusted, the CSS (Cascading Style Sheets) selector can be used to override the default style of HTML elements to achieve a more refined and customized visual effect. However, there are many problems when the edited page content is applied to mobile terminals. A typical problem is that the rich text editor usually adopts an open source solution, and the page content in HTML format output by it is uncertain, and it is difficult to modify the page content in HTML format to meet the needs of different application scenarios. For example, in some scenarios, it is impossible to add a function to report a log when clicking a link on an element in the page content. Another typical problem is that images in the rich text editor support mixed image layout, text wrapping, etc., while images displayed on mobile terminals are often displayed in a fixed layout, such as one image per line. This editing method makes the page content edited by the rich text editor suitable for page content display scenarios on the computer side, but cannot adapt to content display scenarios on mobile terminals. Another typical problem is that the parsing process of the HTML protocol is relatively complicated, and there is a high parsing cost when extracting HTML-formatted page content in non-web application scenarios. The above defects result in unsatisfactory rendering results for HTML-formatted page data in some scenarios.
[0026] In view of the above technical problems, a solution is provided in some embodiments of the present application. The technical solutions provided by the embodiments of the present application are described in detail below in conjunction with the accompanying drawings.
[0027] Figure 1 is a flow chart of a method for editing page content provided by an exemplary embodiment of the present application. The method may include: Figure 1 Steps shown:
[0028] Step 101: display an editing interface, wherein the editing interface includes an editing area and a preview window adapted to a target device type, wherein the preview window includes a plurality of page elements required for generating a target page, and initial layout information is provided between the plurality of page elements.
[0029] Step 102, in response to the editing operation on the multiple page elements in the editing area, synchronously display the editing results corresponding to the multiple page elements in the preview window, and the editing results include: target layout information between the multiple page elements and content data corresponding to the multiple page elements.
[0030] Step 103: Store the target layout information and the content data corresponding to the multiple page elements in a structured data storage format to obtain structured data corresponding to the target page, and the structured data is used to render the target page on a device corresponding to the target device type.
[0031] The execution subject of this embodiment can be a terminal device, such as a desktop computer, a laptop computer, a tablet computer, a smart phone, etc. An editor for editing pages is running on the terminal device. The editor can be an independently running application or a program component integrated in other editing platforms or development platforms, which is not limited in this embodiment. The editor can provide a page editing service, which is used to edit pages suitable for display on a specific type of terminal device. The specific type of terminal device can be a mobile terminal or a fixed terminal, which is not limited in this embodiment. The page content data edited by the editor can be submitted to the server for storage. When a terminal device of a specific type accesses the page, the page content data can be obtained from the server and rendered.
[0032] In step 101, the editor may display an editing interface, which is a human-computer interaction interface that provides an editing area and a preview window. The editing area is used to provide an entry for editing operations, and the preview window is used to display the page editing effect in real time to ensure that the edited content has high accuracy and meets the expected visual effects. In this embodiment, the target page refers to any page being edited, such as a page of a knowledge document, which is used to be displayed on a terminal device of the target device type. In some embodiments, the target device type may be: a mobile phone, a tablet computer, a car computer, a POS (Point of Sale) machine, a smart watch, or other portable terminal device types with a display screen.
[0033] In this embodiment, the preview window is adapted to the target device type, and the adaptation refers to the preview window being adapted to the device features corresponding to the target device type, such as at least one of the screen width, height, direction, and layout specification. Among them, the layout specification corresponding to the target device type may include a single-column layout specification or a multi-column layout specification. The single-column layout specification means that the page elements are arranged in sequence up and down, and the page can be scrolled up and down instead of horizontally; the multi-column layout specification means that multiple columns of page elements are displayed on the page, and the page can be scrolled up and down and horizontally. Optionally, the editor may determine the appearance style parameters such as the width, height, and display direction of the preview window according to the screen width, height, and direction corresponding to the target device type, and display the preview window according to the determined appearance style parameters. Optionally, the editor may determine the scrolling style parameters of the preview window, such as the width and scrolling direction of the scroll bar, according to the layout specification corresponding to the target device type, and display the preview window according to the determined scrolling style parameters.
[0034] In some optional embodiments, the editor may provide preview windows adapted to multiple device types and may provide a window switching function. The editor may display a switching control corresponding to at least one device type in the editing interface, such as Figure 2 The mobile phone switch control, watch switch control, and tablet switch control are shown. The editor can respond to the triggering operation of the switch control corresponding to the target device type in the at least one device type switch control, and display a preview window adapted to the target device type in the editing interface according to the page style corresponding to the target device type. Figure 2 It shows the preview window adapted to the mobile phone. Figure 3 The preview window corresponding to the smart watch is illustrated. Obviously, the styles of the two preview windows are different. Therefore, during the editing process of the target page, one can intuitively perceive the effect of the target page displayed on the mobile phone or watch, realizing the "what you see is what you get" page editing operation.
[0035] When editing any target page, the preview area can display multiple page elements required to generate the target page. Page elements refer to the basic units that make up a page, such as titles, paragraphs, prompts, pictures, tabs, buttons, videos, or action points. Action points refer to page elements that can interact with users. These page elements can guide users to perform specific operations. Action points may include but are not limited to: buttons, links, form controls, icons, modal windows, or tabs. In the page elements, different page elements can be of the same or different types. For example, Figure 2As shown, in the preview window of the target page, various types of elements such as paragraphs, prompts, pictures, multiple tabs, buttons, etc. can be displayed. There is initial layout information between the multiple page elements displayed in the preview window. In this embodiment, the layout information between page elements refers to the information used to describe the arrangement and positioning between page elements, and the layout information includes at least one of the relative position, size, alignment and spacing between page elements. Among them, the initial layout information can be the layout information designed for the multiple page elements when the multiple page elements are added to the preview window, or it can be the layout information obtained by adjusting the layout of the multiple page elements after adding the multiple page elements to the preview window, and this embodiment does not limit it.
[0036] In some optional embodiments, the editing interface may include a page element library, which is a collection of a set of predefined page elements that can be reused. In the page element library, different page elements have different types. Figure 2 As shown, the page element library may include page elements such as titles, paragraphs, prompts, pictures, buttons, videos, etc. for the editor to select. Optionally, the editor may display multiple page elements in the preview window according to the selection operation of the page element library. The multiple page elements displayed in the preview window are the instantiation results of the page elements in the page element library. Any type of page element in the page element library can be instantiated to obtain multiple page elements in the preview window to achieve the reuse of the page element library.
[0037] The instantiation process of any of the multiple page elements in the preview window will be taken as an example for exemplary description. For ease of description and distinction, the page element is described as a page element to be edited. Optionally, the editor can respond to the operation of instantiating any type of page element in the page element library into a page element to be edited in the preview window, and determine the display position of the page element to be edited in the preview window as the initial layout position. Optionally, the operation of instantiating any type of page element in the page element library into a page element to be edited in the preview window can be an operation of selecting a page element of this type in the page element library and dragging the selected page element to the preview window. When a selected page element of a certain type is dragged to the preview window, the page element of this type is instantiated into the page element to be edited in the preview window. After the selected page element is dragged to the preview window, if a release operation on the page element is detected, the initial layout position is determined according to the release position.
[0038] In a single-column layout scenario, the editor may determine the display position of the page element to be edited in the longitudinal direction of the preview window as the initial layout position. In some optional embodiments, the preview window may include a grid consisting of M rows and N columns, where M and N are positive integers, and in the case of a single-column layout, N=1. The grid is used to divide the preview window into a series of rows and columns to ensure that each page element can be aligned in the horizontal and vertical directions and has visual consistency. In some optional embodiments, the row spacing and column spacing of the grid may be different in the preview windows corresponding to different device types to adapt to the screen sizes of different devices. When obtaining the release position of the page element, the editor may obtain the row where the release position is located in the grid, use the row where the release position is located as the starting row position corresponding to the page element to be edited, and determine the ending row position corresponding to the page element to be edited according to the size of the page element to be edited. The starting row position and the ending row position may be used as the initial layout position corresponding to the page element to be edited. After determining the initial layout position, the editor may display the page element to be edited in the preview window according to the initial layout position of the page element to be edited.
[0039] In step 102, the editor may synchronously display the editing results corresponding to the multiple page elements in the preview window according to the editing operations on the multiple page elements in the editing area. Among them, the editing operation on any page element may include: editing the content data of the page element, and / or editing the layout information of the page element. Among them, the content data of the page element refers to the actual data or information contained in the page element. For example, the content data of the page elements of the title type and the paragraph type is text content, and the content data of the page elements of the picture type is image content, and the image content can be the address of a static picture or a dynamic picture. The editing results corresponding to the multiple page elements may include: the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
[0040] Among them, the editing operation of any page element can be performed by the user or by a system event, and this embodiment does not limit it. For example, in some editing scenarios, the user can edit the text content corresponding to the paragraph element in the target page, and can edit the options corresponding to the tab in the target page. For another example, in some editing scenarios, the editor can perform editing operations such as automatic indentation, adding spaces, automatic content completion, etc. on the text content corresponding to the paragraph element in the target page, or the editor can perform editing operations such as automatic adjustment of position and size, automatic alignment, etc. on the image in the target page, and no further examples are listed.
[0041] When the editing results corresponding to the multiple page elements are synchronously displayed in the preview window, the content data corresponding to the multiple page elements can be displayed, and the layout of the multiple page elements in the preview window is adapted to the target layout information between the multiple page elements. The target layout information can be the same as the initial layout position, or it can be the layout information obtained after modifying the initial layout position, which is not limited in this embodiment.
[0042] The editing operation of the multiple page elements in the editing area can be implemented through the respective editing windows of the multiple page elements, and the styles and editing functions of the editing windows of different types of page elements can be different. For example, the editing window of a text-type page element may include a text input box for entering text content, the editing window of a picture-type page element may include an address bar for entering the path where the picture is located, and the editing window of an action point-type page element may include: a control for selecting the action point type and an input window for adding interactive effects.
[0043] The following will take any page element as an example to exemplarily illustrate the editing operation on the page element in the editing area. For the convenience of description and distinction, the any page element is described as a target page element.
[0044] Optionally, for a target page element among the multiple page elements, the editor may respond to an editing operation on the target page element and display an editing window corresponding to the target page element in the editing interface, such as Figure 2 The editor can obtain the content data edited for the target page element according to the content editing operation in the editing window, and synchronously display the content data edited for the target page element in the preview window according to the target layout position corresponding to the target page element in the target layout information. Figure 2 As shown, the editor can synchronously display the paragraph content in the preview window according to the paragraph content entered in the editing area to achieve real-time preview of the editing results.
[0045] Optionally, if the target page element is a text-type element, the editor can provide a function for adding variables to the content data corresponding to the text-type element, so as to dynamically obtain the variable value according to the needs of different application scenarios. Optionally, the editor can display a variable insertion control in the editing window, such as Figure 4a The variable insertion control shown. In the process of obtaining the content data edited for the target page element according to the content editing operation in the editing window, the editor can respond to the triggering operation of the variable insertion control and insert the target variable into the text content corresponding to the target page element. The target variable is used to obtain the corresponding variable value when rendering the target page. Figure 4aAs shown, the editor can respond to the trigger operation of the variable insertion control, can display multiple selectable variables, and can insert the selected variable into the corresponding position in the text content according to the selection operation of any selectable variable. For example, according to the selection operation of the variable "member name", the variable "member name" can be inserted into the text content, and then, when the terminal device of the target device type renders the target page, it can obtain the membership information of the user holding the terminal device and display the membership information of the user in the corresponding position in the target page. Based on this implementation, it is conducive to displaying different information on the terminals of different users and terminals of different device types, which improves the scalability and flexibility of the page editing method.
[0046] In some optional embodiments, in addition to adding variables to the text content, the font color of the text content can also be set, such as Figure 4b As shown, the font color of the text content can be set. For example, the font of some text can be set to a default color, the font of other text can be set to a brand color, and the color of some important text can be set to blue. These are not listed one by one.
[0047] In some optional embodiments, the editing operation on any page element may include: editing the layout position of the page element. The following will continue to use the target page element as an example for exemplary description.
[0048] Optionally, the editing window also includes: a layout adjustment control corresponding to the target page element, such as Figure 2 The up control and down control shown. Before the editor synchronously displays the content data edited for the target page element in the preview window according to the target layout position corresponding to the target page element in the target layout information, the editor can respond to the triggering operation of the layout adjustment control and determine the target layout position corresponding to the target page element in the longitudinal direction of the preview window according to the layout adjustment rule corresponding to the layout adjustment control. Among them, the layout adjustment rule corresponding to the layout adjustment control refers to adjusting the adjustment direction and adjustment step of the layout adjustment control. For example, the layout adjustment rule corresponding to the up control is: adjusting the specified step size upward along the longitudinal direction, and the layout adjustment rule corresponding to the down control is: adjusting the specified step size downward along the longitudinal direction.
[0049] In some optional embodiments, the target layout position corresponding to the target page element in the target layout information refers to the arrangement position of the target page element in the at least one page element, for example, Figure 2In the illustrated page, the arrangement order of multiple page elements is: title, paragraph, prompt, order details page diagram, door-to-door pickup tab, self-return tab, and upload return voucher button. The target layout position corresponding to the title element in the above layout information is: ranked first, the target layout position corresponding to the paragraph element in the above layout information is: ranked between the title element and the prompt element, and the target layout position corresponding to the prompt element in the above layout information is: ranked between the paragraph element and the picture element. If the target page element is a prompt element, when editing the prompt element, if a trigger operation of the move up control is detected, the editor can adjust the prompt element between the title element and the paragraph element; if a trigger operation of the move down control is detected, the editor can adjust the prompt element between the order details page diagram and the door-to-door pickup tab.
[0050] When the editor synchronously displays the content data edited for the target page element in the preview window according to the target layout position corresponding to the target page element, it can synchronously display the content data edited for the target page element in the preview window according to the target layout position of the target page element, the spacing between the target page element and adjacent page elements, and the data size of the content data of the target page element. Among them, the larger the content data of the target page element, the larger the display area occupied by the target page element in the preview window. For example, for a target page element of the image type, the larger the size of the image edited for it, the larger the display area occupied by the target page element. For a target page element of the text type, the longer the length of the text edited for it, the larger the display area occupied by the target page element. Figure 2 Taking the paragraph element shown as an example, the paragraph element is located between the title element and the prompt element. Assuming that the distance between the paragraph element and the title element is one line, and the distance between the paragraph element and the prompt element is two lines, the editor can display the paragraph content entered in the editing area starting from the position one line away from the title element, and adjust the display area of the prompt element according to the text length of the paragraph content, so that the distance between the paragraph element and the prompt element is two lines.
[0051] In some other optional embodiments, if a grid is used to divide the preview window, the target layout position corresponding to the target page element in the target layout information may include: the starting row position and the ending row position of the target page element in the grid. Figure 2In the illustrated page, the starting line position of the title element is the first line and the ending line position is the second line, the starting line position of the paragraph element is the third line and the ending line position is the sixth line, and the starting line position of the prompt element is the eighth line and the ending line position is the ninth line, which will not be described one by one. If the target page element is a prompt element, when editing the prompt element, if a trigger operation of the move up control is detected, the editor can adjust the starting line position of the prompt element to the third line and the ending line position to the fourth line. Correspondingly, the starting line position of the paragraph element is the sixth line and the ending line position is the ninth line, thereby swapping the positions of the paragraph element and the prompt element.
[0052] The editor obtains the target layout information between the multiple page elements and the content data corresponding to the multiple page elements for storage. In step 103, the editor may use a structured data storage format to store the target layout information and the content data corresponding to the multiple page elements to obtain structured data corresponding to the target page.
[0053] In this embodiment, structured data refers to data organized in a predefined structured data organization format, and this predefined format enables different terminals to easily parse and process information. The structured data format follows a specific data organization method, such as a key-value data organization method. In this embodiment, the structured data format may include, but is not limited to: JSON (JavaScript Object Notation), XML (eXtensible Markup Language), YAML (YAML Ain't Markup Language), BSON (Binary JSON, Binary JSON).
[0054] In some optional embodiments, the editor may obtain structured storage objects corresponding to the multiple page elements according to the content data corresponding to the multiple page elements, and the structured storage object corresponding to any page element uses the page element as a key and the content data corresponding to the page element as a value. Figure 2Taking the illustrated page as an example, the structured storage object corresponding to the text element on the page is: {key=text1, value=content of the paragraph}, and the structured storage object corresponding to the picture element on the page is: {key=pic1, value=picture address}. After obtaining the structured storage objects corresponding to the multiple page elements, the storage objects corresponding to the multiple page elements can be stored in sequence according to the target layout information between the multiple page elements. The target layout information between the multiple page elements includes the display order of the multiple page elements in the vertical direction. The storage objects of the multiple page elements can be stored in sequence according to the display order of the multiple page elements in the vertical direction to obtain the structured data corresponding to the target page. For example, Figure 2 Some of the structured data corresponding to the illustrated page may be:
[0055] {"Title":"First Level","ID":"Title 1","Type":"Title","Title Content":"After the refund is closed, can I apply again?"}
[0056] {"Paragraph content":{Input: "Dear, within 15 days from the date of confirmation of receipt, if you need to apply for a refund again, you can open xxxAPP, find the corresponding order in [xxxx]-[My Orders], click to enter the order details page, and click the [Return] button to initiate a return application"}, "ID": "Paragraph 1", "Type": "Paragraph"}
[0057] {"ID":"Paragraph 2","Tips":"You need to pay the return logistics fee in advance, and the seller will refund the logistics fee after the merchant receives the returned goods","Type":"Tips"}
[0058] {"Image address":"xxxxxxx xxxxxxx","Type":"Image","ID":"Order details page diagram"}
[0059] In this embodiment, the page content data corresponding to the target page is stored in a structured data format, so that the organization of the page content is relatively fixed, predictable and clearly hierarchical, which can reduce the difficulty of parsing the page content when the renderer renders the target page and improve the rendering efficiency. For example, JSON and XML have clear grammatical rules. When the renderer renders the target page, it can parse the page content of the target page according to the corresponding grammatical rules, so that the parsing process of the page content is simpler and more reliable. Structured data formats, such as JSON, XML, CSV, etc., have been standardized. Based on this standardization, corresponding renderers can be developed for systems and applications on different mobile terminals. For example, based on the standard structured data format, a renderer can be developed for an application running on a smart phone, a POS machine or a smart watch. On the one hand, it meets the needs of displaying the target page on different mobile terminals, and on the other hand, it simplifies the development and maintenance of the target page. It should also be noted that the structured data format has good readability. In addition, for the editor of the target page, the edited page content can be directly read and understood, which reduces the technical threshold corresponding to the editing operation of the target page.
[0060] In this embodiment, by displaying a preview window adapted to the target device type in the editing interface, the editing result of the target page can be synchronously displayed in the preview window during the editing of the target page, making the page editing process and the editing result more intuitive, thereby facilitating the dynamic adjustment of the editing process according to the editing result, so that the editing result can adapt to the target device type. Among them, the target layout information between the page elements and the content data corresponding to the page elements are stored in a structured data storage format, which is convenient for reliably and accurately parsing the editing results adapted to the target device type on the terminal device of the target device type, thereby ensuring the consistency of the editing result and the rendering result, and achieving the effect of "what you see when editing is what you get when rendering".
[0061] In addition, in this implementation, the editing process of the target page focuses on the editing of the layout information and content data of the page elements, so that the structure and content of the page elements can be decoupled from the style of the page elements. As a result, the page editor does not need to customize the style of the page elements, which makes it easier to render the page in a more unified style during the rendering phase, thereby facilitating the realization of a more unified page display style on different devices.
[0062] In addition to the aforementioned embodiments, the embodiments of the present application also provide a page content display method, which will be exemplarily described below in conjunction with the accompanying drawings.
[0063] Figure 5 : is a flow chart of a method for displaying page content provided by an exemplary embodiment of the present application, and the method for displaying page content mainly includes the following steps:
[0064] Step 501, in response to an access operation to a target page, obtain structured data corresponding to the target page, wherein the structured data is obtained by storing target layout information between multiple page elements required to generate the target page and content data corresponding to the multiple page elements in a structured data storage format.
[0065] Step 502: parse the structured data using a data parsing protocol corresponding to the structured data storage format to obtain target layout information between multiple page elements on the target page and content data corresponding to the multiple page elements.
[0066] Step 503: Render the target page according to the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
[0067] The execution subject of this embodiment is a terminal device of the target device type, such as a mobile phone, a tablet computer, a car computer, a POS machine, a smart watch or other portable terminal device with a display screen. A renderer for rendering pages runs on the terminal device, and the renderer can be integrated in the application to render the accessed page when the page in the application is accessed. The target page can be any page accessed in the application, and the access operation to the target page can be initiated by the user through a page jump button or link, or it can be initiated by the system. For example, the system can access the target page at a specific time, or redirect the user's access operation to the target page under specific conditions.
[0068] During the editing process of the target page, the editing result is displayed in a preview window adapted to the target device type while editing. Therefore, the edited target page is adapted to the target device type and can provide a good visual display effect. For example, Figure 2 The mobile page edited in the schematic diagram can be rendered on the mobile phone. Figure 6 The illustrated interface effect achieves the layout consistency and visual consistency of the preview effect of the editing process and the actual rendering effect. The specific editing method of the target page can refer to the records of the aforementioned embodiment and will not be described here. The structured data corresponding to the target page can be data in JSON format, YAML format or BSON format, which is not limited in this embodiment.
[0069] The renderer may adopt the data parsing protocol corresponding to the structured data storage format to parse the structured data corresponding to the target page, and obtain the target layout information between the multiple page elements on the target page and the content data corresponding to the multiple page elements. Among them, the data parsing protocol corresponding to the structured data storage format defines how to parse the data stored in the structured data storage format. Optionally, the renderer may parse out multiple storage objects stored in sequence from the structured data, and parse the multiple storage objects. When parsing any storage object, the key-value pair corresponding to the storage object may be parsed to obtain the page element corresponding to the key and the content data of the page element corresponding to the value. The renderer may determine the target layout information between the multiple page elements based on the storage order of the multiple storage objects. The renderer may render the target page according to the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
[0070] In this implementation, the target layout information between page elements in the target page and the content data corresponding to the page elements are stored in a structured data storage format, which is convenient for reliably and accurately parsing the editing results adapted to the target device type on the terminal device of the target device type, thereby ensuring the consistency of the editing results and the rendering results. In addition, the renderer can efficiently identify the relatively fixed, predictable and clearly hierarchical data organization method corresponding to the structured data based on the data parsing protocol corresponding to the structured data storage format, thereby reducing the difficulty of parsing the page content when the renderer renders the target page and improving the rendering efficiency.
[0071] In some optional embodiments, the structured data corresponding to the target page includes the layout structure and content data of the page elements in the target page, and does not limit the style of the page elements. When rendering the target page, the renderer can dynamically determine the style of the page elements according to the visual subject, so as to meet the style requirements of different application scenarios. Optionally, when the renderer renders the target page according to the content data corresponding to the multiple page elements and the target layout information between the multiple page elements, it can obtain the visual theme corresponding to the target page. Among them, the visual theme refers to the visual style adopted by the page, which is used to convey a specific emotion, atmosphere or image. The visual theme may include elements such as color, font, material, etc., which work together to form a unified and recognizable visual style. For example, when the target page is opened in application A, the main color is white, the auxiliary color is orange, and the accent color is red. When the target page is opened in application B, the main color is white, the auxiliary color is green, and the accent color is orange. For another example, when the target page is displayed during an inactive period, the background material of the target page is a wood grain material, and when the target page is displayed during an active period, the background material of the target page is a metal material.
[0072] Optionally, the visual subject can be obtained from a server, or can be obtained from a local configuration file of the terminal device, which is not limited in this embodiment. The renderer can determine the display styles corresponding to the multiple page elements according to the visual theme, and render the target page according to the display styles and content data corresponding to the multiple page elements and the target layout information between the multiple page elements.
[0073] Based on this implementation, the renderer can flexibly determine the visual body of the target page according to the requirements of the application scenario, thereby flexibly rendering the target page with different visual effects, so that the structured data of the target page can be reused in different application scenarios, reducing the development cost of the target page.
[0074] In some optional embodiments, during the process of rendering the target page, for any target page element among the multiple page elements, if the content data of the target page element contains a target variable, the renderer can obtain the variable value corresponding to the target variable, and render the target page element according to the content data corresponding to the target page element and the variable value corresponding to the target variable. The variable value corresponding to the target variable can be obtained from a server or from a local configuration file of the terminal device, which is not limited in this embodiment. Furthermore, when the renderer renders the target page on different terminal devices, it can dynamically obtain the variable values corresponding to different terminal devices to achieve differentiated rendering on different terminal devices.
[0075] The page content editing method and page content display method provided in the embodiments of the present application can be applied to the editing and displaying scenarios of Frequently Asked Questions (FAQ) documents. FAQ documents are used to list and answer questions that users often ask to help users solve problems. Figure 7As shown, in the editing and display scenarios of FAQ documents, the FAQ editor on the editing end can provide standard elements and custom elements to edit the information page corresponding to the FAQ document, and store the layout information between the edited page elements and the content data of the page elements based on the FAQ description protocol. Among them, the FAQ description protocol is used to store the layout information between the page elements and the content data corresponding to the page elements in a structured data storage format. On the user's terminal device side, the FAQ renderer on the terminal device can provide general capabilities, extended capabilities and main capabilities. Among them, the general capabilities are used to parse the structured data corresponding to the target page according to the FAQ description protocol, and render the page according to the parsing results, the extended capabilities are used to obtain the variable values corresponding to the variables when the text content contains variables, and the theme capabilities are used to render the target page according to the visual theme and the structured data of the target page. Based on this implementation method, the operator can flexibly edit the content and structure of the FAQ document through the FAQ editor on the editing end, without paying attention to the display style of the FAQ document, which greatly improves the efficiency of page editing. For the FAQ renderer, parsing the structured data corresponding to the target page based on the FAQ description protocol improves the stability of the parsing results and the consistency of the page rendering effect and the editing results.
[0076] It should be noted that the execution subject of each step of the method provided in the above embodiment can be the same device, or the method can be executed by different devices. For example, the execution subject of steps 101 to 104 can be device A; for another example, the execution subject of steps 101 and 102 can be device A, and the execution subject of step 103 can be device B; and so on.
[0077] In addition, in some of the processes described in the above embodiments and the accompanying drawings, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be executed in the order in which they appear in this article or executed in parallel, and the sequence numbers of the operations, such as 101, 102, etc., are only used to distinguish between different operations, and the sequence numbers themselves do not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions of "first", "second", etc. in this article are used to distinguish different messages, devices, modules, etc., do not represent the order of precedence, and do not limit the "first" and "second" to be different types.
[0078] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.
[0079] Figure 8 A schematic diagram of the structure of an electronic device provided by an exemplary embodiment of the present application is shown. Figure 8 As shown, the electronic device includes: a memory 801 and a processor 802.
[0080] The memory 801 is used to store computer programs and can be configured to store various other data to support operations on the electronic device. Examples of such data include instructions for any application program or method operating on the electronic device.
[0081] The processor 802 is coupled to the memory 801 and is used to execute the computer program in the memory 801, so as to: display an editing interface, wherein the editing interface includes an editing area and a preview window adapted to a target device type, wherein the preview window includes multiple page elements required to generate a target page, and initial layout information is provided between the multiple page elements; in response to an editing operation on the multiple page elements in the editing area, synchronously displaying editing results corresponding to the multiple page elements in the preview window, wherein the editing results include: target layout information between the multiple page elements and content data corresponding to the multiple page elements; and storing the target layout information and the content data corresponding to the multiple page elements in a structured data storage format to obtain structured data corresponding to the target page, wherein the structured data is used to render the target page on a device corresponding to the target device type.
[0082] Optionally, when the processor 802 responds to the editing operation on the multiple page elements in the editing area and synchronously displays the editing results corresponding to the multiple page elements in the preview window, it is specifically used to: for any target page element among the multiple page elements, respond to the editing operation on the target page element and display the editing window corresponding to the target page element in the editing interface; obtain content data edited for the target page element based on the content editing operation in the editing window; and synchronously display the content data edited for the target page element in the preview window based on the target layout position corresponding to the target page element in the target layout information.
[0083] Optionally, the processor 802 is also used to: if the target page element is a text type element, display a variable insertion control in the editing window; in the process of obtaining content data edited for the target page element according to the content editing operation in the editing window, respond to a triggering operation on the variable insertion control, insert a target variable in the text content corresponding to the target page element, and the target variable is used to obtain the corresponding variable value when rendering the target page.
[0084] Optionally, the editing window also includes: a layout adjustment control corresponding to the target page element; based on the target layout position corresponding to the target page element in the target layout information, before synchronously displaying the content data edited for the target page element in the preview window, the processor 802 is also used to: respond to a trigger operation on the layout adjustment control, and determine the target layout position corresponding to the target page element in the vertical direction of the preview window according to the layout adjustment rule corresponding to the layout adjustment control.
[0085] Optionally, the editing interface includes a page element library, which contains different types of page elements; when the processor 802 displays the multiple page elements in the preview window, it is specifically used to: respond to the operation of instantiating any type of page element in the page element library into a page element to be edited in the preview window, and determine the display position of the page element to be edited in the longitudinal direction of the preview window as the initial layout position; according to the initial layout position of the page element to be edited, display the page element to be edited in the preview window, and the page element to be edited belongs to the multiple page elements.
[0086] Optionally, when the processor 802 displays a preview window adapted to the target device type on the editing interface, it is specifically used to: display a switching control corresponding to at least one device type on the editing interface; in response to a triggering operation of a switching control corresponding to the target device type in the at least one device type switching control, display the preview window in the editing interface according to a page style corresponding to the target device type.
[0087] Optionally, when the processor 802 stores the target layout information and the content data corresponding to the multiple page elements in a structured data storage format, it is specifically used to: obtain structured storage objects corresponding to the multiple page elements according to the content data corresponding to the multiple page elements, where the structured storage object corresponding to any page element uses the page element as a key and the content data corresponding to the page element as a value; and store the storage objects corresponding to the multiple page elements in sequence according to the target layout information.
[0088] Figure 8When the electronic device shown in the diagram implements a terminal device of the target device type, it can also be used to execute a page content display method, wherein the processor 802 is coupled to the memory 801 and is used to execute a computer program in the memory 801, so as to: respond to an access operation to a target page, obtain structured data corresponding to the target page, and the structured data is edited using the methods described in the aforementioned embodiments; parse the structured data using a data parsing protocol corresponding to a structured data storage format to obtain target layout information between multiple page elements on the target page and content data corresponding to the multiple page elements; render the target page according to the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
[0089] Optionally, when the processor 802 renders the target page according to the content data corresponding to the multiple page elements and the target layout information between the multiple page elements, it is specifically used to: obtain a visual theme corresponding to the target page; determine, according to the visual theme, the display styles corresponding to each of the multiple page elements; and render the target page according to the display styles and content data corresponding to the multiple page elements and the target layout information between the multiple page elements.
[0090] Optionally, the processor 802 is also used to: in the process of rendering the target page, for any target page element among the multiple page elements, if the content data of the target page element includes a target variable, obtain the variable value corresponding to the target variable; and render the target page element according to the content data corresponding to the target page element and the variable value corresponding to the target variable.
[0091] Further, if Figure 8 As shown, the electronic device also includes: a communication component 803, a power component 804, a display component 805, an audio component 806 and other components. Figure 8 Only some components are shown schematically, which does not mean that the electronic device only includes Figure 8 Components shown. Figure 8 Components in the dashed box are optional components, not mandatory components, and may depend on the product form of the electronic device. The electronic device of this embodiment may be implemented as a terminal device such as a desktop computer, a laptop computer, a smart phone or an IOT device.
[0092] Among them, the memory 801 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.
[0093] The communication component 803 is configured to facilitate wired or wireless communication between the device where the communication component is located and other devices. The device where the communication component is located can access a wireless network based on a communication standard, such as Wi-Fi (wireless network communication technology), 2G (such as Global System for Mobile Communications (GSM)), 3G (such as Wideband Code Division Multiple Access (WCDMA), 4G (such as Long Term Evolution (LTE)), 4G+ (such as upgraded Long Term Evolution (LTE-Advanced, LTE-A)) or 5G (5th Generation Mobile Communication Technology), or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component can be implemented based on Near Field Communication (NFC) technology, Radio Frequency Identification (RFID) technology, Infrared Data Association (IrDA) technology, Ultra Wide Band (UWB) technology, Bluetooth (BT) technology and other technologies.
[0094] The power supply component 804 is used to provide power to various components of the device where the power supply component is located. The power supply component may include a power management system, one or more power supplies, and other components associated with generating, managing and distributing power to the device where the power supply component is located.
[0095] The display assembly includes a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.
[0096] The audio component may be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC), and when the device where the audio component is located is in an operating mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal may be further stored in a memory or sent via a communication component. In some embodiments, the audio component also includes a speaker for outputting an audio signal.
[0097] In this embodiment, by displaying a preview window adapted to the target device type in the editing interface, the editing result of the target page can be synchronously displayed in the preview window during the editing of the target page, making the page editing process and the editing result more intuitive, thereby facilitating the dynamic adjustment of the editing process according to the editing result, so that the editing result can adapt to the target device type. Among them, the target layout information between the page elements and the content data corresponding to the page elements are stored in a structured data storage format, which is convenient for reliably and accurately parsing the editing results adapted to the target device type on the terminal device of the target device type, thereby ensuring the consistency of the editing result and the rendering result, and achieving the effect of "what you see when editing is what you get when rendering".
[0098] Accordingly, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, which, when executed, can implement each step that can be executed by an electronic device in the above method embodiment.
[0099] The embodiment of the present application also provides a computer program product, including: a computer program / instructions, which, when executed by a processor, can implement the steps in the method provided in the embodiment of the present application.
[0100] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM (Compact Disc Read-Only Memory, read-only optical disc read-only memory), optical storage, etc.) containing computer-usable program codes.
[0101] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0102] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.
[0103] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0104] In a typical configuration, a computing device includes one or more processors (Central Processing Unit, CPU), input / output interface, network interface and memory.
[0105] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.
[0106] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, Parallel Random Access Machine (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, CD-ROM, Digital Video Disc (DVD) or other optical storage, magnetic cassettes, disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.
[0107] It should also be noted that the terms "comprises", "includes" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, product or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, product or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other identical elements in the process, method, product or device including the element.
[0108] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.
Claims
1. A method for editing page content, characterized in that: include: Displaying an editing interface, wherein the editing interface includes an editing area and a preview window adapted to the target device type, wherein the preview window includes a plurality of page elements required to generate a target page, and initial layout information is provided between the plurality of page elements; In response to an editing operation on the plurality of page elements in the editing area, synchronously displaying editing results corresponding to the plurality of page elements in the preview window, the editing results including: target layout information between the plurality of page elements and content data corresponding to the plurality of page elements; The target layout information and the content data corresponding to the multiple page elements are stored in a structured data storage format to obtain structured data corresponding to the target page, and the structured data is used to render the target page on a device corresponding to the target device type.
2. The method according to claim 1, characterized in that In response to the editing operation on the multiple page elements in the editing area, synchronously displaying the editing results corresponding to the multiple page elements in the preview window, including: For any target page element among the multiple page elements, in response to an editing operation on the target page element, an editing window corresponding to the target page element is displayed on the editing interface; According to the content editing operation in the editing window, acquiring content data edited for the target page element; According to the target layout position corresponding to the target page element in the target layout information, the content data edited for the target page element is synchronously displayed in the preview window.
3. The method according to claim 2, characterized in that Also includes: If the target page element is a text type element, display a variable insertion control in the editing window; In the process of obtaining the content data edited for the target page element according to the content editing operation in the editing window, in response to the triggering operation of the variable insertion control, the target variable is inserted into the text content corresponding to the target page element, and the target variable is used to obtain the corresponding variable value when rendering the target page.
4. The method according to claim 2, characterized in that: The editing window further includes: a layout adjustment control corresponding to the target page element; and before synchronously displaying the content data edited for the target page element in the preview window according to the target layout position corresponding to the target page element in the target layout information, further includes: In response to a triggering operation on the layout adjustment control, a target layout position corresponding to the target page element is determined in a longitudinal direction in the preview window according to a layout adjustment rule corresponding to the layout adjustment control.
5. The method according to any one of claims 1 to 4, characterized in that: The editing interface includes a page element library, and the page element library contains different types of page elements; Displaying the plurality of page elements in the preview window includes: In response to an operation of instantiating any type of page element in the page element library into a page element to be edited in the preview window, determining a display position of the page element to be edited in a longitudinal direction in the preview window as an initial layout position; The page element to be edited is displayed in the preview window according to the initial layout position of the page element to be edited, and the page element to be edited belongs to the multiple page elements.
6. The method according to any one of claims 1 to 4, characterized in that: Displaying a preview window adapted to the target device type on the editing interface includes: Displaying a switching control corresponding to at least one device type on the editing interface; In response to a triggering operation of a switch control corresponding to a target device type in the at least one device type switch control, the preview window is displayed in the editing interface according to a page style corresponding to the target device type.
7. The method according to any one of claims 1 to 4, characterized in that: Storing the target layout information and the content data corresponding to the plurality of page elements in a structured data storage format includes: According to the content data corresponding to the multiple page elements, obtain structured storage objects corresponding to the multiple page elements, wherein the structured storage object corresponding to any page element uses the page element as a key and the content data corresponding to the page element as a value; According to the target layout information, the storage objects corresponding to the multiple page elements are stored in sequence.
8. A page content display method, applied to a terminal device of a target device type, characterized in that: include: In response to an access operation to a target page, obtaining structured data corresponding to the target page, wherein the structured data is edited using the method according to any one of claims 1 to 7; The structured data is parsed using a data parsing protocol corresponding to a structured data storage format to obtain target layout information between multiple page elements on the target page and content data corresponding to the multiple page elements; The target page is rendered according to the target layout information between the multiple page elements and the content data corresponding to the multiple page elements.
9. The method according to claim 8, characterized in that: Rendering the target page according to the content data corresponding to the multiple page elements and the target layout information between the multiple page elements includes: Obtaining a visual theme corresponding to the target page; Determining, according to the visual theme, display styles corresponding to each of the plurality of page elements; The target page is rendered according to the display styles and content data corresponding to the multiple page elements and the target layout information between the multiple page elements.
10. The method according to claim 8 or 9, characterized in that: Also includes: In the process of rendering the target page, for any target page element among the multiple page elements, if the content data of the target page element includes a target variable, obtaining a variable value corresponding to the target variable; The target page element is rendered according to the content data corresponding to the target page element and the variable value corresponding to the target variable.
11. An electronic device, characterized in that: include: Memory and processor; The memory is used to store one or more computer instructions; The processor is configured to execute the one or more computer instructions to: perform the steps in the method according to any one of claims 1-10.
12. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps in the method described in any one of claims 1 to 10 can be implemented.
13. A computer program product, characterized in that include: A computer program / instruction, which, when executed by a processor, can implement the steps of the method according to any one of claims 1 to 10.