CN113536179B - Page generation method and device, electronic equipment and storage medium - Google Patents
Page generation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113536179B CN113536179B CN202110687524.2A CN202110687524A CN113536179B CN 113536179 B CN113536179 B CN 113536179B CN 202110687524 A CN202110687524 A CN 202110687524A CN 113536179 B CN113536179 B CN 113536179B
- Authority
- CN
- China
- Prior art keywords
- grid
- item
- grid sub
- layout
- sub
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000009877 rendering Methods 0.000 claims abstract description 41
- 239000000945 filler Substances 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 6
- 230000008569 process Effects 0.000 description 9
- 238000004590 computer program Methods 0.000 description 8
- 101100172288 Pseudomonas fluorescens biotype A endX gene Proteins 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 230000018109 developmental process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 210000001072 colon Anatomy 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000001105 regulatory effect Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 230000001502 supplementing effect Effects 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The disclosure relates to a page generation method, a page generation device, electronic equipment and a storage medium, and belongs to the technical field of Internet. The page generation method comprises the following steps: generating a plurality of grid sub-items in the page, wherein each grid sub-item comprises a grid attribute and an elastic layout attribute, the grid attribute is used for describing position information of the grid sub-item, and the elastic layout attribute is used for describing layout configuration information of filling content in the grid sub-item; carrying out position layout on the grid sub-items according to the grid attribute; and carrying out elastic layout on the filling content in the grid sub-items according to the elastic layout attribute. Therefore, the layout and the rendering of the page elements can be realized, and the workload of the layout and the rendering of the page basic elements can be effectively reduced.
Description
Technical Field
The disclosure relates to the technical field of internet, and in particular relates to a page generation method, a page generation device, electronic equipment and a storage medium.
Background
Currently, a rendering engine is a Web (global Wide area network) dynamic visualization rendering scheme integrating CSS Grid and flex layouts. According to different layout requirements, two layout schemes are designed: custom location layout and adaptive layout. And secondly, according to different element rendering requirements, common texts, links, pictures, buttons and the like are subjected to component abstraction and functional encapsulation, so that the web content rendering scheme is unified, efficient and universal.
In the field of web rendering visualization, many developments and transitions have been experienced. How to implement element layout and rendering is a front-end-of-line problem. For example, the initial implementation layout is to control the position of the element by floating or table, the rendering of the element is realized by native html (Hyper Text Markup Language ) tags, and the complex element is required to be completed by various html tag combinations; later with the development of html5 (Hyper Text Markup Language 5.0 ), DIV (DIVision, location and hierarchy of cascading style sheet units) and CSS (Cascading Style Sheets, cascading style sheet) gradually replaced the table layout scheme, but the element rendering technology was not further developed, and the layout and rendering still needed to be maintained in a complex manner.
Disclosure of Invention
The disclosure provides a method, a device, an electronic device and a storage medium for generating a page, so as to at least solve the technical problems that in the related art, a layout and a rendering of page elements need to be written with a custom style to realize component layout, and the layout style and the components are separated, so that the layout and the rendering need to be performed in a complex manner, and effectively reduce the workload of the layout and the rendering of page basic elements while realizing the layout and the rendering of the page elements. The technical scheme of the present disclosure is as follows:
according to a first aspect of an embodiment of the present disclosure, there is provided a method for generating a page, including:
generating a plurality of grid sub-items in a page, wherein each grid sub-item comprises grid attributes and elastic layout attributes, the grid attributes are used for describing position information of the grid sub-item, and the elastic layout attributes are used for describing layout configuration information of filling content in the grid sub-item;
performing position layout on the grid sub-items according to the grid attributes; and
and carrying out elastic layout on the filling content in the grid sub-item according to the elastic layout attribute.
In one possible implementation manner of the embodiment of the present disclosure, the performing, according to the grid attribute, a position layout on the grid sub-item includes:
analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item;
determining a start abscissa, an end abscissa, a start ordinate and an end ordinate of the grid subitem according to the coordinate attribute;
and setting the grid sub-item to a corresponding position according to the starting abscissa, the ending abscissa, the starting ordinate and the ending ordinate.
In one possible implementation manner of the embodiment of the present disclosure, performing elastic layout on the filling content in the grid sub-item according to the elastic layout attribute includes:
determining layout information of the grid sub-items according to the elastic layout attribute and the filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes;
and filling the filling content into the corresponding grid sub-items according to the layout information.
In a possible implementation manner of the embodiment of the present disclosure, the performing, according to the grid attribute, a position layout on the grid sub-item further includes:
determining a maximum column height among the plurality of grid sub-items according to the grid attribute;
traversing each grid sub-item to obtain the actual position of each grid sub-item;
determining grid sub-items to be aligned according to the actual positions of each grid sub-item;
acquiring the column height of a column in which the grid sub item to be aligned is positioned according to the actual position of the grid sub item to be aligned;
and in response to the column height being less than the maximum column height, performing height replenishment on the grid sub-items to be aligned.
In one possible implementation manner of the embodiment of the present disclosure, the determining, according to the actual position of each grid sub-item, the grid sub-item to be aligned includes:
acquiring a width value of each grid sub-item;
and determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
According to a second aspect of the embodiments of the present disclosure, there is provided a page generating apparatus, including:
a generation module configured to generate a plurality of grid sub-items in a page, wherein each grid sub-item comprises a grid attribute for describing position information of the grid sub-item and an elastic layout attribute for describing layout configuration information of filler content in the grid sub-item;
a layout module configured to position layout the grid sub-items according to the grid attributes; and
and the content filling module is configured to perform elastic layout on filling content in the grid sub-items according to the elastic layout attribute.
In one possible implementation manner of the embodiment of the disclosure, the layout module is specifically configured to:
analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item;
determining a start abscissa, an end abscissa, a start ordinate and an end ordinate of the grid subitem according to the coordinate attribute;
and setting the grid sub-item to a corresponding position according to the starting abscissa, the ending abscissa, the starting ordinate and the ending ordinate.
In one possible implementation manner of the embodiment of the disclosure, the content filling module is specifically configured to:
determining layout information of the grid sub-items according to the elastic layout attribute and the filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes;
and filling the filling content into the corresponding grid sub-items according to the layout information.
In one possible implementation manner of the embodiment of the disclosure, the layout module includes:
a first determining unit configured to determine a maximum column height among the plurality of grid sub-items according to the grid attribute;
a first obtaining unit configured to traverse each of the grid sub-items to obtain an actual position of each of the grid sub-items;
a second determining unit configured to determine grid sub-items to be aligned according to the actual positions of each of the grid sub-items;
the second acquisition unit is configured to acquire the column height of the column where the grid sub item to be aligned is located according to the actual position of the grid sub item to be aligned;
and a height-replenishment unit configured to, in response to the column height being less than the maximum column height, highly-replenish the grid sub-items to be aligned.
In a possible implementation manner of the embodiment of the present disclosure, the second determining unit is specifically configured to:
acquiring a width value of each grid sub-item;
and determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
According to a third aspect of embodiments of the present disclosure, there is provided an electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to execute the instructions to implement the page generation method described above.
According to a fourth aspect of embodiments of the present disclosure, there is provided a storage medium, which when executed by a processor of an electronic device, enables the electronic device to perform the above-described page generation method.
According to a fifth aspect of embodiments of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements the above-described page generation method.
The technical scheme provided by the embodiment of the disclosure at least brings the following beneficial effects:
generating a plurality of grid sub-items in the page, carrying out position layout on the grid sub-items according to the grid attributes, and carrying out elastic layout on filling content in the grid sub-items according to the elastic layout attributes. Therefore, the method solves the technical problems that in the related technology, the layout and the rendering of the page elements need to write the custom style to realize the layout of the components, and the layout style and the components are separated, so that the layout and the rendering need to be performed in a complex mode, can effectively reduce the workload of the layout and the rendering of the page basic elements while realizing the layout and the rendering of the page elements, and can improve the development efficiency of web rendering.
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 disclosure and together with the description, serve to explain the principles of the disclosure and do not constitute an undue limitation on the disclosure.
FIG. 1 is a flow chart illustrating a method of generating a page according to an exemplary embodiment;
FIG. 2 is a schematic diagram of one or more grid sub-items shown in accordance with an exemplary embodiment;
FIG. 3 is a flowchart illustrating another page generation method according to an example embodiment;
FIG. 4 is a flowchart illustrating another page generation method according to an example embodiment;
FIG. 5 is a flowchart illustrating another page generation method according to an example embodiment;
FIG. 6 is a flowchart illustrating another page generation method according to an example embodiment;
FIG. 7 is a block diagram of a page generation apparatus according to an exemplary embodiment; and
fig. 8 is a block diagram of an electronic device, according to an example embodiment.
Detailed Description
In order to enable those skilled in the art to better understand the technical solutions of the present disclosure, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.
It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the foregoing figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the disclosure described herein may be capable of operation in sequences other than those illustrated or described herein. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present disclosure as detailed in the accompanying claims.
The following describes a page generation method, device, electronic equipment and storage medium according to an embodiment of the present disclosure with reference to the accompanying drawings.
The page generating method provided by the embodiment of the disclosure may be executed by an electronic device, where the electronic device may be a PC (Personal Computer ) computer, a mobile phone, a tablet computer, a palmtop computer, or the like, and is not limited herein.
In an embodiment of the present disclosure, a processing component, a storage component, and a drive component may be provided in an electronic device. Alternatively, the driving component and the processing component may be integrally provided, and the storage component may store an operating system, an application program, or other program modules, and the processing component implements the page generating method provided by the embodiments of the present disclosure by executing the application program stored in the storage component.
It should be noted that, in the page generation method provided by the embodiment of the present disclosure, for the presentation of the Web element (i.e., the page element), two aspects may be mainly considered: the first is the position layout of the element, and the second is the presentation of the element itself. The method can be divided into two parts, wherein one part is a frame layer and the other part is an element assembly library; the framework layer is implemented by underlying JavaScript and CSS, and the framework can be used whether it is a Vue framework, a Reac framework, or under other front-end technology frameworks, etc. The element rendering can adopt a general scheme ma (architecture) rendering scheme, any front-end framework is applicable, and other technical stacks can be combined with a framework layer to be used under the condition of being adapted according to a pre-designed component scheme ma rendering scheme.
It should be noted that, the elements described in the above embodiments may be all objects used in the page for organizing structures and expressing contents, where an organizing structure may include tables (layouts), layers, navigation bars, links, and the like, and an expressing content may include characters, images, animations, and the like. For example, a grid sub-item in an embodiment of the present disclosure is an element.
Fig. 1 is a flowchart illustrating a method for generating a page according to an exemplary embodiment, and as shown in fig. 1, the method for generating a page may be used in an electronic device, and includes the following steps.
In step S11, a plurality of grid sub-items are generated among the pages, wherein each grid sub-item includes a grid attribute for describing position information of the grid sub-item and an elastic layout attribute for describing layout configuration information of filler content in the grid sub-item.
It should be noted that, the page described in this embodiment may be an html (e.g., html 5) page, where the html page is also a web page (html is a part of web front end development, and the web core language, and one of the standard universal markup languages applies a hypertext markup language), and the grid attribute described in this embodiment may include a grid attribute, and may be used to describe location information of a grid sub-item, and the elastic layout attribute described in this embodiment may include a flex attribute, and may be used to describe layout configuration information of filler content in the grid sub-item, where the page may be a playing interface in a short video APP (Application), or may be an information browsing page in the short video APP, or may be a certain interface displayed in a browser, and is not limited herein. The grid attribute can be the parent element of all grid items (grid child items), the size of the grid in the webpage can be accurately regulated, and the images and the characters on the webpage can be accurately controlled, so that the aim of reasonably distributing the content is fulfilled. The flex attribute may be used to set or retrieve how the child elements of the elastic box model object allocate space.
Both grid attribute and flex attribute may belong to the category of CSS and JavaScript (scripting language).
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, when a user opens the information browsing page in the short video APP using the mobile phone, the mobile phone loads a code of the information browsing page, and in the process of loading the code, a plurality of grid sub-items may be generated in the information browsing page first.
It should be noted that, the positions of the plurality of grid sub-items in the information browsing page described in this embodiment may be determined by the grid attribute, and the contents of the plurality of grid sub-items described in this embodiment may be determined by the elastic layout attribute.
In step S12, the grid sub-items are position laid out according to the grid attributes.
In step S13, the filling content in the grid sub-item is elastically laid out according to the elastic layout attribute.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, when a user opens the information browsing page in the short video APP using the mobile phone, the mobile phone loads a code of the information browsing page, during loading the code, a plurality of grid sub-items may be generated in the information browsing page first, then, a position layout is performed on each grid sub-item according to a grid attribute, so as to determine a position of each grid sub-item in the information browsing page, and an elastic layout is performed on filling content in each grid sub-item according to an elastic layout attribute, so as to determine content and a content style displayed in each grid sub-item.
In the embodiment of the disclosure, the electronic device firstly generates a plurality of grid sub-items in the page, then performs position layout on the grid sub-items according to the grid attributes, and performs elastic layout on filling content in the grid sub-items according to the elastic layout attributes. Therefore, the layout and the rendering of the page elements can be realized, and the workload of the layout and the rendering of the page basic elements can be effectively reduced.
To clearly illustrate the above embodiment, in one possible implementation manner of the embodiment of the present disclosure, as shown in fig. 3, performing a position layout on a grid sub-item according to a grid attribute may include:
step S31, analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item.
In the embodiment of the disclosure, the grid attribute may be parsed according to a preset parsing algorithm to obtain the position information of the grid sub-item, where the preset parsing algorithm may be calibrated according to the actual situation.
It should be noted that, the coordinate attribute described in this embodiment may be { x: ", endX:", y: ", endY:", width: ", height:" }, or may be a coordinate configuration in a DIV attribute, which is not limited herein.
Step S32, determining the start abscissa, the end abscissa, the start ordinate and the end ordinate of the grid subitem according to the coordinate attribute.
Step S33, setting the grid sub-items to the corresponding positions according to the start abscissa, the end abscissa, the start ordinate and the end ordinate.
In the embodiment of the disclosure, in terms of the grid sub-item (i.e., web element) position layout, the layout may be implemented by CSS grid layout, and each grid sub-item in the layout may be simply referred to as item (grid, item) sub-item. The coordinate attributes { x: start abscissa, endX: end abscissa, y: start ordinate, endY: end ordinate } of grid CSS attributes rowStart, rowEnd, columnStart and columnEnd are designed according to grid CSS attributes rowStart, rowEnd, columnStart and columnEnd, and are used to represent the positions and spaces occupied by grid sub-items, such as the coordinate attributes of the bubble picture in fig. 2 may be { x:1, endX:3, y:1, endY:3}, and the positions of other displayed grid sub-items may be represented by coordinates, so that writing some style attributes (e.g., style attributes such as cssposion) in the grid sub-item position layout may be avoided, thereby simplifying the grid sub-item position layout and further reducing the complexity of the grid sub-item layout.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, the grid attribute may be parsed according to the preset parsing algorithm to obtain the position information of the grid sub-item, and the position (coordinate) of the grid sub-item is designed according to the grid CSS attribute (i.e., coordinate attribute) rowStart, rowEnd, columnStart and column end { x: start abscissa, endX: end abscissa, y: start ordinate, end ordinate }, so as to determine the position of each grid sub-item in the information browsing page, and then each grid sub-item is set to a corresponding position, thereby simplifying the position layout of the grid sub-item and further reducing the complexity of the grid sub-item layout.
Further, in a possible implementation manner of the embodiment of the present disclosure, as shown in fig. 4, performing elastic layout on the filling content in the grid sub-item according to the elastic layout attribute may include:
step 41, determining layout information of the grid sub-items according to the elastic layout attribute and the filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes.
It should be noted that, the description information and the field information described in this embodiment are combination information, that is, description and field values, for example, referring to fig. 2, a presentation of text types of the first row and the first column, a name (description information): zhang three (field information). The rendering modes described in this embodiment may include a common, object and array, and define component attribute configuration, through which rendering of one element can be completed, avoiding repeated patterns and codes. The filler content layout information described in this embodiment refers to the form in which the filler content is presented in the grid sub-item (grid), for example, the style of font, the size and style of picture, and the like.
In one example, as shown in fig. 2, the filler content may include text, links, pictures, time, buttons, animation, etc., and the layout configuration information may include a style of font, a size and style of picture, a size and presentation effect of animation, etc., without limitation. Therefore, the filling of the content in the grid sub-item and the style rendering can be realized through the filling content and the layout information of the filling content, so that the custom style can be avoided or reduced, and the research and development efficiency of relevant page designers is improved.
And step 42, filling the filling content into the corresponding grid sub-items according to the layout information.
In the disclosed embodiment, each small presentation area (i.e., grid sub-item) is referred to as an item sub-item on the layout of the content fill and style rendering of the grid sub-item, as shown in FIG. 2. The presentation portion of each sub-item may support presentation of two parts of content, namely, description and field values, such as presentation of text type of first column of first row, name (description): zhang three (field value), showing the first row and second column pictures, head portrait (description): image pictures (field values), etc., i.e., field descriptions to the left of the colon and field values to the right. The Item sub-Item can be realized by adopting CSS flex layout, and the default is horizontal layout, so that the basic attribute configuration of flex is supported, and the flex layout style is realized. Meanwhile, based on basic elements such as characters, links, pictures and buttons, common components and functions can be packaged and realized by combining actual requirements, the styles of the elements are built in the components, component attribute configuration is defined, and the rendering of a grid subitem can be completed through the attribute configuration, so that repeated styles and codes are avoided.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, CSS flex layout may be adopted to determine layout information of grid sub-items according to the elastic layout attribute and the filler content, and the filler content is filled into the corresponding grid sub-items according to the layout information. Therefore, the custom patterns can be avoided or reduced, the problem of complex repeated writing patterns in the layout is solved, and the flex layout based on CSS can solve the layout problem of grid submodule item per se.
It should be noted that, the complete configuration attribute of item described in the above embodiment, json (JavaScript, scripting language) schema is defined as follows: { name: 'sub item description', key: 'sub item field', type: 'item type', layout: { flexextraction: 'layout direction', flex: 'width flex value', alignItems: 'vertical direction versus mode' }, gridItem: { x: ", endX:", y: ", endY:", width: ", height:" }. Wherein the name represents the description information of the element, and the key represents the field value corresponding to the element to be presented. type is a component type. layout is a flex layout configuration item of item sub items, and the content layout of the sub items is realized through the layout direction flexDirection of the flex, the attribute alignItems, the width flex and the like of the flex. GridItem is a grid coordinate attribute of item sub-items.
In one example, for the rendering requirement with a frame, if the visual effect is not good, as shown in fig. 2, for the problem of misalignment, a blank element can be automatically supplemented to implement a column Ji Rudi and a last row, and the height of the last item (i.e. grid item) of the first column is modified to be 1 as the height of the picture of the fifth column, but for the purpose of the method, the end y or height in the grid item of the picture item can be automatically modified according to a preset algorithm to implement alignment, wherein the preset algorithm can be calibrated according to the actual situation.
In order to improve the visual effect of the page, in a possible implementation manner of the embodiment of the present disclosure, as shown in fig. 5, the performing, according to the grid attribute, the position layout on the grid sub-item may further include:
step 51, determining the maximum column height among the plurality of grid sub-items according to the grid attribute.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, the height of each column shown in fig. 2 may be calculated according to the grid attribute of each grid sub-item, and the maximum column height in the column may be obtained, that is, the maximum column height among multiple grid sub-items.
Step 52, traversing each grid sub-item to obtain the actual position of each grid sub-item.
It should be noted that the actual position described in this embodiment may be actual coordinate information.
Step 53, determining grid sub-items to be aligned according to the actual positions of each grid sub-item.
To clearly illustrate the above embodiment, in one possible implementation of the embodiment of the present disclosure, as shown in fig. 6, determining the grid sub-items to be aligned according to the actual position of each grid sub-item may include:
step 61, obtaining the width value of each grid subitem.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, a width value of each grid sub-item shown in fig. 2 may be calculated according to a grid attribute of each grid sub-item.
And step 62, determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, the electronic device may determine, after acquiring the width value of each grid sub-item, which grid sub-item is occupied according to the actual position of each grid sub-item and the width value of each grid sub-item, and may determine, from a plurality of grid sub-items, the grid sub-item whose actual position is occupied, and use the grid sub-item whose actual position is occupied as the grid sub-item to be aligned.
And step 54, acquiring the column height of the column where the grid sub-item to be aligned is located according to the actual position of the grid sub-item to be aligned.
In the embodiment of the disclosure, after obtaining the grid sub-item to be aligned, the electronic device may first directly obtain the actual position of the grid sub-item to be aligned, determine, according to the actual position, the column where the grid sub-item to be aligned is located, and obtain the column height of the column.
In response to the column height being less than the maximum column height, step 55, the grid sub-items to be aligned are height-supplemented.
In one example, the page is an information browsing page in a short video APP, and the short video APP is installed in a mobile phone, where, referring to fig. 2, in the process of loading the information browsing page code, the height of each column shown in fig. 2 may be determined according to a grid attribute (for example, a layout style and configuration), a maximum column height mhight in the column may be obtained, then each column (i.e., each grid sub-item) is traversed, an actual position { x, endX, y, endY, height, width } of a sub-item (i.e., a grid sub-item) is calculated, at this time, it may be determined whether the actual position of the current item is occupied by an item with a larger (for example, greater than 1) column width of the previous column, and if so, the column height of the column where the current item is located may be obtained according to the actual position of the current item. Then, whether the column height of the column where the current item is located is smaller than the maximum column height can be judged, if yes, the current item needs to be subjected to height compensation, at the moment, blank between two adjacent (for example, upper and lower adjacent) items of the current item can be automatically filled with blank items, and if the current item is the last item of a certain column, height compensation can be performed according to coordinate information, item info, self height and column maximum height. Thus, automated alignment of layout elements (e.g., grid sub-items) may be achieved, enhancing the visual effect of the page.
Further, if the column height of the column of the current item is greater than or equal to the maximum column height, the current item may not be height-padded.
According to the page generation method provided by the embodiment of the disclosure, the electronic equipment firstly generates a plurality of grid sub-items in the page, then performs position layout on the grid sub-items according to the grid attribute, and performs elastic layout on filling content in the grid sub-items according to the elastic layout attribute. Therefore, the layout and the rendering of the page elements can be realized, and the workload of the layout and the rendering of the page basic elements can be effectively reduced.
FIG. 7 is a block diagram illustrating a method of generating a page according to an exemplary embodiment. Referring to fig. 7, the page generating apparatus 70 includes: a generation module 71, a layout module 72 and a content population module 73.
Wherein the generation module 71 is configured to generate a plurality of grid sub-items within the page, wherein each grid sub-item comprises a grid attribute for describing location information of the grid sub-item and an elastic layout attribute for describing layout configuration information of filler content in the grid sub-item.
The layout module 72 is configured to place the grid sub-items according to the grid attributes.
The content populating module 73 is configured to elastically layout the populated content in the grid sub-items according to the elastic layout attributes.
In one possible implementation of the disclosed embodiments, the layout module 72 is specifically configured to: analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item; determining a start abscissa, an end abscissa, a start ordinate and an end ordinate of the grid subitem according to the coordinate attribute; and setting the grid sub-items to corresponding positions according to the start abscissa, the end abscissa, the start ordinate and the end ordinate.
In one possible implementation of the embodiments of the present disclosure, the content filling module 73 is specifically configured to: determining layout information of grid sub-items according to the elastic layout attribute and filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes; and filling the filling content into the corresponding grid sub-items according to the layout information.
In one possible implementation of the disclosed embodiments, the layout module 72 may further include: the device comprises a first determining unit, a first acquiring unit, a second determining unit, a second acquiring unit and a height supplementing unit.
Wherein the first determining unit is configured to determine a maximum column height among the plurality of grid sub-items according to the grid attribute.
And a first acquisition unit configured to traverse each grid sub-item to acquire an actual position of each grid sub-item.
And a second determining unit configured to determine the grid sub-items to be aligned according to the actual positions of each grid sub-item.
The second acquisition unit is configured to acquire the column height of the column where the grid sub-item to be aligned is located according to the actual position of the grid sub-item to be aligned.
And a height-replenishment unit configured to, in response to the column height being less than the maximum column height, perform height replenishment of the grid sub-items to be aligned.
In one possible implementation manner of the embodiment of the present disclosure, the second determining unit is specifically configured to: acquiring a width value of each grid subitem; and determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
In actual use, the page generating apparatus provided by the embodiment of the present disclosure may be configured in an electronic device to execute the foregoing page generating method. Thus, the specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
According to the page generating device provided by the embodiment of the disclosure, firstly, a plurality of grid sub-items are generated in a page through the generating module, then, the grid sub-items are subjected to position layout according to grid attributes through the layout module, and finally, filling contents in the grid sub-items are subjected to elastic layout according to the elastic layout attributes through the content filling module. Therefore, the layout and the rendering of the page elements can be realized, and the workload of the layout and the rendering of the page basic elements can be effectively reduced.
In order to implement the above embodiment, the present disclosure also proposes an electronic device.
Wherein the electronic device comprises a processor and a memory for storing instructions executable by the processor; the processor is configured to execute the instructions to implement the page generation method described above.
In order to implement the above-described embodiments, the present disclosure also proposes a storage medium.
Wherein the instructions in the storage medium, when executed by the processor of the electronic device, enable the electronic device to perform the page generation method described above.
To achieve the above embodiments, the present disclosure also provides a computer program product.
The computer program, when executed by the processor of the electronic device, enables the electronic device to perform the page generation method described above.
Fig. 8 is a block diagram of an electronic device, according to an example embodiment. The electronic device shown in fig. 8 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.
As shown in fig. 8, the electronic device 80 includes a processor 81 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 82 or a program loaded from a Memory 86 into a random access Memory (RAM, random Access Memory) 83. In the RAM 83, various programs and data required for the operation of the electronic device 80 are also stored. The processor 81, the ROM 82 and the RAM 83 are connected to each other via a bus 84. An Input/Output (I/O) interface 85 is also connected to bus 84.
The following components are connected to the I/O interface 85: a memory 86 including a hard disk or the like; and a communication section 87 including a network interface card such as a LAN (local area network ) card, a modem, or the like, the communication section 87 performing communication processing via a network such as the internet; a drive 88 is also connected to the I/O interface 85 as needed.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program embodied on a computer readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from the network through the communication section 87. The above-described functions defined in the methods of the present disclosure are performed when the computer program is executed by the processor 81.
In an exemplary embodiment, a storage medium is also provided, such as a memory, comprising instructions executable by the processor 81 of the electronic device 80 to perform the above-described method. Alternatively, the storage medium may be a non-transitory computer readable storage medium, which may be, for example, ROM, random Access Memory (RAM), CD-ROM, magnetic tape, floppy disk, optical data storage device, and the like.
In the context of this disclosure, a computer-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. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer 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 computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
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 adaptations, 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 is to be understood that the present disclosure is not limited to the precise arrangements and instrumentalities shown in the drawings, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (10)
1. The page generation method is characterized by comprising the following steps:
generating a plurality of grid sub-items in a page, wherein each grid sub-item comprises grid attributes and elastic layout attributes, the grid attributes are used for describing position information of the grid sub-item, and the elastic layout attributes are used for describing layout configuration information of filling content in the grid sub-item;
performing position layout on the grid sub-items according to the grid attributes; and
performing elastic layout on the filling content in the grid subitem according to the elastic layout attribute;
wherein, the performing the position layout on the grid sub-item according to the grid attribute further includes:
determining a maximum column height among the plurality of grid sub-items according to the grid attribute;
traversing each grid sub-item to obtain the actual position of each grid sub-item;
determining grid sub-items to be aligned according to the actual positions of each grid sub-item;
acquiring the column height of a column in which the grid sub item to be aligned is positioned according to the actual position of the grid sub item to be aligned;
and in response to the column height being less than the maximum column height, performing height replenishment on the grid sub-items to be aligned.
2. The method for generating a page according to claim 1, wherein the performing the position layout on the grid sub-item according to the grid attribute includes:
analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item;
determining a start abscissa, an end abscissa, a start ordinate and an end ordinate of the grid subitem according to the coordinate attribute;
and setting the grid sub-item to a corresponding position according to the starting abscissa, the ending abscissa, the starting ordinate and the ending ordinate.
3. The method for generating a page according to claim 1, wherein elastically laying out the filler content in the grid sub-item according to the elastic layout attribute, comprises:
determining layout information of the grid sub-items according to the elastic layout attribute and the filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes;
and filling the filling content into the corresponding grid sub-items according to the layout information.
4. The method for generating a page according to claim 1, wherein determining the grid sub-item to be aligned according to the actual position of each grid sub-item comprises:
acquiring a width value of each grid sub-item;
and determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
5. A page generation apparatus, comprising:
a generation module configured to generate a plurality of grid sub-items in a page, wherein each grid sub-item comprises a grid attribute for describing position information of the grid sub-item and an elastic layout attribute for describing layout configuration information of filler content in the grid sub-item;
a layout module configured to position layout the grid sub-items according to the grid attributes; and
a content filling module configured to perform an elastic layout on the filling content in the grid sub-item according to the elastic layout attribute;
wherein, the layout module includes:
a first determining unit configured to determine a maximum column height among the plurality of grid sub-items according to the grid attribute;
a first obtaining unit configured to traverse each of the grid sub-items to obtain an actual position of each of the grid sub-items;
a second determining unit configured to determine grid sub-items to be aligned according to the actual positions of each of the grid sub-items;
the second acquisition unit is configured to acquire the column height of the column where the grid sub item to be aligned is located according to the actual position of the grid sub item to be aligned;
and a height-replenishment unit configured to, in response to the column height being less than the maximum column height, highly-replenish the grid sub-items to be aligned.
6. The page generation apparatus of claim 5, wherein the layout module is specifically configured to:
analyzing the grid attribute to obtain the position information of the grid sub-item, wherein the position information comprises the coordinate attribute of the grid sub-item;
determining a start abscissa, an end abscissa, a start ordinate and an end ordinate of the grid subitem according to the coordinate attribute;
and setting the grid sub-item to a corresponding position according to the starting abscissa, the ending abscissa, the starting ordinate and the ending ordinate.
7. The page generation apparatus of claim 5, wherein the content population module is specifically configured to:
determining layout information of the grid sub-items according to the elastic layout attribute and the filling content, wherein the filling content comprises one or more of characters, links, pictures, time, animation and buttons, and the layout information comprises a plurality of description information, field information, component types and rendering modes;
and filling the filling content into the corresponding grid sub-items according to the layout information.
8. The page generating apparatus according to claim 5, wherein the second determining unit is specifically configured to:
acquiring a width value of each grid sub-item;
and determining the grid sub-item with the occupied actual position from the grid sub-items according to the actual position of each grid sub-item and the width value of each grid sub-item, and taking the grid sub-item with the occupied actual position as the grid sub-item to be aligned.
9. An electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement the page generation method of any of claims 1-4.
10. A storage medium, which when executed by a processor of an electronic device, enables the electronic device to perform the method of generating a page as claimed in any one of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110687524.2A CN113536179B (en) | 2021-06-21 | 2021-06-21 | Page generation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110687524.2A CN113536179B (en) | 2021-06-21 | 2021-06-21 | Page generation method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113536179A CN113536179A (en) | 2021-10-22 |
| CN113536179B true CN113536179B (en) | 2023-12-26 |
Family
ID=78125389
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110687524.2A Active CN113536179B (en) | 2021-06-21 | 2021-06-21 | Page generation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113536179B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11734496B2 (en) | 2021-11-16 | 2023-08-22 | Canva Pty Ltd | Systems and methods for generating webpage data for rendering a design |
| CN114579241A (en) * | 2022-03-02 | 2022-06-03 | 湖南快乐阳光互动娱乐传媒有限公司 | Page rendering method, device and system |
| CN116578219B (en) * | 2023-04-28 | 2024-06-14 | 北京洞悉网络有限公司 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240774A (en) * | 2017-07-04 | 2019-01-18 | 武汉安天信息技术有限责任公司 | A kind of layout method and layout system of web page |
| CN110489117A (en) * | 2018-05-15 | 2019-11-22 | 车伯乐（北京）信息科技有限公司 | A kind of page layout method and device |
| CN112464122A (en) * | 2020-11-30 | 2021-03-09 | 北京首汽智行科技有限公司 | Grid-based mobile terminal H5 page grid layout method |
| CN112748923A (en) * | 2021-01-18 | 2021-05-04 | 恒安嘉新（北京）科技股份公司 | Method and device for creating visual billboard, electronic equipment and storage medium |
-
2021
- 2021-06-21 CN CN202110687524.2A patent/CN113536179B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240774A (en) * | 2017-07-04 | 2019-01-18 | 武汉安天信息技术有限责任公司 | A kind of layout method and layout system of web page |
| CN110489117A (en) * | 2018-05-15 | 2019-11-22 | 车伯乐（北京）信息科技有限公司 | A kind of page layout method and device |
| CN112464122A (en) * | 2020-11-30 | 2021-03-09 | 北京首汽智行科技有限公司 | Grid-based mobile terminal H5 page grid layout method |
| CN112748923A (en) * | 2021-01-18 | 2021-05-04 | 恒安嘉新（北京）科技股份公司 | Method and device for creating visual billboard, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113536179A (en) | 2021-10-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113536179B (en) | Page generation method and device, electronic equipment and storage medium | |
| JP7354294B2 (en) | System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| CN102663126B (en) | Method and device for displaying webpage in mobile terminal | |
| US11216253B2 (en) | Application prototyping tool | |
| US9142192B2 (en) | Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same | |
| US8819624B2 (en) | Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN110516186A (en) | Page skeleton automatic generating method, equipment, storage medium and device | |
| CN103365855A (en) | Method and server for generating web pages | |
| CN104217037A (en) | Method and device for displaying web page in mobile terminal | |
| CN106991096A (en) | Dynamic page rendering intent and device | |
| CN103176954A (en) | Mathematical formula display method and mathematical formula display system based on hypertext markup language (HTML) 5 canvas | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| CN103377039A (en) | Webgame developing and analyzing method, editor and analyzer | |
| CN102902545A (en) | Decomposing markup language elements for animation | |
| CN103024564A (en) | Method for visually developing and automatically generating electronic program guide (EPG) webpage of Internet protocol television (IPTV) platform | |
| US9158743B1 (en) | Grid layout control for network site design | |
| CN112307385A (en) | Webpage data loading and processing method and device, electronic equipment and storage medium | |
| CN113253959B (en) | Front-end screen projection method adaptive to different large screen resolutions | |
| US8677255B1 (en) | Expanded container view for graphical editing environment | |
| CN112632436A (en) | Webpage display method and device, electronic equipment and storage medium | |
| Pavazza et al. | The alternative way of creating infographics using SVG technology | |
| Aryal | Bootstrap: a front-end framework for responsive web design | |
| CN114491191A (en) | Interface document generation method and device, electronic equipment and storage medium |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |