Website page modification method and device, electronic device, and storage medium

By visually modifying and re-rendering the target functional block of the website page in the visual editor, the problems of long website creation cycle and high technical requirements are solved, and more efficient website page modification and creation are achieved.

CN113779469BActive Publication Date: 2025-03-18BEIJING WODONG TIANJUN INFORMATION TECH CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202110087024.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-01-22
Publication Date
2025-03-18
Estimated Expiration
2041-01-22

AI Technical Summary

Technical Problem

The website creation cycle is too long, and modifying or adding website pages has high technical requirements.

Method used

By taking the original website page and sending it to a pre-built visual editor, visual modifications of the target functional blocks are generated, and the website page is rerendered based on these blocks.

Benefits of technology

It improves the convenience of website creation and the efficiency of website page modification, simplifies technical requirements, and improves the reusability of unmodified functional blocks.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN113779469B_ABST
    Figure CN113779469B_ABST
Patent Text Reader

Abstract

The present disclosure provides a website page modification method and device, electronic device, and storage medium, and relates to the field of computer technology. The website page modification method includes: obtaining an original website page, the original website page is obtained based on a pre-built visual editor; sending the original website page to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes multiple target functional blocks; based on a visual modification operation on the target functional block, a modified target functional block is generated; according to the modified target functional block and the unmodified target functional block, the original website page is re-rendered to obtain the target website page. The technical solution of the embodiment of the present disclosure can perform visual editing of the target functional block through a visual editor, thereby realizing the modification of the original website page.
Need to check novelty before this filing date? Find Prior Art

Description

Background Art

[0002] With the rapid development of Internet technology, the types of websites are becoming more and more diverse, and websites of different types or styles are composed of multiple website pages. The design and generation process of website pages is particularly important.

[0003] At present, in the process of creating websites of different types or styles, if it is necessary to modify some website pages or add website pages, secondary development is still required on the front end, which leads to a long website creation cycle and high technical requirements for modifying or adding website pages.

[0004] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0005] The purpose of the embodiments of the present disclosure is to provide a website page modification method, a website page modification device, an electronic device and a computer-readable storage medium, thereby at least to a certain extent overcoming the problem that the website creation cycle is too long and the modification or addition of website pages has high technical requirements.

[0006] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by the practice of the present disclosure.

[0007] According to a first aspect of an embodiment of the present disclosure, a website page modification method is provided, comprising: obtaining an original website page, wherein the original website page is obtained based on a pre-built visual editor; sending the original website page to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes multiple target functional blocks; based on a visual modification operation on the target functional blocks, generating a modified target functional block; and re-rendering the original website page according to the modified target functional block and the unmodified target functional block to obtain the target website page.

[0008] In some example embodiments of the present disclosure, based on the aforementioned scheme, the method further includes: providing an interactive interface corresponding to a visual editor for editing the original website page, the interactive interface including functional blocks for implementing different functions and a page preview area; rendering and displaying a target functional block selected and edited from the functional block to the page preview area to constitute an original website page in a preview state; if an instruction to publish the original website page in a preview state is detected, saving a configuration file corresponding to the target functional block in the original website page in the preview state, so that when the original website page is called, the original website page is rendered and displayed according to the configuration file.

[0009] In some example embodiments of the present disclosure, based on the aforementioned scheme, the configuration file of the target functional block includes a block configuration file, a block style file, and a block logic code file; when calling the original website page, rendering and displaying the original website page according to the configuration file includes: when detecting that the original website page is called, obtaining the block configuration file, block style file, and block logic code file corresponding to the target functional block in the original website page; based on a rendering engine, rendering and displaying the original website page according to the block configuration file, the block style file, and the block logic code file.

[0010] In some example embodiments of the present disclosure, based on the aforementioned scheme, the rendering engine, according to the block configuration file, the block style file, and the block logic code file, renders and displays the original website page, including: obtaining object attribute data from a back-end server according to the block configuration file; based on the rendering engine, rendering and displaying the original website page according to the object attribute data, the block style file, and the block logic code file.

[0011] In some example embodiments of the present disclosure, based on the aforementioned scheme, the interactive interface also includes a website page layout template, and rendering and displaying the target functional block selected and edited from the functional block to the page preview area also includes: rendering and displaying the selected target website page layout template to the page preview area.

[0012] In some example embodiments of the present disclosure, based on the aforementioned scheme, a modified target functional block is generated based on a visual modification operation on the target functional block, including: when selecting the target functional block in the original website page, providing a functional block editing component; performing a visual modification operation on the target functional block according to the functional block editing component to generate a modified target functional block.

[0013] In some example embodiments of the present disclosure, based on the aforementioned scheme, when calling the original website page, rendering and displaying the original website page according to the configuration file also includes: obtaining identification data corresponding to the original website page; matching the site navigation configuration file corresponding to the original website page from a database according to the identification data; and based on the rendering engine, rendering and displaying the site navigation information corresponding to the original website page according to the site navigation configuration file.

[0014] According to the second aspect of the embodiment of the present disclosure, a website page modification device is provided, comprising: an original website page acquisition module, an original website page sending module, a target functional block modification module, and a target website page generation module. The original website page acquisition module is used to acquire the original website page, which is obtained based on a pre-built visual editor; the original website page sending module is used to send the website page to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes multiple target functional blocks; the target functional block modification module is used to generate a modified target functional block based on a visual modification operation on the target functional block; the target website page generation module is used to re-render the original website page according to the modified target functional block and the unmodified target functional block to obtain the target website page.

[0015] In some example embodiments of the present disclosure, based on the aforementioned scheme, the website page modification device also includes an original website page creation unit; the original website page creation unit is used to provide an interactive interface corresponding to a visual editor for editing the original website page, the interactive interface including functional blocks for implementing different functions and a page preview area; the target functional blocks selected and edited from the functional blocks are rendered and displayed in the page preview area to constitute an original website page in a preview state; if an instruction to publish the original website page in a preview state is detected, the configuration file corresponding to the target functional block in the original website page in the preview state is saved, so that when the original website page is called, the original website page is rendered and displayed according to the configuration file.

[0016] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page acquisition module also includes an original website page display unit; the original website page display unit is used to obtain the block configuration file, block style file, and block logic code file corresponding to the target functional block in the original website page when detecting that the original website page is called; based on the rendering engine, the original website page is rendered and displayed according to the block configuration file, the block style file, and the block logic code file.

[0017] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page acquisition module also includes an object attribute data acquisition unit; the object attribute acquisition unit is used to obtain object attribute data from a back-end server according to the block configuration file; based on the rendering engine, the original website page is rendered and displayed according to the object attribute data, the block style file, and the block logic code file.

[0018] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page sending module also includes a target website page layout template rendering unit; the target website page layout rendering unit is used to render and display the selected target website page layout template to the page preview area.

[0019] In some example embodiments of the present disclosure, based on the aforementioned scheme, the target function block modification module also includes a target function block modification unit; the target function block modification unit is used to provide a function block editing component when selecting the target function block in the original website page; and perform a visual modification operation on the target function block according to the function block editing component to generate a modified target function block.

[0020] In some example embodiments of the present disclosure, based on the aforementioned scheme, the target website page generation module also includes a site navigation information rendering unit; the site navigation information rendering unit is used to obtain identification data corresponding to the original website page; match the site navigation configuration file corresponding to the original website page from the database according to the identification data; based on the rendering engine, render and display the site navigation information corresponding to the original website page according to the site navigation configuration file.

[0021] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, comprising: a processor; and a memory, wherein the memory stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, any one of the above-mentioned website page modification methods is implemented.

[0022] According to a fourth aspect of an embodiment of the present disclosure, there is provided a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the website page modification method according to any one of the above items is implemented.

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

[0024] The website page modification method in the example embodiment of the present disclosure obtains the original website page, which is obtained based on a pre-built visual editor; sends the original website page to the visual editor to obtain the original website page in an editable state; the original website page in the editable state includes multiple target function blocks; based on the visual modification operation of the target function block, a modified target function block is generated; according to the modified target function block and the unmodified target function block, the original website page is re-rendered to obtain the target website page. On the one hand, a website page with various styles can be constructed based on the preset visual editor, thereby improving the convenience of website creation; on the other hand, through the visual editor, the original website page in an editable state can be obtained, and then the target function block of the original website page can be directly modified, thereby improving the modification efficiency of the website page; on the other hand, according to the unmodified target function block and the modified target function block in the preset visual editor, the target website page can be obtained through the rendering engine, thereby improving the reusability of the unmodified target function block.

[0025] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present disclosure, and together with the specification, are used to explain the principles of the present disclosure. Obviously, the drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0027] Figure 1 A schematic diagram schematically illustrates a website page modification method according to some embodiments of the present disclosure;

[0028] Figure 2 A schematic diagram schematically illustrates a process of constructing an original website page according to some embodiments of the present disclosure;

[0029] Figure 3 A schematic diagram schematically illustrates another process of constructing an original website page according to some embodiments of the present disclosure;

[0030] Figure 4 A schematic diagram schematically illustrates a process of rendering an original website page according to some embodiments of the present disclosure;

[0031] Figure 5 A schematic diagram schematically illustrates a process of modifying a target functional block according to some embodiments of the present disclosure;

[0032] Figure 6 A schematic diagram schematically shows a page preview area corresponding to a target function block according to some embodiments of the present disclosure;

[0033] Figure 7 A schematic diagram schematically shows the corresponding target functional block after modification in the page preview area according to some embodiments of the present disclosure;

[0034] Figure 8 A schematic diagram schematically shows a website page modification device according to some embodiments of the present disclosure;

[0035] Fig. 9 A schematic diagram schematically shows a structure of a computer system of an electronic device according to some embodiments of the present disclosure;

[0036] Fig.10 A schematic diagram of a computer-readable storage medium according to some embodiments of the present disclosure is schematically shown.

[0037] In the drawings, the same or corresponding reference numerals represent the same or corresponding parts. DETAILED DESCRIPTION

[0038] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more comprehensive and complete and will fully convey the concept of the example embodiments to those skilled in the art.

[0039] In addition, the described features, structures or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring the various aspects of the present disclosure.

[0040] Furthermore, the drawings are only schematic illustrations and are not necessarily drawn to scale. The block diagrams shown in the drawings are only functional entities and do not necessarily correspond to physically separate entities. That is, these functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0041] In this example embodiment, a website page modification method is first provided. The website page modification method can be applied to terminal devices, such as mobile phones, computers and other electronic devices. Figure 1 The following is a schematic diagram of a website page modification method process according to some embodiments of the present disclosure. Figure 1 As shown, the website page modification method may include the following steps:

[0042] Step S110, obtaining an original website page, where the original website page is obtained based on a pre-built visual editor;

[0043] Step S120, sending the original website page to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes a plurality of target functional blocks;

[0044] Step S130, generating a modified target functional block based on the visual modification operation on the target functional block;

[0045] Step S140, re-rendering the original website page according to the modified target functional block and the unmodified target functional block to obtain the target website page.

[0046] According to the website page modification method in this example embodiment, on the one hand, website pages of various styles can be constructed based on the preset visual editor, thereby improving the convenience of website creation; on the other hand, the original website page in an editable state can be obtained through the visual editor, and then the target function block of the original website page can be directly modified, thereby improving the modification efficiency of the website page; on the other hand, the target website page can be obtained through the rendering engine based on the unmodified target function block and the modified target function block in the preset visual editor, thereby improving the reusability of the unmodified target function block.

[0047] Next, taking a terminal device as an example, the website page modification method in this exemplary embodiment will be further described.

[0048] In step S110 , an original website page is obtained, where the original website page is obtained based on a pre-built visual editor.

[0049] In an example embodiment of the present disclosure, the original website page may refer to a website page that has not been modified on the website page in the original website. For example, the original website page may be a homepage website page containing global navigation information of the original website, or it may be a sub-website page corresponding to the homepage website page in the original website. For example, when the original website is a popular variety show website, the original website page may be the homepage website page corresponding to the popular variety show website containing navigation information such as movies, TV series, variety shows, animation, live broadcasts, and movie news. The sub-website page corresponding to the homepage website page may be a website page corresponding to the movie navigation information containing information about movies currently being released and about to be released. Of course, the original website page may also refer to other website pages that have not been modified on the website pages in the original website, such as a website page containing prompt information such as the server cannot provide correct information. This example embodiment does not make any special limitations on this.

[0050] A visual editor may refer to a network editor that implements modification or addition of website pages. For example, a visual editor may be a network editor having a text editing module and an adding module (which may add pictures, videos, codes, etc.). A visual editor may also be a network editor that includes a main editing area, a function area, a layer preview area, and an auxiliary editing area. Of course, a visual editor may also refer to other network editors that correspond to visual editing of website pages. This embodiment does not specifically limit this.

[0051] Preferably, the original website page can be constructed by a preset visual editor. The main steps of constructing the original website page by the visual editor are: determining the category of the original website and adding a data source to the category of the original website, that is, determining the name of the data source, the domain name of the data source and the prefix of the data source, and configuring fields for the data source of the original website, such as field key value, field prefix, field type (input box, single check box, multiple check boxes, radio button, multiple choice button); then, configuring the original website with a request interface for accessing the data source corresponding to the original website, and a data maintenance logic unit (site management platform) that can realize the online function of the original website; finally, determining the data source of the original website, the request interface for accessing the data source corresponding to the original website, and the corresponding relationship between the data maintenance logic unit, and generating an environment configuration file of the original website based on the data source of the original website, the request interface for accessing the data source corresponding to the original website, and the corresponding relationship between the data maintenance logic unit, so that the rendering engine can determine the front-end and back-end environment of the original website according to the environment configuration file, and then render and display the website page in the original website.

[0052] In step S120, the original website page is sent to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes a plurality of target functional blocks.

[0053] In an example embodiment of the present disclosure, the target functional block may refer to a component with more functions or styles. For example, the target functional block may be a block basic configuration component including block keywords, block types, and block preview images. The target functional block may also be a block functional attribute configuration component that distinguishes block types through key-value pairs. Of course, the target functional block may also be other components with more functions or styles, and this example embodiment does not specifically limit this.

[0054] Preferably, the data source address or browser access address corresponding to the original website page can be copied to the visual editor. The visual editor can match the configuration information corresponding to the original website page in the database according to the data source address or browser address, and then render the original website page in an editable state through the rendering engine. The user can select the target function block in the visual editor to add or modify the original website page.

[0055] In step S130 , a modified target functional block is generated based on the visual modification operation on the target functional block.

[0056] In an example embodiment of the present disclosure, a visual modification operation may refer to an operation of modifying the original website page according to the icon or prompt information of the functional area of ​​the visual editor. For example, the visual modification operation may be an operation of modifying the font size corresponding to the block name of the target block, or an operation of modifying the background color of the target block, or an operation of adding audio data to the target functional block. Of course, the visual operation may also be other operations of modifying the original website page according to the icon or prompt information of the functional area of ​​the visual editor, such as deleting several target functional blocks in the original website page. This example embodiment does not specifically limit this.

[0057] Preferably, the target function block can be modified according to the form information corresponding to the target function block in the visual editor. For example, the form information of the target function block is: block name, block keyword, block type (input box, drop-down box, etc.), and the form information corresponding to the unmodified target function block 1 is: block name is Programming Course Live, block keyword is About to Start, and block type is input box. If the user needs to modify the target function block, the modification can be made according to the form information corresponding to the target function block. For example, the user needs to modify the block name and block keyword of the target function block 1 and modify the target function block 1 to the corresponding block name Creative Lab and block keyword Creative Optimizer. The target function component can be modified by entering specific content in the input box corresponding to the block name and block keyword according to the form information. There is no need to rewrite the code of the target function block, which improves the convenience of modifying the target function component.

[0058] In step S140, the original website page is re-rendered according to the modified target functional block and the unmodified target functional block to obtain a target website page.

[0059] In an example embodiment of the present disclosure, an unmodified target functional block may refer to multiple target functional blocks included in the visual editor. For example, the unmodified target functional block may be a target functional block that has not been modified in the original website page, or it may be a target functional block that does not exist in the original website page but belongs to the visual editor. This example embodiment does not specifically limit this.

[0060] The target website page may refer to a website page generated by modifying the original website page. For example, the original website page may be a website page containing three target function blocks. The target website page may be a website page generated by deleting the first target function block in the original website page. Of course, the target website page may also be other website pages generated by modifying the original website page. This embodiment does not specifically limit this.

[0061] Preferably, an editable original website page is generated by a visual editor. Since the original website page is composed of a plurality of different target function blocks, each target function block has a corresponding block editing component in the visual editor. When the original website page needs to be modified, the user only needs to click the target function block to modify the target function block. The block editing component corresponding to the target function component determines the form information or configuration item data corresponding to the target function block. The target function block can be modified by inputting specific content in the input box where the target function block needs to be modified or selecting specific data in the drop-down box. The modification of the target function block can be realized. At the same time, the target function block that has not been modified in the original website page and the target function block that has been modified are independent of each other. When the modification of the target function block is completed, the visual editor sends the environment configuration file corresponding to the original website page to the rendering engine, and the environment configuration file is parsed by the rendering engine, and then the configuration information corresponding to each target function block in the original configuration file is determined, and each target function block is rendered based on the configuration information, that is, the rendering display of the target website page is realized.

[0062] Figure 2 A schematic diagram schematically illustrates a process of constructing an original website page according to some embodiments of the present disclosure; Figure 2 As shown, it can be Figure 2 The steps in generate the original website page:

[0063] In step S210, an interactive interface corresponding to the visual editor for editing the original website page is provided, wherein the interactive interface includes functional blocks for implementing different functions and a page preview area;

[0064] In step S220, the target functional block selected and edited from the functional blocks is rendered and displayed in the page preview area to form an original website page in a preview state;

[0065] In step S230, if an instruction to publish the original website page in the preview state is detected, the configuration file corresponding to the target functional block in the original website page in the preview state is saved, so that when the original website page is called, the original website page is rendered and displayed according to the configuration file.

[0066] Among them, the functional block can refer to the block used to construct the original website page. For example, the functional block can be a navigation block corresponding to the original website page, or a block used to display the specific page content of the original website page, or a hot list block corresponding to the information with a large number of views. Of course, the functional block can also be a block used to construct the original website page, such as a form block containing configuration information such as input boxes, single choices, multiple choices, drop-down boxes, ratings, submissions, modifications, etc. This example embodiment does not make any special limitations on this.

[0067] The page pre-browsing area may refer to a visualization area corresponding to a visualization editor used for browsing pages. For example, the page pre-browsing area may be a visualization area corresponding to the layout of the original website page in the visualization editor, or may be a visualization area including multiple specific functional blocks, or may be a visualization area in which each functional block is placed at a corresponding block position according to the layout of the original website page. This embodiment does not specifically limit this.

[0068] The configuration file may refer to a configuration resource file corresponding to a target functional block used to construct an original website page. For example, the configuration file may be an environment configuration file that determines the correspondence between the data source, interface, and original website page of the target functional block. The configuration file may also be a configuration resource file corresponding to the properties of the target functional block provided to the user in a visual editor. The configuration file may also be a configuration resource file corresponding to the rendering of the target functional block implemented by a rendering engine. Of course, the configuration file may also refer to other configuration resource files corresponding to the target functional blocks used to construct the original website page. This embodiment does not specifically limit this.

[0069] Preferably, multiple function blocks can be selected as template function blocks in the visual editor, and the template function blocks can be directly dragged to the page preview area, and then by clicking the template function block, the attribute data, block shape size, block background color, block keywords, etc. of the template function block can be directly modified in the block editing component corresponding to the template function block, and the rendering engine can render the target function block according to the configuration information corresponding to the modified template block, and the real-time editing and preview of the target function block can be realized through the page preview area. In addition, when the publishing instruction of the original website page in the page preview area is detected, the configuration file corresponding to each target function block in the original website page can be saved to the database, so that the rendering engine can directly call the configuration file corresponding to each target function block from the database according to the data source request interface corresponding to the original website page, and realize the rendering of each target function block based on the configuration file, so that the original website page can be launched online with one click, and it is not necessary to package the modified function block online after modifying the function block (template function block) in the original website page, thereby improving the publishing efficiency of the original website page.

[0070] Figure 3 A schematic diagram schematically shows another process of constructing an original website page according to some embodiments of the present disclosure:

[0071] refer to Figure 3 It can be seen that there are multiple original website pages composed of different functional blocks in the pre-built visual editor, and the original website page is mainly composed of a global navigation block 310, a functional block 320, a functional block 330, a functional block 340, a functional block 350, a functional block 360, and a page jump block 370; wherein, the functional block 310 is used to create a global navigation of the original website page. Specifically, when the user clicks on the core technology, the original website page will be refreshed to the content of the core technology page. The functional block 320 is used to introduce the key role of the original website page, that is, the keywords or main functions of the original website page. The functional block 330 is used to introduce the main content of the original website page. The functional block 340 is used to display the functional blocks corresponding to the original website page in the form of cards. It can be seen from the figure that the main website page content of the original website page is composed of functional blocks 341, 342, 343, and 344.

[0072] Preferably, when constructing the original website page, a function block 341 can be selected from a preset visual editor, and then the configuration information or attribute data in the function block 341 can be modified to obtain function blocks 342, 343, and 344; wherein, the function block 341 includes a block name 350, a block keyword 351, and a block icon 352; the function block 341 can be copied and the copied function block 341 can be dragged to the right side of the function block, and then the form information corresponding to the copied function block 341 can be edited, that is, the block name, the block keyword, and the block icon of the copied function block 341 can be modified, and a function block 342 including a block name of Creative Inspiration 360, a block keyword 361 of a picture ranking, a video ranking, or a production template, and a block icon 362 of a creative upward arrow can be obtained, and the user does not need to modify the code to realize real-time editing and modification of the function blocks, thereby improving the generation efficiency of the original website page.

[0073] Figure 4 A schematic diagram schematically illustrates a process of rendering an original website page according to some embodiments of the present disclosure; Figure 4 As shown, it can be Figure 4 Render the original website page using the steps in:

[0074] In step S410, when the original website page is detected to be called, a block configuration file, a block style file, and a block logic code file corresponding to the target function block in the original website page are obtained;

[0075] In step S420, based on a rendering engine, the original website page is rendered and displayed according to the block configuration file, the block style file, and the block logic code file.

[0076] Among them, the block configuration file may refer to a configuration resource file containing the data source, interface, and form information of the function block of the original website page where the function block is located. For example, the block configuration file may be a configuration resource file containing information such as the name of the function block, the description of the function block, and the type of the function block. The block configuration file may also be a configuration resource file corresponding to information such as the access route of the function block. Of course, the block configuration file may also refer to other configuration resource files corresponding to the function block, and this embodiment does not make any special limitation to this.

[0077] The block style file may refer to a style file used to determine the shape, size, background color, etc. of the function block displayed in the page preview area. For example, the block style file may be a style file that determines the font size and font color corresponding to the name of the function block or the description of the function block. The block style file may also be a style file that determines the corresponding arrangement interval between the function block and other function blocks in the original website page. The block style file may also be a style file used to determine the cascading effect of the function block. Of course, the block style file may also be other style files used to determine the shape, size, background color, etc. of the function block displayed in the page preview area. This embodiment does not specifically limit this. The block code file may refer to a code file that implements the editing, modification, and rendering display of the function block.

[0078] Preferably, when the access information of the original website page is detected, the configuration file of the target functional block corresponding to the original website page, i.e., the block configuration file, block style file, and block code file, is directly obtained from the database, and the rendering engine parses the block configuration file, block style file, and block code file, and calls the block configuration file, block style file, and block code file to realize the rendering and display of the original website page, thereby improving the rendering efficiency of the original website page.

[0079] In an exemplary embodiment of the present disclosure, object attribute data can be obtained from a backend server according to a block configuration file; based on a rendering engine, the original website page is rendered and displayed according to the object attribute data, block style file, and block logic code file.

[0080] Among them, object attribute data may refer to attribute data that describes the name, keywords, type and other information of the function block in the form of a key-value pair. For example, the object attribute data may be attribute data corresponding to the type of the function block, wherein the type of the function block is the article type, and the corresponding key value is video. The object attribute data may also be attribute data corresponding to the basic settings of the function block, such as the display effect of the function block is a dynamic image, and the corresponding key value is the beating frequency. Of course, the object attribute data may also be other attribute data that describes the name, keywords, type and other information of the function block in the form of a key-value pair, and this embodiment does not make any special limitation to this.

[0081] Preferably, the access information of the original website page is detected, and the browser engine passes the data source address and interface address of the original website page to the rendering engine. The rendering engine parses the block configuration file, block style file, and block style file corresponding to the original website page through the back-end parser, and then determines the object attribute data corresponding to each functional block based on the block configuration file, and renders the original website page according to the block style file and block code file, thereby improving the user's access efficiency to the original website page.

[0082] In an exemplary embodiment of the present disclosure, the selected target website page layout template can be rendered and displayed in the page preview area, and then the target function block can be dragged to the block position corresponding to the target website page layout to obtain the website page containing the target website page layout.

[0083] The target website page template may refer to a website page template selected from a preset visual editor. For example, the target website page template may be an official website page template for the education industry, an official website page template for the enterprise industry, or a template for a game website page. Of course, the target website page may also be a website page template for other industries, and this embodiment does not make any special limitations on this.

[0084] Preferably, in the process of constructing the original website page through the visual editor, you can first select a website page layout template in the visual editor as the target website page template; secondly, select a function block in the visual editor, and drag the function block to the target position corresponding to the target website page layout, and then simply edit or modify the function block to obtain the target function block, so that a website page to be published with a standardized style, neat and beautiful appearance can be obtained in the page preview area, thereby improving the user experience.

[0085] Optionally, in the process of building the original website page through the visual editor, you can select different functional blocks in the visual editor, drag the selected functional blocks directly to the target location, and then simply copy and modify the functional blocks to obtain the original website page to be published in the page preview area.

[0086] Figure 5 A schematic diagram schematically shows a process of modifying a target functional block according to some embodiments of the present disclosure; Figure 5 As shown, it can be Figure 5 The steps in get the modified target function component:

[0087] In step S510, when the target functional block in the original website page is selected, a functional block editing component is provided;

[0088] In step S520, a visual modification operation is performed on the target functional block according to the functional block editing component to generate a modified target functional block.

[0089] Among them, the block editing component may refer to a functional component that contains basic information such as a block configuration file and a style file of a functional block. For example, the block editing component may be a functional component that contains object attribute data of a functional block. The block editing component may also be a functional component that contains editing operation cases or prompt messages of a functional block. Of course, the block editing component may also be a functional component that contains other basic information such as a block configuration file and a style file of a functional block. This embodiment does not make any special limitation on this.

[0090] Preferably, the editable target function block can be modified through the block editing component in the visual editor, and the modified target function component can be obtained in the page preview area. The user does not need strong code editing capabilities. The target function block can be modified by simply modifying the object attribute data or other basic information of the target function in the corresponding block editing component in the visual editor, thereby improving the modification efficiency of the target function block.

[0091] Figure 6 A schematic diagram schematically shows a page preview area corresponding to a target function block according to some embodiments of the present disclosure:

[0092] refer to Figure 6 It can be seen that the page preview area 600 mainly includes a target function block preview area 610 and a preview area 620 of a block editing component corresponding to the target function block; wherein the preview area 620 of the block editing component mainly includes a function block background style configuration preview area 630, a function block icon configuration preview area 640, a function block name preview area 650, and a function block description preview area 660; the function block background style configuration preview area 630 mainly includes a function block background color check box 631, a function block width input box 632, and a function block length input box 633; ​​the function The block icon configuration preview area 640 mainly includes a reset radio button 641 and an upload image radio button 642; the function block name preview area 650 mainly includes a menu style check box 651, a font input box 652, a text optional color check box 653, a text selected color radio button 654, a font style check box 655, and a font size check box 656; the function block description preview area 660 mainly includes a menu style check box 661, a font input box 662, a text optional color check box 663, a text selected color radio button 664, a font style check box 665, and a font size check box 666.

[0093] Depend on Figure 6It can be seen that the background color of the target function block is red, the width of the target function block is 240 mm, and the length of the target function block is also 240 mm; the target function block icon is a diamond; the block name of the target function block is intelligent creativity, the font color corresponding to the block name of the target function block is black, the font style is Kaiti, and the font size is 14pt; the block description corresponding to the target function block is dynamic creativity, and the font color corresponding to the block description of the target function block is black, the font style is Kaiti, and the font size is 10pt. In the visual editor, through the block editing component corresponding to the target function block, the block name of the target function block can be changed to creative inspiration, the block description of the target function component can be changed to a production guide, and the font of the block description in the target function block can be changed to 12pt, so as to conveniently modify the target function block.

[0094] Figure 7 A schematic diagram schematically shows a modified target functional block according to some embodiments of the present disclosure:

[0095] refer to Figure 7 It can be seen that the modified target function block 700 only needs to include a block name 710, a block description 720, and a target function block icon 730. Figure 6 It can be seen that the modified target function block is obtained by the user using the block editing component corresponding to the target function block in the visual editor, changing the block name of the target function block to creative inspiration, changing the block description of the target function component to production strategy, and changing the font of the block description in the target function block to 10pt.

[0096] Preferably, the user can modify the target function block in the page preview area through the block editing component corresponding to the target function block before modification. Specifically, the background color, function block width, and function block length of the function block can be modified in the function block background style configuration preview area, and the icon of the target function block after modification can be uploaded by clicking the reset radio button and the upload image radio button in the function block icon configuration preview area; the user can also click the menu style check box, enter the block name, and click the text color selection check box to select the font color corresponding to the block name in the function block name preview area. The text color selection radio button will display the font color corresponding to the block name. At the same time, the font style can be selected by clicking the font style check box, and the font size can be selected by clicking the font size check box. Finally, the data of the block description part of the target function block can be modified in the same way as the block name of the target function block, so as to realize the visual modification operation of the target function block, and the modified target function block will be displayed in the target function block preview area. Therefore, in the visual editor, the target functional block can be edited or modified conveniently through the block editing component corresponding to the target functional block.

[0097] In an exemplary embodiment of the present disclosure, it is possible to obtain identification data corresponding to an original website page; match a site navigation configuration file corresponding to the original website page from a database according to the identification data; and based on a rendering engine, render and display the site navigation information corresponding to the original website page according to the site navigation configuration file.

[0098] The identification data may refer to label data used to determine the original website page. For example, the identification data may be a timestamp for generating the original website page, or may refer to a storage address corresponding to a configuration file of the original website page in a database. Of course, it may also refer to other label data used to determine the original website page. This embodiment does not specifically limit this.

[0099] A site navigation configuration file may refer to a navigation configuration file used to manage website pages corresponding to a site. For example, a site navigation configuration file may be a navigation configuration file that contains navigation information for all website pages in the site, or it may be a navigation configuration file that only contains navigation information corresponding to the site to which the website pages belong. Of course, a site navigation configuration file may also refer to other navigation configuration files used to manage website pages corresponding to a site, and this embodiment does not make any special limitation to this.

[0100] Preferably, the identification data corresponding to the original website page can be obtained, and the site navigation configuration file corresponding to the original website page can be matched from the database according to the identification data; then the rendering engine can render and display the site navigation information corresponding to the original website page according to the site navigation configuration file; when adding website pages of the same site, the navigation configuration of the newly added website pages can be implemented by using the rendering engine according to the site navigation information corresponding to the original website page, which greatly improves the efficiency of website page and site management.

[0101] It should be noted that, although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0102] In addition, in this exemplary embodiment, a website page modification device is also provided. Figure 8 As shown, the website page modification device 800 includes: an original website page acquisition module 810, an original website page sending module 820, a target function block modification module 830, and a target website page generation module 840. The original website page acquisition module 810 is used to acquire the original website page, which is obtained based on a pre-built visual editor; the original website page sending module 820 is used to send the website page to the visual editor to obtain an editable original website page; the editable original website page includes multiple target function blocks; the target function block modification module 830 is used to generate a modified target function block based on a visual modification operation on the target function block; the target website page generation module 840 is used to re-render the original website page according to the modified target function block and the unmodified target function block to obtain the target website page.

[0103] In some example embodiments of the present disclosure, based on the aforementioned scheme, the website page modification device 800 also includes an original website page creation unit; the original website page creation unit is used to provide an interactive interface corresponding to a visual editor for editing the original website page, and the interactive interface includes functional blocks for implementing different functions and a page preview area; the target functional blocks selected and edited from the functional blocks are rendered and displayed in the page preview area to constitute an original website page in a preview state; if an instruction to publish the original website page in a preview state is detected, the configuration file corresponding to the target functional block in the original website page in the preview state is saved, so that when the original website page is called, the original website page is rendered and displayed according to the configuration file.

[0104] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page acquisition module 810 also includes an original website page display unit; the original website page display unit is used to obtain the block configuration file, block style file, and block logic code file corresponding to the target functional block in the original website page when detecting that the original website page is called; based on the rendering engine, the original website page is rendered and displayed according to the block configuration file, the block style file, and the block logic code file.

[0105] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page acquisition module 810 also includes an object attribute data acquisition unit; the object attribute acquisition unit is used to obtain object attribute data from a back-end server according to the block configuration file; based on the rendering engine, the original website page is rendered and displayed according to the object attribute data, the block style file, and the block logic code file.

[0106] In some example embodiments of the present disclosure, based on the aforementioned scheme, the original website page sending module 820 also includes a target website page layout template rendering unit; the target website page layout rendering unit is used to render and display the selected target website page layout template to the page preview area.

[0107] In some example embodiments of the present disclosure, based on the aforementioned scheme, the target function block modification module 830 also includes a target function block modification unit; the target function block modification unit is used to provide a function block editing component when selecting the target function block in the original website page; and perform a visual modification operation on the target function block according to the function block editing component to generate a modified target function block.

[0108] In some example embodiments of the present disclosure, based on the aforementioned scheme, the target website page generation module 840 also includes a site navigation information rendering unit; the site navigation information rendering unit is used to obtain identification data corresponding to the original website page; match the site navigation configuration file corresponding to the original website page from the database according to the identification data; based on the rendering engine, render and display the site navigation information corresponding to the original website page according to the site navigation configuration file.

[0109] The specific details of each module of the above-mentioned website page modification device have been described in detail in the corresponding website page modification method, so they will not be repeated here.

[0110] It should be noted that although several modules or units of the website page modification device are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units for embodiment.

[0111] In addition, in an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above-mentioned website page modification method is also provided.

[0112] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods or program products. Therefore, various aspects of the present disclosure may be specifically implemented in the following forms, namely: complete hardware embodiments, complete software embodiments (including firmware, microcode, etc.), or embodiments combining hardware and software aspects, which may be collectively referred to herein as "circuits", "modules" or "systems".

[0113] Refer to the following Fig. 9 800 according to this embodiment of the present disclosure is described. Fig. 9 The electronic device 900 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0114] like Fig. 9 As shown, the electronic device 900 is in the form of a general computing device. The components of the electronic device 900 may include, but are not limited to: the at least one processing unit 910, the at least one storage unit 920, a bus 930 connecting different system components (including the storage unit 920 and the processing unit 910), and a display unit 940.

[0115] The storage unit stores a program code, which can be executed by the processing unit 910, so that the processing unit 910 performs the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processing unit 910 can perform the following steps: Figure 1 In step S110 shown in the figure, an original website page is obtained, and the original website page is obtained based on a pre-built visual editor; in step S120, the original website page is sent to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes multiple target functional blocks; in step S130, a modified target functional block is generated based on a visual modification operation on the target functional block; in step S140, the original website page is re-rendered according to the modified target functional block and the unmodified target functional block to obtain a target website page.

[0116] The storage unit 920 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 921 and / or a cache memory unit 922 , and may further include a read-only memory unit (ROM) 923 .

[0117] The storage unit 920 may also include a program / utility 924 having a set (at least one) of program modules 925, such program modules 925 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0118] Bus 930 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0119] The electronic device 900 may also communicate with one or more external devices 970 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 900, and / or communicate with any device that enables the electronic device 900 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 950. Furthermore, the electronic device 900 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) via a network adapter 960. As shown, the network adapter 960 communicates with other modules of the electronic device 900 via a bus 930. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 900, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

[0120] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the embodiment of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiment of the present disclosure.

[0121] In an exemplary embodiment of the present disclosure, a computer-readable storage medium is also provided, on which a program product capable of implementing the above method of the present specification is stored. In some possible embodiments, various aspects of the present disclosure may also be implemented in the form of a program product, which includes a program code, and when the program product is run on a terminal device, the program code is used to enable the terminal device to perform the steps according to various exemplary embodiments of the present disclosure described in the above "Exemplary Method" section of the present specification.

[0122] refer to Fig.10 As shown, a program product 1000 for implementing the above-mentioned website page modification method according to an embodiment of the present disclosure is described, which can adopt a portable compact disk read-only memory (CD-ROM) and include program code, and can be run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto. In this document, a readable storage medium can be any tangible medium containing or storing a program, which can be used by or in combination with an instruction execution system, an apparatus or a device.

[0123] The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0124] Computer readable signal media may include data signals propagated in baseband or as part of a carrier wave, in which readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Readable signal media may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0125] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the foregoing.

[0126] Program code for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device may be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., through the Internet using an Internet service provider).

[0127] In addition, the above-mentioned figures are only schematic illustrations of the processes included in the method according to the exemplary embodiments of the present disclosure, and are not intended to be limiting. It is easy to understand that the processes shown in the above-mentioned figures do not indicate or limit the time sequence of these processes. In addition, it is also easy to understand that these processes can be performed synchronously or asynchronously, for example, in multiple modules.

[0128] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the embodiment of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiment of the present disclosure.

[0129] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims.

[0130] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A website page modification method, characterized in that: include: Obtaining an original website page, wherein the original website page is obtained based on a pre-built visual editor; Sending the original website page to the visual editor to obtain an original website page in an editable state; the original website page in an editable state includes a plurality of target functional blocks; Based on the visual modification operation on the target functional block, a modified target functional block is generated, each of the target functional blocks having a corresponding block editing component; Re-rendering the original website page according to the modified target functional block and the unmodified target functional block to obtain the target website page; Wherein, the method further comprises: Providing an interactive interface corresponding to a visual editor for editing the original website page, the interactive interface including functional blocks for implementing different functions and a page preview area; The target functional block selected and edited from the functional blocks is rendered and displayed in the page preview area to form an original website page in a preview state.

2. The website page modification method according to claim 1, characterized in that: The method further comprises: If an instruction to publish the original website page in the preview state is detected, the configuration file corresponding to the target functional block in the original website page in the preview state is saved, so that when the original website page is called, the original website page is rendered and displayed according to the configuration file.

3. The website page modification method according to claim 2, characterized in that: The configuration file of the target functional block includes a block configuration file, a block style file, and a block logic code file; When calling the original website page, rendering and displaying the original website page according to the configuration file includes: When the original website page is detected to be called, a block configuration file, a block style file, and a block logic code file corresponding to the target function block in the original website page are obtained; Based on the rendering engine, the original website page is rendered and displayed according to the block configuration file, the block style file, and the block logic code file.

4. The website page modification method according to claim 3, characterized in that: The rendering engine based rendering and displaying the original website page according to the block configuration file, the block style file, and the block logic code file includes: Acquire object attribute data from a backend server according to the block configuration file; Based on the rendering engine, the original website page is rendered and displayed according to the object attribute data, the block style file, and the block logic code file.

5. The website page modification method according to claim 2, characterized in that: The interactive interface also includes a website page layout template, and the target function block selected and edited from the function block is rendered and displayed in the page preview area, and also includes: The selected target website page layout template is rendered and displayed in the page preview area.

6. The website page modification method according to claim 1, characterized in that: Based on the visual modification operation on the target functional block, a modified target functional block is generated, including: When selecting the target functional block in the original website page, providing a functional block editing component; Perform visual modification operations on the target functional block according to the functional block editing component to generate a modified target functional block.

7. The website page modification method according to claim 2 or 3, characterized in that: When calling the original website page, rendering and displaying the original website page according to the configuration file further includes: Obtaining identification data corresponding to the original website page; Matching the site navigation configuration file corresponding to the original website page from a database according to the identification data; Based on the rendering engine, the site navigation information corresponding to the original website page is rendered and displayed according to the site navigation configuration file.

8. A website page modification device, characterized in that: include: An original website page acquisition module is used to acquire an original website page, where the original website page is obtained based on a pre-built visual editor; The original website page sending module is used to send the website page to the visual editor to obtain the original website page in an editable state; the original website page in an editable state includes a plurality of target functional blocks, each of which has a corresponding block editing component; A target functional block modification module, used for generating a modified target functional block based on a visual modification operation on the target functional block; A target website page generation module, used for re-rendering the original website page according to the modified target functional block and the unmodified target functional block to obtain the target website page; Wherein, the original website page acquisition module is configured to execute: Providing an interactive interface corresponding to a visual editor for editing the original website page, the interactive interface including functional blocks for implementing different functions and a page preview area; The target functional block selected and edited from the functional blocks is rendered and displayed in the page preview area to form an original website page in a preview state.

9. An electronic device, comprising: processor; as well as A memory having computer-readable instructions stored thereon, wherein the computer-readable instructions, when executed by the processor, implement the website page modification method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the website page modification method according to any one of claims 1 to 7.

Citation Information

Patent Citations

  • Webpage publishing method and system

    CN103870504A

  • Webpage real-time preview editing method and device, equipment and storage medium

    CN111949256A