CN110543298A - webpage style generation method and device and webpage generation method and device - Google Patents
webpage style generation method and device and webpage generation method and device Download PDFInfo
- Publication number
- CN110543298A CN110543298A CN201810525487.3A CN201810525487A CN110543298A CN 110543298 A CN110543298 A CN 110543298A CN 201810525487 A CN201810525487 A CN 201810525487A CN 110543298 A CN110543298 A CN 110543298A
- Authority
- CN
- China
- Prior art keywords
- style
- component
- page
- file
- entry
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
Abstract
The present disclosure relates to the field of internet application technologies, and in particular, to a method and an apparatus for generating a web page style, a storage medium, and an electronic terminal. The webpage style generation method comprises the following steps: acquiring a component style file of each component in a page; creating a page style file of the page according to the component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier. The method provided by the disclosure is convenient for reading and editing the component style, and can effectively avoid component style conflict caused by the use of the same component in a plurality of pages when the component style file is edited or modified.
Description
Technical Field
The present disclosure relates to the field of internet application technologies, and in particular, to a method and an apparatus for generating a web page style, a storage medium, and an electronic terminal.
Background
with the rapid development of internet technology, each website changes various types of promotion activities as required to adjust page content, or changes page style as required, so that the website pages need to be changed or edited frequently, such as changes in page layout, page display content, and display style.
In order to deal with the above situation, most of the prior art uses a page editing system to implement editing and modifying of pages. Although the existing page editing system can better meet the requirement of page modification, certain defects and shortcomings still exist, such as: when the same component is used in a plurality of pages and the same component is used in the same page for a plurality of times, when one of the components is modified, the components are all modified to cause the problem of component style conflict.
it is to be noted that the information disclosed in the above background section is only for enhancement of understanding of the background of the present disclosure, and thus may include information that does not constitute prior art known to those of ordinary skill in the art.
Disclosure of Invention
an object of the present disclosure is to provide a web page generating method, a web page generating apparatus, a storage medium, and an electronic terminal, which overcome one or more of the problems due to the limitations and disadvantages of the related art, at least to some extent.
additional features and advantages of the disclosure will be set forth in the detailed description which follows, or in part will be obvious from the description, or may be learned by practice of the disclosure.
According to a first aspect of the present disclosure, there is provided a webpage style generation method, including:
Acquiring a component style file of each component in a page;
Creating a page style file of the page according to each component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
In an exemplary embodiment of the present disclosure, the creating a page style file of the page according to the component style files includes:
Splicing the component style file paths of the component style files according to the component IDs;
reading style items in the component style file according to the component style file path, and generating style item IDs for the style items; wherein the style entry ID includes a prefix identification and a random identification;
And reading a page style file path, creating a page style entry node, and storing the style entry containing the random identifier to the page style entry node to obtain the page style file.
In an exemplary embodiment of the present disclosure, when generating a style entry ID for a style entry, the method further includes:
generating a component style file ID for the component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification.
In an exemplary embodiment of the present disclosure, the random identification includes a random string.
In an exemplary embodiment of the present disclosure, the component style file includes a plurality of style entries, and the random identification of each of the style entries is the same.
In an exemplary embodiment of the present disclosure, the method further comprises:
Acquiring a modified style item and a corresponding component style file ID;
acquiring an original style entry of the page style file according to the page style file path;
replacing the modified style entry with the original style entry if the original style entry ID is the same as the component style file ID;
adding the modified style entry to an entry list of the page style file.
According to a second aspect of the present disclosure, there is provided a web page generation method, including:
acquiring a webpage layout and adding components according to the layout;
creating a page template file according to the component template file of each component, and creating a corresponding page style file according to the component style file of each component;
And adding a data source and rendering the page template file and the page style file by using a template engine to generate a webpage.
In an exemplary embodiment of the present disclosure, the creating a corresponding page style file according to the component style file of each component includes:
Splicing the component style file paths of the corresponding component style files according to the component IDs;
Reading style items in the component style file according to the component style file path, and generating style item IDs for the style items; wherein the style entry ID includes a prefix identification and a random identification;
And reading the current page style file path, creating a page style entry node, and storing the style entry containing the random identifier to a page style entry interface to obtain the page style file.
In an exemplary embodiment of the present disclosure, when generating a style entry ID for a style entry, the method further includes:
generating a component style file ID for the component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification.
In an exemplary embodiment of the present disclosure, the adding a data source and rendering the page template file and the page style file by using a template engine to obtain a webpage includes:
re-reading the style entry of the page style file;
Traversing the style entries and splicing CSS character strings;
And inserting the CSS character string into the Head of the page.
In an exemplary embodiment of the present disclosure, the method further comprises:
Acquiring an ID of a component to be modified;
acquiring a style entry corresponding to the component to be modified in the page style file according to the ID of the component to be modified;
Adding the style entry to a component style entry list of the component to be modified;
and returning the component style item list of the component to be modified to the browser end so as to be displayed at the browser end.
in an exemplary embodiment of the present disclosure, the method further comprises:
Acquiring a modified style item and a corresponding component style file ID;
acquiring an original style entry of the page style file according to the page style file path;
Replacing the modified style entry with the original style entry if the original style entry ID is the same as the component ID;
adding the modified style entry to the list of page style entries.
according to a fourth aspect of the present disclosure, there is provided a web page style generating apparatus, including:
the device comprises a component style file acquisition module, a component style file generation module and a component style file generation module, wherein the component style file acquisition module is used for acquiring a component style file of each component in a page;
The page style file creating module is used for creating a page style file of the page according to each component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
According to a fourth aspect of the present disclosure, there is provided a web page generation apparatus including:
The page layout module is used for acquiring the webpage layout and adding components according to the layout;
The page creating module is used for creating a page template file according to the component template file of each component and creating a corresponding page style file according to the component style file of each component;
And the webpage generating module is used for adding a data source and rendering the page template file and the page style file by utilizing a template engine so as to generate a webpage.
According to a fifth aspect of the present disclosure, there is provided a storage medium having stored thereon a computer program which, when executed by a processor, implements the above-described web page style generation method and/or web page generation method.
According to a fourth aspect of the present disclosure, there is provided an electronic terminal comprising:
a processor; and
a memory for storing executable instructions of the processor;
wherein the processor is configured to execute the webpage style generation method and/or the webpage generation method via executing the executable instructions.
in the webpage style generation method and the webpage generation method provided by the embodiment of the disclosure, the page style file is created according to the component style file of each component in the webpage, so that each component style file is independently added to the page style file. In addition, a specific random identifier is configured for each style entry, so that the component styles and the style entries can be read and edited conveniently, and further, the component style conflict caused by independently editing or modifying a certain component style file when the same component is used for multiple times in the same page or the same component is used in multiple pages is effectively avoided.
it is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
the accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure. It is to be understood that the drawings in the following description are merely exemplary of the disclosure, and that other drawings may be derived from those drawings by one of ordinary skill in the art without the exercise of inventive faculty.
FIG. 1 schematically illustrates a method of a template management system in the prior art;
FIG. 2 is a schematic diagram illustrating a prior art page finishing system;
FIG. 3 is a schematic diagram illustrating a webpage style generation method according to an exemplary embodiment of the disclosure;
FIG. 4 is a flow diagram illustrating a method for loading a component style file in an exemplary embodiment of the disclosure;
FIG. 5 is a flow diagram illustrating a method for saving an edited specified component style file in an exemplary embodiment of the present disclosure;
FIG. 6 is a diagram schematically illustrating a method of generating a web page in an exemplary embodiment of the disclosure;
FIG. 7 is a schematic flow chart diagram illustrating a method of generating a web page in an exemplary embodiment of the present disclosure;
FIG. 8 schematically illustrates a web page layout in an exemplary embodiment of the disclosure;
FIG. 9 is a schematic diagram illustrating a component style loading flow diagram for editing a specified component style in an exemplary embodiment of the present disclosure;
Fig. 10 is a schematic diagram schematically illustrating a web page style generating apparatus according to an exemplary embodiment of the present disclosure;
fig. 11 schematically illustrates a schematic diagram of a web page generation apparatus in an exemplary embodiment of the present disclosure;
FIG. 12 schematically illustrates a schematic view of an electronic device in an exemplary embodiment of the disclosure;
FIG. 13 schematically illustrates a schematic diagram of a storage device in an exemplary embodiment of the disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different 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 thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.
furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus their repetitive description will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.
Many page editing systems exist in the prior art, such as template management systems, page decoration systems, and the like. Referring to fig. 1, the technical principle of the template management system generally includes: and realizing data display logic by using the page template file, realizing data acquisition by operating a background, and finally rendering the data into the page template file by using a template engine technology to generate an HTML webpage. Referring to fig. 2, the implementation principle of the page finishing system generally includes: and when the component data is configured, recording the data of the corresponding component of the current page template. When an HTML page is generated, a program reads corresponding data and a page template file, and an HTML page is rendered by using a template engine. And simultaneously inserting the selected component style path (CSS link) into the Head of the HTML to finish the generation of the HTML webpage.
although the existing page editing system can better meet the requirement of page modification, certain defects and shortcomings still exist, such as conflict of using the same component in multiple pages and conflict of using the same component in the same page for multiple times. Specifically, when the same component is used in multiple pages, if a user needs to edit the component style of a certain page, the component style file cannot be directly modified, because the modified component style affects the use of the component style of other pages. For example, create A page and B page, both using the goods list component goods _ list _ model; if the style of the component of the B page is modified and stored, the style of the component of the A page is also modified because the A page and the B page use the same component style file.
or when the same component is used on the same page for multiple times, if two commodity list components goods _ list _ model are added to a certain page, and when the browser renders the page, the two component IDs are both the goods _ list _ model, the corresponding style node identifiers are both the goods _ list _ model. When one component style is modified, because the style nodes of the two components are stored in the template style file by using the same identifier, when one component style is modified, the other component style is also modified, and further the component styles conflict.
The present exemplary embodiment first provides a method for generating a webpage style, which can be applied to editing a webpage style file. Referring to fig. 3, the above-described webpage style generating method may include the steps of:
S101, acquiring a component style file of each component in a page;
S102, creating a page style file of the page according to each component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
In the webpage style generation method provided by the exemplary embodiment, the page style file is created according to the component style file of each component in the webpage, so that each component style file is independently added to the page style file, and the reading and editing of the component style are facilitated. In addition, a specific random identifier is configured for each style entry, so that the condition that a certain component style file or style entry is independently edited or modified to cause component style conflict when the same component is used for multiple times in the same page or the same component is used in multiple pages is effectively avoided.
hereinafter, each step of the web page style generation method in the present exemplary embodiment will be described in more detail with reference to the drawings and the embodiments.
Step S101, acquiring a component style file of each component in the page.
in the exemplary embodiment, for a page of a web page, a developer generally lays out the page according to actual requirements, and adds components according to the layout. For each component within a page, each component may correspond to a component template file and a component style file. The component template file is composed of HTML (Hyper Text Markup Language) and a Freemarker tag, and mainly realizes how to render component data and an HTML structure for data display.
For example, the above-mentioned component may be a commodity list component, a commodity category component, or a carousel component. The name of each component may be a unique prefix identifier comprising one or more of a number, upper and lower case letter, and underline, and corresponds one-to-one to the corresponding component style name. For example, if the commodity component name is "goods _ list _ model", the name of the component template file may be "goods _ list _ model.
each component also corresponds to a component Style file, which can be used to define CSS (Cascading Style Sheets) Style of page rendering of the component, and the storage format can be implemented using XML (eXtensible Markup Language), JSON (JavaScript Object Notation), or other formats. Each style may consist of a prefix qualified name corresponding to the component name and a style selector, and may consist of an XML node or JSON object. For example, the name of the component style file for the commodity component may be "goods _ list _ model.
The XML format or the JSON format CSS style is used by setting the component style file, and because the XML or the JSON is structured data, a plurality of analysis tools exist, the problem of program read-write style can be effectively solved, and the style can be conveniently edited.
s102, creating a page style file of the page according to each component style file.
In the present exemplary embodiment, when a new web page is created, a page template file may be created for the new page; meanwhile, a new page style file can be created according to the component style files of the components arranged in the page. Specifically, the step S102 may include:
S1021, splicing the component style file paths of the corresponding component style files according to the component IDs;
s1022, reading the style entry in the component style file according to the component style file path, and generating a style entry ID for the style entry; wherein the style entry ID includes a prefix identification and a random identification;
and S1023, reading a page style file path, creating a page style entry node, and storing the style entry containing the random identifier into the page style entry node to obtain the page style file.
referring to fig. 4, after adding components according to the page layout, a developer may upload a selected component ID to the server side through a JavaScript script on the front end, and the server side may splice a component style file path according to the component ID. After reading the style entry of the component style file node, a random identification may be generated. The style entries of the component may be traversed at this time, and the random identifier may be added after the prefix identifier of each style entry to implement generation of a style entry ID containing the random identifier for the style entry. Moreover, underlining can be added between the prefix mark and the random mark to distinguish the two marks. At this point, the style entries in different components have different file names due to the different random identifications. Then, the page style file path is read, style item nodes are created, and style items with random identifications are sequentially stored in the page style file.
The random identifier may be a random string of a certain length, or a random string of a random length, for example. The random string may be a simple number, a simple letter, or a combination of numbers and letters. Of course, in other examples of the present disclosure, the random character string may also include special characters such as an operation symbol, and the present disclosure does not particularly limit the form of the random character string.
In particular, the name of the style item may consist of a component unique prefix identification plus a random string identification. For example, a style file stored in xml format may be:
<css id＝”goods_list_model_s8f3xj1uq1”>
<cssName>#goods_list_model_s8f3xj1uq1.title</cssName>
<cssContent>{width:300px；height:30px；}</cssContent>
</css>
By adding different random character strings to the style items in different components, each component and the corresponding component style item have different names, so that the same component and the corresponding style item which are used for multiple times in the same page can be effectively distinguished. When the page style file is modified or edited, the page style file can be distinguished according to the random character string, so that the component style conflict in the same page is effectively avoided.
for example, a page contains two item list components, goods _ list _ model. When creating the page style file, the first commodity component list has the file name of goods _ list _ model _98suw3j9 after adding the random character string, and the identification of the corresponding style entry is also goods _ list _ model _98suw3j 9. The file name of the second commodity component list after the random character string is added is goods _ list _ model _56eg39jd, and the identifier of the corresponding style entry is also goods _ list _ model _56eg39 jd; and then realize the differentiation to two commodity list subassemblies. When a certain commodity component list needs to be edited, the commodity component list can be distinguished according to the random character string after the prefix identification. Therefore, the situation that when one commodity list component is edited, the other component can be edited is effectively avoided, and the pattern conflict caused by the fact that the same component is used for multiple times in the same page is further avoided.
Based on the above, in other exemplary embodiments of the present disclosure, when generating a style entry ID for a style entry, similarly, a component style file ID may also be generated for a component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification. I.e. the component style file for each component, and the corresponding style entry of the component style file may have the same random identification. Or different random identifications can be provided for different style entries in the components, and the discrimination of a plurality of same components in the same page can be realized.
In addition, in an exemplary embodiment, the method for generating a webpage style may further include:
step S111, acquiring the modified style item and the corresponding component style file ID;
Step S112, acquiring an original style item of the page style file according to the page style file path;
step S113, if the original style entry ID is the same as the component style file ID, replacing the original style entry with the modified style entry;
Step S114, adding the modified style entry into an entry list of the page style file.
in this exemplary embodiment, referring to fig. 5, when a developer edits a specified component style, after the style entry is modified, the developer may upload the modified style entry and the edited component ID to the server by using a front-end JavaScript script. And the server traverses the style entries after reading the style entries of the current page style file, acquires the original style entries equivalent to the component ID identification by using the prefix identification and the random identification, and deletes the original style entries. And constructing the uploaded modified component style entry into a style entry in an XML format or a JSON format, adding the style entry into all style entry lists, storing the style entries into a page style file, and replacing the original style entry with the modified style entry to realize the editing of the page style. Then, all style entries can be traversed again, the style entries are spliced into CSS character strings of a CSS syntax structure, and when the template engine renders the page, the CSS character strings are inserted into the Head of the HTML page to complete loading of the page style.
further, the present exemplary embodiment further provides a web page generating method, and as shown in fig. 6, the web page generating method includes:
s201, acquiring a webpage layout and adding components according to the layout;
S202, creating a page template file according to the component template file of each component, and creating a corresponding page style file according to the component style file of each component;
s203, adding a data source and rendering the page template file and the page style file by using a template engine to generate a webpage.
hereinafter, each step of the web page generation method in the present exemplary embodiment will be described in more detail with reference to the drawings and the examples.
Step S201, acquiring a webpage layout and adding components according to the layout.
In this exemplary embodiment, a developer may first create a page, lay out the page according to the requirement of the web page and the content of the web page, and determine the page layout according to the layout. Referring to fig. 8, a developer may divide a page into blocks and define functions to be implemented by each block, for example, defining the functions of the blocks as a commodity list, an advertisement carousel map, or a category navigation bar. The present disclosure does not specifically limit the specific contents of the web page layout.
after the page layout is determined, corresponding components can be added according to the functions of the blocks in the page layout.
step S202, a page template file is created according to the component template file of each component, and a corresponding page style file is created according to the component style file of each component.
in the present exemplary embodiment, specifically, as described above, each component may correspond to one component template file and one component style file. The component template file can be composed of HTML (Hyper Text Markup Language) and a Freemarker tag, and is mainly used for realizing an HTML structure for rendering component data and displaying the data. In addition, each component may also correspond to a component Style file, which may be used to define CSS styles (Cascading Style Sheets) for page rendering of the component.
Referring to fig. 7, when creating a page, a page template file is created, and the page template file may be composed of a component file path code contained in an include tag of a layout HTML structure and Freemarker. For example: < # include "/xxxx/model/goods _ list _ model. tpl"/; when a browser accesses a webpage, the webpage is rendered into an HTML page by a template engine and displayed on a browser interface.
At the same time, a page style file is created, which may be composed of style content corresponding to the selected components.
specifically, creating a corresponding page style file from the component style file may include:
Step 201, splicing component style file paths of corresponding component style files according to component IDs;
step 202, reading style items in the component style file according to the component style file path, and generating style item IDs for the style items; wherein the style entry ID includes a prefix identification and a random identification;
step 203, reading a current page style file path and creating a page style entry node, and saving the style entry containing the random identifier to a page style entry interface to obtain the page style file.
Referring to fig. 6, after adding components according to the page layout, the developer may upload the selected component ID to the server through the JavaScript script at the front end, and the server splices the component style file path according to the component ID. After reading the style entry of the component style file node, a random identification may be generated. The style entries of the component may be traversed at this point and a random identification may be added after the prefix identification of each style entry to generate a style entry ID. Furthermore, underlining can be added between the prefix mark and the random mark to distinguish the two marks. At this point, the style entries in different components have different file names due to the different random identifications. Then, the current template style file path is read, style entry nodes are created, and style entries with random identifications are sequentially stored in the page style file.
The random identifier may be a random string of a certain length, or a random string of a random length, for example. The random string may be a simple number, a simple letter, or a combination of numbers and letters. Of course, in other examples of the present disclosure, the random character string may also include special characters such as an operation symbol, and the present disclosure does not particularly limit the form of the random character string.
For example, each block pattern consists of a component unique prefix identification plus a random string identification. By adding different random character strings to the style items in different components, the same components and corresponding style items which are used for multiple times in the same page can be effectively distinguished. When the page style file is modified or edited, the page style file can be distinguished according to the random character strings, and then the component style conflict in the same page is effectively avoided.
For example, a page contains two item list components, goods _ list _ model. When creating the page style file, the first commodity component list has the file name of goods _ list _ model _98suw3j9 after adding the random character string, and the identification of the corresponding style entry is also goods _ list _ model _98suw3j 9. The file name of the second commodity component list after the random character string is added is goods _ list _ model _56eg39jd, and the identifier of the corresponding style entry is also goods _ list _ model _56eg39 jd; and then realize the differentiation to two commodity list subassemblies. When a certain commodity component list needs to be edited, the commodity component list can be distinguished according to the random character string after the prefix identification. Therefore, the situation that when one commodity list component is edited, the other component can be edited is effectively avoided, and the pattern conflict caused by the fact that the same component is used for multiple times in the same page is further avoided.
Based on the above, in other exemplary embodiments of the present disclosure, when generating a style entry ID for a style entry, similarly, a component style file ID may also be generated for a component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification. I.e. the component style file and the corresponding style entry may have the same random identification. Or different random identifications can be provided for different style entries in the components, and the discrimination of a plurality of same components in the same page can be realized.
step S203, adding a data source and rendering the page template file and the page style file by using a template engine to generate a webpage.
In the exemplary embodiment, referring to fig. 7, after a complete page template file 411 is created from the page layout 401 and each component template file 402, and a page style file 412 is created from the component style file 403 and a data source 413 is configured, the HTML page 40 can be generated by rendering using the template engine 420. For example, a Fast Template engine, a Heyes Template Class Template engine, etc. are utilized.
for the page style file, referring to fig. 4, after saving the style entry containing the random identifier in the style entry ID into the page style file, the style entry of the page style file may be read again; then traversing each style entry, and splicing into a CSS character string of a CSS syntactic structure; and when the template engine renders the page, inserting the CSS character string into the Head of the page to finish the loading of the page style.
The page style file is independently created when a page is created, the component styles are added to the page style file, and each block of style consists of a unique prefix identifier and a random identifier of a component, so that the component style file is independently added to each page style file. The page style file is equivalent to only storing the 'copy' of the component style, so that when the page style is modified, only the 'copy' of the current page is modified without influencing the style file of the component, and further, the page conflict caused when a plurality of pages of the same component are used simultaneously is effectively avoided.
In addition, in other exemplary embodiments of the present disclosure, the above-mentioned webpage generating method may further include:
S211, acquiring an ID of the component to be modified;
s212, acquiring a style entry corresponding to the component to be modified in the page style file according to the ID of the component to be modified;
S213, adding the style entry into the component style entry list of the component to be modified;
And S214, returning the component style item list of the component to be modified to the browser end so as to be displayed at the browser end conveniently.
Referring to FIG. 9, when a component and a corresponding specified component style entry within a page are modified or edited; the style item ID can be sent to the server background according to the triggering operation of the user at the browser end. After receiving the style item ID to be modified, the server side can read the page style file of the webpage and traverse the style items, add the component style item corresponding to the component ID to be modified into the component style item list to be modified, then return to the browser, and analyze and display the component style item in the browser interface of the user through the front-end JavaScript, so that the user can modify and edit the component style at the browser side conveniently.
After the component to be modified is edited, referring to fig. 5, the front-end JavaScript script can be used to upload the modified style entry and the edited component ID to the server. And the server traverses the style entries after reading the style entries of the current page style file, acquires the original style entries equivalent to the component ID identification by using the prefix identification and the random identification, and deletes the original style entries. And constructing the uploaded modified component style entry into a style entry in an XML format or a JSON format, adding the style entry into all style entry lists, storing the style entries into a page style file, and replacing the original style entry with the modified style entry to realize the editing of the page style. Then, all style entries can be traversed again, the style entries are spliced into CSS character strings of a CSS syntax structure, and when the template engine renders the page, the CSS character strings are inserted into the Head of the HTML page to complete loading of the page style.
According to the webpage generation method provided by the disclosure, the page style file is independently generated by utilizing the component style file, and the component style and the page style file are independently stored by using the XML format or the JSON format, so that the function of independently modifying or editing each component in the page component style is realized, and the problem of style conflict caused by the use of multiple pages of the same component is effectively solved. In addition, the component style is limited by using the unique prefix identification and the random identification, so that the problem of style conflict when the same component in the same page is configured with different styles can be effectively solved.
It is to be noted that the above-mentioned figures are only schematic illustrations of the processes involved in the method according to an exemplary embodiment of the invention, and are not intended to be limiting. It will be readily understood that the processes shown in the above figures are not intended to indicate or limit the chronological order of the processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, e.g., in multiple modules.
further, referring to fig. 10, the present exemplary embodiment also provides a web page style generating apparatus 20, including: a component style file acquisition module 201 and a page style file creation module 202. Wherein:
The component style file acquiring module 201 may be configured to acquire a component style file of each component in a page.
The page style file creating module 202 may be configured to create a page style file for the page according to each component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
The specific details of each module in the web page style generating device have been described in detail in the corresponding web page style generating method, and therefore are not described herein again.
Further, referring to fig. 11, an embodiment of the present example further provides a web page generating apparatus 21, including: a page layout module 211, a page creation module 212, and a web page generation module 213. Wherein:
the layout module 211 may be configured to obtain a web page layout and add components according to the layout.
The page creation module 212 may be configured to create a page template file according to the component template file of each component, and create a corresponding page style file according to the component style file of each component.
The web page generation module 213 may be configured to add a data source and render the page template file and the page style file using a template engine to generate a web page.
The specific details of each module in the web page generation apparatus have been described in detail in the corresponding web page generation method, and therefore are not described herein again.
It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.
In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided.
as will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or program product. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" system.
an electronic device 600 according to this embodiment of the invention is described below with reference to fig. 12. The electronic device 600 shown in fig. 9 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 12, the electronic device 600 is embodied in the form of a general purpose computing device. The components of the electronic device 600 may include, but are not limited to: the at least one processing unit 610, the at least one memory unit 620, and a bus 630 that couples the various system components including the memory unit 620 and the processing unit 610.
wherein the storage unit stores program code that is executable by the processing unit 610 to cause the processing unit 610 to perform steps according to various exemplary embodiments of the present invention as described in the above section "exemplary methods" of the present specification. For example, the processing unit 610 may perform step S101 as shown in fig. 3: acquiring a component style file of each component in a page; step S102: creating a page style file of the page according to each component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier. Alternatively, the processing unit 610 may perform step S211 as shown in fig. 6: acquiring a webpage layout and adding components according to the layout; step S212, creating a page template file according to the component template file of each component, and creating a corresponding page style file according to the component style file of each component; step S213, add a data source and render the page template file and the page style file by using the template engine to generate a web page.
the storage unit 620 may include readable media in the form of volatile memory units, such as a random access memory unit (RAM)6201 and/or a cache memory unit 6202, and may further include a read-only memory unit (ROM) 6203.
the memory unit 620 may also include a program/utility 6204 having a set (at least one) of program modules 6205, such program modules 6205 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 thereof, may comprise an implementation of a network environment.
Bus 630 may be 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.
the electronic device 600 may also communicate with one or more external devices 700 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the electronic device 600, and/or with any devices (e.g., router, modem, etc.) that enable the electronic device 600 to communicate with one or more other computing devices. Such communication may occur via an input/output (I/O) interface 650. Also, the electronic device 600 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network such as the Internet) via the network adapter 660. As shown, the network adapter 660 communicates with the other modules of the electronic device 600 over the bus 630. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.
Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which may be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.
in an exemplary embodiment of the present disclosure, there is also provided a computer-readable storage medium having stored thereon a program product capable of implementing the above-described method of the present specification. In some possible embodiments, aspects of the invention may also be implemented in the form of a program product comprising program code means for causing a terminal device to carry out the steps according to various exemplary embodiments of the invention described in the above section "exemplary methods" of the present description, when said program product is run on the terminal device.
referring to fig. 13, a program product 800 for implementing the above method according to an embodiment of the present invention is described, which may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited in this regard and, in the present document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
A computer readable signal medium may include a propagated data signal with readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A readable signal medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
program code embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any kind 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).
Furthermore, the above-described figures are merely schematic illustrations of processes involved in methods according to exemplary embodiments of the invention, and are not intended to be limiting. It will be readily understood that the processes shown in the above figures are not intended to indicate or limit the chronological order of the processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, e.g., in multiple modules.
other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
it will be understood that the present disclosure is not limited to the precise arrangements 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 to be limited only by the terms of the appended claims.
Claims (16)
1. a method for generating a webpage style, comprising:
Acquiring a component style file of a component in a page;
creating a page style file of the page according to the component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
2. the method for generating webpage style according to claim 1, wherein the creating a page style file of the page according to the component style file comprises:
splicing the component style file paths of the corresponding component style files according to the component IDs;
Reading style items in the component style file according to the component style file path, and generating style item IDs for the style items; wherein the style entry ID includes a prefix identification and a random identification;
and reading a page style file path, creating a page style entry node, and storing the style entry containing the random identifier to the page style entry node to obtain the page style file.
3. the method for generating webpage style according to claim 2, wherein when generating the style item ID for the style item, the method further comprises:
generating a component style file ID for the component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification.
4. the web page style generation method according to claim 2 or 3, wherein the random identifier comprises a random character string.
5. The webpage style generation method of claim 1 or 2, wherein the component style file comprises a plurality of style items, and the random identification of each style item is the same.
6. the method for generating webpage style according to claim 1, wherein the method further comprises:
Acquiring a modified style item and a corresponding component style file ID;
Acquiring an original style entry of the page style file according to the page style file path;
replacing the modified style entry with the original style entry if the original style entry ID is the same as the component style file ID;
Adding the modified style entry to an entry list of the page style file.
7. A method for generating a web page, comprising:
acquiring a webpage layout and adding components according to the layout;
creating a page template file according to the component template file of each component, and creating a corresponding page style file according to the component style file of each component;
And adding a data source and rendering the page template file and the page style file by using a template engine to generate a webpage.
8. The method for generating web pages according to claim 7, wherein the creating of the corresponding page style file according to the component style file of each component comprises:
splicing the component style file paths of the corresponding component style files according to the component IDs;
reading style items in the component style file according to the component style file path, and generating style item IDs for the style items; wherein the style entry ID includes a prefix identification and a random identification;
And reading a page style file path, creating a page style entry node, and storing the style entry containing the random identifier to a page style entry interface to obtain the page style file.
9. the method for generating web pages according to claim 8, wherein when generating style item IDs for style items, the method further comprises:
generating a component style file ID for the component style file corresponding to the style entry; wherein the component style file ID includes a prefix identification and a random identification.
10. the method for generating a web page according to claim 7, wherein the adding a data source and rendering the page template file and the page style file by using a template engine to obtain a web page comprises:
re-reading the style entry of the page style file;
traversing the style entries and splicing CSS character strings;
And inserting the CSS character string into the Head of the page.
11. The method for generating a web page according to claim 8, further comprising:
acquiring an ID of a component to be modified;
Acquiring a style entry corresponding to the component to be modified in the page style file according to the ID of the component to be modified;
Adding the style entry to a component style entry list of the component to be modified;
and returning the component style item list of the component to be modified to the browser end so as to be displayed at the browser end.
12. the method for generating a web page according to claim 11, further comprising:
Acquiring a modified style item and a corresponding component style file ID;
acquiring an original style entry of the page style file according to the page style file path;
replacing the modified style entry with the original style entry if the original style entry ID is the same as the component ID;
Adding the modified style entry to the list of page style entries.
13. a web page style generation apparatus, comprising:
the component style file acquisition module is used for acquiring a component style file of a component in a page;
The page style file creating module is used for creating a page style file of the page according to the component style file; the page style file comprises a plurality of style items, and the style item IDs of the style items comprise a random identifier.
14. a web page generation apparatus, comprising:
The page layout module is used for acquiring the webpage layout and adding components according to the layout;
the page creating module is used for creating a page template file according to the component template file of each component and creating a corresponding page style file according to the component style file of each component;
And the webpage generating module is used for adding a data source and rendering the page template file and the page style file by utilizing a template engine so as to generate a webpage.
15. A storage medium having stored thereon a computer program which, when executed by a processor, implements the web page style generation method of any one of claims 1 to 6 and/or the web page generation method of any one of claims 7 to 12.
16. An electronic terminal, comprising:
a processor; and
a memory for storing executable instructions of the processor;
Wherein the processor is configured to perform the web page style generation method of any one of claims 1 to 6, or the web page generation method of any one of claims 7 to 12, via execution of the executable instructions.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810525487.3A CN110543298A (en) | 2018-05-28 | 2018-05-28 | webpage style generation method and device and webpage generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810525487.3A CN110543298A (en) | 2018-05-28 | 2018-05-28 | webpage style generation method and device and webpage generation method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110543298A true CN110543298A (en) | 2019-12-06 |
Family
ID=68701359
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810525487.3A Pending CN110543298A (en) | 2018-05-28 | 2018-05-28 | webpage style generation method and device and webpage generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110543298A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111079062A (en) * | 2019-12-27 | 2020-04-28 | 北京达佳互联信息技术有限公司 | Page creating method and device, electronic equipment and storage medium |
| CN111580819A (en) * | 2020-05-21 | 2020-08-25 | 深圳华锐金融技术股份有限公司 | Page generation method and device, computer equipment and storage medium |
| CN111949266A (en) * | 2020-07-23 | 2020-11-17 | 上海硬通网络科技有限公司 | Webpage generation method and device and electronic equipment |
| CN112231619A (en) * | 2020-10-15 | 2021-01-15 | 北京三快在线科技有限公司 | Conversion method, conversion device, electronic equipment and storage medium |
| CN113868565A (en) * | 2021-09-23 | 2021-12-31 | 深圳市腾讯网域计算机网络有限公司 | Skin style file editing method and device |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030037076A1 (en) * | 2001-03-08 | 2003-02-20 | International Business Machines Corporation | Method, computer program and system for style sheet generation |
| US20030074634A1 (en) * | 1998-11-25 | 2003-04-17 | Helmut Emmelmann | Interactive server side components |
| CN101526942A (en) * | 2008-03-05 | 2009-09-09 | 徐邦勇 | Component implementation technology for automatically generating dynamic web page on line in real time |
| US20110167332A1 (en) * | 2010-01-07 | 2011-07-07 | Neopost Technologies | System and Method for Generating Web Pages |
| CN106682120A (en) * | 2016-12-09 | 2017-05-17 | 北京深思数盾科技股份有限公司 | Method and system for page generation |
| CN106980508A (en) * | 2017-04-01 | 2017-07-25 | 百度在线网络技术（北京）有限公司 | Method and apparatus for generating the page |
| CN107408105A (en) * | 2015-03-18 | 2017-11-28 | 微软技术许可有限责任公司 | Have ready conditions controlled sample addition type |
| CN107665134A (en) * | 2017-09-29 | 2018-02-06 | 北京金山安全软件有限公司 | Page component loading method, device, medium and terminal equipment |
| CN107870798A (en) * | 2017-09-26 | 2018-04-03 | 五八有限公司 | The page layout processing method and terminal of application program |
-
2018
- 2018-05-28 CN CN201810525487.3A patent/CN110543298A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030074634A1 (en) * | 1998-11-25 | 2003-04-17 | Helmut Emmelmann | Interactive server side components |
| US20030037076A1 (en) * | 2001-03-08 | 2003-02-20 | International Business Machines Corporation | Method, computer program and system for style sheet generation |
| CN101526942A (en) * | 2008-03-05 | 2009-09-09 | 徐邦勇 | Component implementation technology for automatically generating dynamic web page on line in real time |
| US20110167332A1 (en) * | 2010-01-07 | 2011-07-07 | Neopost Technologies | System and Method for Generating Web Pages |
| CN107408105A (en) * | 2015-03-18 | 2017-11-28 | 微软技术许可有限责任公司 | Have ready conditions controlled sample addition type |
| CN106682120A (en) * | 2016-12-09 | 2017-05-17 | 北京深思数盾科技股份有限公司 | Method and system for page generation |
| CN106980508A (en) * | 2017-04-01 | 2017-07-25 | 百度在线网络技术（北京）有限公司 | Method and apparatus for generating the page |
| CN107870798A (en) * | 2017-09-26 | 2018-04-03 | 五八有限公司 | The page layout processing method and terminal of application program |
| CN107665134A (en) * | 2017-09-29 | 2018-02-06 | 北京金山安全软件有限公司 | Page component loading method, device, medium and terminal equipment |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111079062A (en) * | 2019-12-27 | 2020-04-28 | 北京达佳互联信息技术有限公司 | Page creating method and device, electronic equipment and storage medium |
| CN111580819A (en) * | 2020-05-21 | 2020-08-25 | 深圳华锐金融技术股份有限公司 | Page generation method and device, computer equipment and storage medium |
| CN111949266A (en) * | 2020-07-23 | 2020-11-17 | 上海硬通网络科技有限公司 | Webpage generation method and device and electronic equipment |
| CN112231619A (en) * | 2020-10-15 | 2021-01-15 | 北京三快在线科技有限公司 | Conversion method, conversion device, electronic equipment and storage medium |
| CN113868565A (en) * | 2021-09-23 | 2021-12-31 | 深圳市腾讯网域计算机网络有限公司 | Skin style file editing method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110543298A (en) | webpage style generation method and device and webpage generation method and device | |
| US11194884B2 (en) | Method for facilitating identification of navigation regions in a web page based on document object model analysis | |
| Nair | Getting started with beautiful soup | |
| US20100199167A1 (en) | Document processing apparatus | |
| EP1818835A1 (en) | Document processing device, and document processing method | |
| US20070277095A1 (en) | Data Processing Device And Data Processing Method | |
| CN103620586B (en) | Link source code to run element | |
| KR20140048139A (en) | Dynamically updating a running page | |
| US20160117412A1 (en) | Recursive extraction and narration of nested tables | |
| EP1830275A1 (en) | Information distribution system | |
| US20090021767A1 (en) | Document processing device | |
| US20070258100A1 (en) | Document Processing Device and Document Processing Method | |
| US20080046809A1 (en) | Data Processing Device and Data Processing Method | |
| US7805452B2 (en) | Data processing device and data processing method | |
| US20090077462A1 (en) | Document processing device and document processing method | |
| US20090083300A1 (en) | Document processing device and document processing method | |
| CN112463152A (en) | Webpage adaptation method and device based on AST | |
| WO2005098660A1 (en) | Document processing device and document processing method | |
| WO2005098658A1 (en) | Document processing device and document processing method | |
| US20080250311A1 (en) | Document Processing Device, and Document Processing Method | |
| CN103226475B (en) | Method and the device of control replacement is realized during transcoding | |
| US20090235156A1 (en) | Document processing device and document processing method | |
| US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium | |
| US20100077295A1 (en) | Document processing device and document processing module | |
| US20080005136A1 (en) | Data Processing Device, Document Processing Device, and Document Processing Method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |