CN112800357A - Web page presenting method, device, equipment and storage medium - Google Patents
Web page presenting method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN112800357A CN112800357A CN201911029671.XA CN201911029671A CN112800357A CN 112800357 A CN112800357 A CN 112800357A CN 201911029671 A CN201911029671 A CN 201911029671A CN 112800357 A CN112800357 A CN 112800357A
- Authority
- CN
- China
- Prior art keywords
- content
- preset
- area
- display area
- size
- 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
- 238000000034 method Methods 0.000 title claims abstract description 66
- 238000009877 rendering Methods 0.000 claims description 12
- 238000004891 communication Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 14
- 230000008569 process Effects 0.000 description 19
- 238000010586 diagram Methods 0.000 description 13
- 238000004590 computer program Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000008901 benefit Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
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/957—Browsing optimisation, e.g. caching or content distillation
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)
- Document Processing Apparatus (AREA)
Abstract
The method, the device, the equipment and the storage medium for presenting the Web page, provided by the invention, are used for acquiring the preset inner edge distance of the first display area, and determining the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area, so that the layout parameters become personalized parameters obtained based on the preset parameters of a user; then, determining layout parameters of the content elements in the first content area by acquiring the total number, the preset size and the preset margin of the content elements and according to the total number, the preset size and the preset margin of the content elements and the size of the first content area, so that the layout parameters become personalized parameters obtained based on preset parameters of a user; and finally, adopting an vue frame to present the target Web page in a self-adaptive manner according to the layout parameters of the areas and the elements, so that the target Web page can present a more personalized page effect for the user, and the personalized presentation effect of the self-adaptive Web page is improved.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a method, a device, equipment and a storage medium for presenting a Web page.
Background
In Web page development, a group of data is often provided with multiple dimensions, and a user usually wants to sort the data according to a certain dimension and display the data in a Web page.
In the existing Web page presentation mode, an vue frame can be used to adaptively present a Web page containing various data to improve the adaptivity of the Web page, but while the adaptivity of the Web page is met, the presentation style of the Web page is single, the diversified requirements in data presentation are difficult to meet, and a more personalized page effect cannot be presented to a user in different scenes.
Therefore, a Web page presenting scheme is urgently needed at present to improve the personalized display effect of the page under the condition of realizing page self-adaption.
Disclosure of Invention
In view of the above, the present invention has been made to provide a Web page rendering method, apparatus, device and storage medium that overcome the above problems or at least partially solve the above problems.
In order to achieve the purpose, the invention provides the following technical scheme:
a Web page rendering method, comprising:
acquiring a preset inner edge distance of a first display area;
determining layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
acquiring the total number, the preset size and the preset outer margin of the content elements;
determining layout parameters of the content elements in the first content area according to the total number of the content elements, a preset size, a preset margin and the size of the first content area;
and adopting an vue framework to adaptively present the target Web page according to the layout parameters of the areas and the elements.
Preferably, before the acquiring the preset inner edge distance of the first display area, the method further includes:
acquiring a preset inner edge distance of a second display area, wherein the second display area is wrapped outside the first display area;
determining layout parameters of a second title area and a second content area in the second display area according to the preset inner edge distance of the second display area;
acquiring the total number, the preset size and the preset outer margin of the first display area;
and determining the layout parameters of the first display area in the second content area according to the total number, preset size and preset margin of the first display area and the size of the second content area.
Preferably, the determining the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area includes:
determining an edge-adjacent area in the first display area according to the preset inner edge distance of the first display area; the edge-adjacent area is an area covered between an original position and a target position when a specified edge of the first display area translates the preset inner edge distance from the original position to the inner side of the first display area and then reaches the target position; the appointed side of the first display area is a side appointed by a user in a plurality of sides which surround the first display area;
determining the position and the size of the adjacent edge area as the position and the size of a first title area in the first display area;
and determining the position and the size of the rest area except the adjacent edge area in the first display area as the position and the size of the first content area in the first display area.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area includes:
determining the maximum column number capable of containing the content elements in the first content area as a first target column number according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area;
determining a minimum line number required for accommodating the content elements in the first content region according to the first target column number and the total number of the content elements, wherein the minimum line number is used as a first target line number;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number and the preset width and the preset horizontal outer margin of the content element.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area further includes:
setting a negative margin of the first content area according to a preset outer margin of the content element to shorten a distance between a boundary of the first content area and the content element adjacent to the boundary;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number, the preset width and the preset horizontal outer margin of the content element and the negative margin of the first content area.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area further includes:
when detecting that no adjacent content element exists above a specified content element, adjusting the distance between the upper edge and the outer edge of the specified content element to be zero; the specified content element is any one of the content elements;
when it is detected that there is no adjacent content element below a specified content element, the lower outer margin of the specified content element is adjusted to zero.
Preferably, after the determining the layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and the size of the first content region, the method further includes:
acquiring a preset layout mode of content elements;
and determining layout parameters of the sub-elements in the content elements according to the preset layout mode of the content elements.
A Web page rendering apparatus comprising:
a preset parameter obtaining unit, configured to obtain a preset inner edge distance of the first display area;
a title content layout unit, configured to determine layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
the preset parameter acquiring unit is further configured to acquire a total number of content elements, a preset size, and a preset margin;
a content element layout unit, configured to determine layout parameters of the content elements in the first content region according to a total number of the content elements, a preset size, a preset margin, and a size of the first content region;
and the target page presenting unit is used for adopting an vue framework to present the target Web page in a self-adaptive mode according to the layout parameters of the areas and the elements.
A storage medium comprising a stored program, wherein the program performs any one of the above Web page rendering methods.
An electronic device comprising at least one processor, and at least one memory connected to the processor, a bus; the processor and the memory complete mutual communication through the bus; the processor is configured to invoke program instructions in the memory to perform any of the Web page rendering methods described above.
By means of the technical scheme, the method, the device, the equipment and the storage medium for presenting the Web page, provided by the invention, obtain the preset inner edge distance of the first display area, and determine the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area, so that the layout parameters of the first title area and the first content area become personalized parameters obtained based on the preset parameters of a user; then, determining layout parameters of the content elements in the first content area by acquiring the total number, the preset size and the preset margin of the content elements and according to the total number, the preset size and the preset margin of the content elements and the size of the first content area, so that the layout parameters of the content elements become personalized parameters obtained based on the preset parameters of the user; and finally, adopting an vue frame to present the target Web page in a self-adaptive manner according to the layout parameters of the areas and the elements, so that the target Web page can present a more personalized page effect for the user, and the personalized presentation effect of the self-adaptive Web page is improved.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:
fig. 1 is a flowchart of a Web page rendering method according to an embodiment of the present application;
FIG. 2 is a diagram illustrating an example of a result presented by a Web page according to an embodiment of the present disclosure;
FIG. 3 is an exemplary diagram of various layouts of content elements provided by embodiments of the present application;
FIG. 4 is another flowchart of a method for presenting a Web page according to an embodiment of the present application;
FIG. 5 is a diagram illustrating another example of a Web page rendering result provided by an embodiment of the present application;
fig. 6 is a flowchart of a process of determining layout parameters of a title area and a content area according to an embodiment of the present application;
FIG. 7 is a flow chart of a process for determining layout parameters of content elements provided by an embodiment of the present application;
fig. 8 is a schematic structural diagram of a Web page presentation device according to an embodiment of the present application;
fig. 9 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
Referring to fig. 1, fig. 1 is a flowchart of a Web page presenting method according to an embodiment of the present application.
As shown in fig. 1, the Web page presenting method of the present embodiment may include:
s101: and acquiring a preset inner edge distance of the first display area.
The display area is any area in which at least a title area, a content area, and a content element are displayed on the Web page, and as shown in fig. 2, the first title area, the first content area, and the content element are displayed in the first display area.
The inner edge distance of the first display area is user-defined, and after the user sets the inner edge distance of the first display area according to the design requirement of the user, the user can obtain the preset inner edge distance of the first display area when needing to present the first display area.
S102: and determining layout parameters of a first title area and a first content area in the first display area according to the preset inner edge distance of the first display area.
The layout parameters mentioned in the present invention mainly include positions and sizes, but may also include parameters such as shapes, line widths, transparencies, etc. in specific applications.
S103: and acquiring the total number, the preset size and the preset margin of the content elements.
The content elements generally refer to data objects to be presented on a page, and the total number of the content elements is the total number of the data objects to be presented on the Web page, and may be completely determined by the total number of the data objects of the data source, or may be flexibly set by a user according to specific requirements, for example, the total number of the content elements is set by the user.
The size and the outer edge distance of the content elements support user self definition, and after the size and the outer edge distance of the content elements are set by a user according to design requirements, the total number, the preset size and the preset outer edge distance of the content elements can be obtained when the content elements need to be presented.
S104: and determining the layout parameters of the content elements in the first content area according to the total number, the preset size and the preset margin of the content elements and the size of the first content area.
After the layout parameters of the first content area in the first display area are determined, the size of the first content area is already obtained. The first content area is used as a container of the content elements, and the position and the size of the layout of the content elements in the first content area can be determined through calculation according to the size of the first content area, the total number of the content elements, the preset size and the preset outer margin.
In an example, after step S104, the method may further include: acquiring a preset layout mode of content elements; and determining layout parameters of the sub-elements in the content elements according to the preset layout mode of the content elements.
The preset layout mode refers to a layout mode of the child elements in the content elements, and as shown in several layout modes shown in fig. 3, the content elements are index regions, the child elements of the content elements include index names and index values, and the layout of the child elements in the content elements can be realized by "display: flex" in combination with "flex-direction" of CSS (Cascading Style Sheets). Further, the distance between the index name and the index value in the index area may be realized by "padding" of the CSS.
S105: and adopting an vue framework to adaptively present the target Web page according to the layout parameters of the areas and the elements.
Vue is a set of progressive framework for constructing user interface, which provides the function of presenting Web page adaptively, the invention adds the layout parameters of each area and element determined according to the preset parameters of the user in the process of presenting Web page adaptively by vue framework, thus realizing the individuation of page effect on the basis of realizing page self-adaptation.
The method for presenting a Web page provided by this embodiment obtains a preset inner edge distance of a first display area, and determines layout parameters of a first title area and a first content area in the first display area according to the preset inner edge distance of the first display area, so that the layout parameters of the first title area and the first content area become personalized parameters obtained based on preset parameters of a user; then, determining layout parameters of the content elements in the first content area by acquiring the total number, the preset size and the preset margin of the content elements and according to the total number, the preset size and the preset margin of the content elements and the size of the first content area, so that the layout parameters of the content elements become personalized parameters obtained based on the preset parameters of the user; and finally, adopting an vue frame to present the target Web page in a self-adaptive manner according to the layout parameters of the areas and the elements, so that the target Web page can present a more personalized page effect for the user, and the personalized presentation effect of the self-adaptive Web page is improved.
Referring to fig. 4, fig. 4 is another flowchart of a Web page presenting method according to an embodiment of the present application.
In the present embodiment, the first display region is treated as a content element in another display region, whereby nesting of multi-level display regions can be realized.
As shown in fig. 4, the Web page presenting method of the present embodiment may include:
s201: and acquiring the preset inner edge distance of the second display area.
The second display area is wrapped outside the first display area.
S202: and determining layout parameters of a second title area and a second content area in the second display area according to the preset inner edge distance of the second display area.
S203: and acquiring the total number, the preset size and the preset outer margin of the first display area.
S204: and determining the layout parameters of the first display area in the second content area according to the total number, preset size and preset margin of the first display area and the size of the second content area.
Steps S201 to S204 are similar to the processing logic of steps S101 to S104 in the foregoing embodiment, except that the processing logic of the content elements in steps S103 to S104 is adopted in steps S203 to S204 to process the first display area.
After step S204, the present embodiment further includes steps S205 to S209, and steps S205 to S209 are completely the same as steps S101 to S105 in the foregoing embodiment, and are not repeated here, and the presentation effect of the target Web page in the present embodiment may be as shown in fig. 5.
In the Web page presenting method provided by the embodiment, the first display area is treated as a content element in another display area, so that nesting of multiple display areas is realized; in addition, in the process of realizing nesting of the multiple levels of display areas, the layout parameters of the second title area and the second content area in the second display area and the layout parameters of the first display area in the second content area are also obtained based on the preset parameters of the user, and finally, an vue frame is adopted, and the target Web page is presented in a self-adaptive manner according to the personalized layout parameters determined based on the preset parameters of the user, so that the target Web page can present a more personalized page effect with richer content for the user.
Referring to fig. 6, fig. 6 is a flowchart illustrating a process of determining layout parameters of a title area and a content area according to an embodiment of the present application.
The process for determining the layout parameters of the title area and the content area in this embodiment may be used to implement the step of determining the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area in the foregoing embodiment.
As shown in fig. 6, the process of determining the layout parameters of the title area and the content area in this embodiment may include:
s301: and determining an edge area in the first display area according to the preset inner edge distance of the first display area.
The edge-adjacent area is an area covered between an original position and a target position when a specified edge of the first display area translates the preset inner edge distance from the original position to the inner side of the first display area and then reaches the target position; the designated side of the first display area is a side designated by a user from a plurality of sides which surround the first display area. The edge-adjacent area is mainly used for laying out the header area (as shown in fig. 5).
The number of sides of the first display area is related to the shape of the first display area. For example, when the first display region is square, rectangular, diamond-shaped, or trapezoidal, the first display region has four sides; when the first display area is triangular, the first display area has three edges; when the first display area is in other irregular shapes, the number of edges of the first display area can be determined according to actual conditions.
When the preset inner edge distance of the first display area is the upper inner edge distance 20px, the area within the distance range of 20px from the upper boundary of the first display area is the adjacent area. Of course, the preset inner edge distance may also be at least one of a lower inner edge distance, a left inner edge distance and a right inner edge distance, and the specific value of the preset inner edge distance may be user-defined.
For example, when M sides of the first display area are all provided with the preset inner edge distance, M adjacent side areas determined in the first display area are available and can be used for laying out the title area, wherein M is more than or equal to 3, and M is a natural number.
S302: and determining the position and the size of the adjacent edge area as the position and the size of the first title area in the first display area.
S303: and determining the position and the size of the rest area except the adjacent edge area in the first display area as the position and the size of the first content area in the first display area.
For example, in the first display area, an adjacent area is left for the first title area by the "padding" attribute, i.e. the first title area adopts an absolute positioning in the first display area, which enables the first content area to place content elements using a width and height of 100% in the first display area outside the adjacent area.
In addition, the first content area may also support the user to set a peripheral margin, and the margin value may be a numerical value, and the unit of the numerical value may be px or percentage.
In the process of determining the layout parameters of the title area and the content area provided by this embodiment, the first title area and the first content area can be automatically divided based on the preset parameters of the user by using the preset inner distance of the first display area, so that the efficiency of acquiring the personalized layout parameters of the title area and the content area is improved.
Referring to fig. 7, fig. 7 is a flowchart of a process for determining layout parameters of content elements according to an embodiment of the present application.
The process for determining layout parameters of content elements according to this embodiment may be used to implement the step of determining the layout parameters of the content elements in the first content area according to the total number of the content elements, the preset size, the preset margin, and the size of the first content area in the foregoing embodiment.
As shown in fig. 7, the process for determining the layout parameters of the content elements provided by the present embodiment may include:
s401: and determining the maximum column number capable of accommodating the content elements in the first content area as a first target column number according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area.
The maximum number of columns in the first content area that can accommodate the content elements, in fact the maximum number of rows in the first content area that can accommodate the content elements.
S402: and determining the minimum line number required for containing the content elements in the first content area according to the first target column number and the total number of the content elements as a first target line number.
S403: and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number and the preset width and the preset horizontal outer margin of the content element.
Steps S401 to S403 may be implemented by using a calc () function in the CSS, where the calc () function is used to implement dynamic style calculation, and the row and column number layout parameters of the content elements may be dynamically calculated according to the preset width, the preset horizontal margin and the total number of the content elements, and the total width of the first content region.
In a specific application, the total number of the content elements may be less than the maximum number of columns capable of accommodating the content elements in the first content area, and in this case, the preset width of the content elements may be adjusted to stretch the content elements to a width capable of uniformly filling up a whole row of the first content area.
In one example, the preset width of the content element may be a preset minimum width of the content element, that is, the preset width of the content element may not be adjusted to be small but may be adjusted to be large.
In a specific application, it may be necessary to perform a border process on the content elements adjacent to the border, and accordingly, the process of determining the layout parameters of the content elements may further include the following steps a1 to a 2:
a1, setting the negative margin of the first content area according to the preset outer margin of the content element, so as to shorten the distance between the boundary of the first content area and the content element adjacent to the boundary.
The negative margin of the first content area can be equal to the preset outer margin of the content element, so that the content element adjacent to the margin can be completely attached to the margin; the negative edge distance of the first content area may also be smaller than the preset outer edge distance of the content element, but the difference between the two is smaller than a preset difference threshold value, so that the content element adjacent to the edge can be adjacent to the boundary but keep some distance.
And A2, determining the position and the size of the content element in the first content area according to the first target column number and the first target row number, and the preset width and the preset horizontal outer margin of the content element, and combining the negative margin of the first content area.
In a specific application, the process of determining the layout parameters of the content elements may further include the following steps B1-B2:
b1, when detecting that there is no adjacent content element above the designated content element, adjusting the upper outer edge distance of the designated content element to zero.
The specified content element is any one of the content elements. The adjustment of the outer margin of a content element may be accomplished using the "margin" attribute of CSS in conjunction with a CSS neighbor sibling selector, such that a given content element has an upper outer margin when an adjacent classification element is present thereon.
B2, when detecting that there is no adjacent content element below the designated content element, adjusting the lower outer edge distance of the designated content element to zero.
In the process of determining layout parameters of content elements provided in this embodiment, the maximum number of columns capable of accommodating content elements in the first content area is determined as a first target number of columns according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area; determining a minimum line number required for containing the content elements in the first content area according to the first target column number and the total number of the content elements, and taking the minimum line number as a first target line number; and finally, determining the position and the size of the content element in the first content area according to the first target column number, the first target row number, the preset width and the preset horizontal outer margin of the content element, realizing the dynamic determination of the layout parameter of the content element on the basis of the preset parameter of a user, and simultaneously ensuring the adaptivity and the individuation of the layout of the content element.
Compared with the Web page presentation method provided by the invention, the embodiment of the invention also provides a corresponding Web page presentation device, the Web page presentation device is used for implementing the Web page presentation method provided by the embodiment of the invention, the content of the Web page presentation device described below can be correspondingly referred to with the content of the Web page presentation method described above, and similar or same content is not repeated.
Referring to fig. 8, fig. 8 is a schematic structural diagram of a Web page rendering device according to an embodiment of the present application.
The Web page presenting apparatus of this embodiment is configured to implement the Web page presenting method of the foregoing embodiment, and as shown in fig. 8, the apparatus at least includes: a preset parameter obtaining unit 100, a title content layout unit 200, a content element layout unit 300, and a target page presenting unit 400.
A preset parameter obtaining unit 100, configured to obtain a preset inner edge distance of the first display area;
a title content layout unit 200, configured to determine layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
the preset parameter obtaining unit 100 is further configured to obtain a total number of content elements, a preset size, and a preset margin;
a content element layout unit 300, configured to determine a layout parameter of the content elements in the first content region according to the total number of the content elements, a preset size, a preset margin, and the size of the first content region;
and the target page presenting unit 400 is used for adopting an vue framework to present the target Web page in a self-adaptive manner according to the layout parameters of the areas and the elements.
In one example, nesting of multiple levels of display areas may be achieved by treating a first display area as a content element in another display area.
Correspondingly, the preset parameter obtaining unit 100 is further configured to obtain a preset inner edge distance of a second display area, where the second display area is wrapped outside the first display area;
the title content layout unit 200 is further configured to determine layout parameters of the second title area and the second content area in the second display area according to the preset inner edge distance of the second display area.
The preset parameter obtaining unit 100 is further configured to obtain a total number of the first display areas, a preset size, and a preset margin.
The content element layout unit 300 is further configured to determine a layout parameter of the first display area in the second content area according to the total number of the first display areas, a preset size, a preset margin, and the size of the second content area.
In an example, the title content layout unit 200 is specifically configured to: determining an edge-adjacent area in the first display area according to the preset inner edge distance of the first display area; determining the position and the size of the adjacent edge area as the position and the size of a first title area in the first display area; and determining the position and the size of the rest area except the adjacent edge area in the first display area as the position and the size of the first content area in the first display area.
In an example, the content element layout unit 300 is specifically configured to: determining the maximum column number capable of containing the content elements in the first content area as a first target column number according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area; determining a minimum line number required for accommodating the content elements in the first content region according to the first target column number and the total number of the content elements, wherein the minimum line number is used as a first target line number; and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number and the preset width and the preset horizontal outer margin of the content element.
Further, the content element layout unit 300 is further specifically configured to: setting a negative margin of the first content area according to a preset outer margin of the content element to shorten a distance between a boundary of the first content area and the content element adjacent to the boundary; and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number, the preset width and the preset horizontal outer margin of the content element and the negative margin of the first content area.
In addition, the content element layout unit 300 may be further specifically configured to: when detecting that no adjacent content element exists above a specified content element, adjusting the distance between the upper edge and the outer edge of the specified content element to be zero; the specified content element is any one of the content elements; when it is detected that there is no adjacent content element below a specified content element, the lower outer margin of the specified content element is adjusted to zero.
The content element layout unit 300 may further be configured to: after determining layout parameters of the content elements in the first content area according to the total number, preset size and preset margin of the content elements and the size of the first content area, acquiring a preset layout mode of the content elements; and determining layout parameters of the sub-elements in the content elements according to the preset layout mode of the content elements.
The Web page presentation device provided by this embodiment obtains the preset inner edge distance of the first display area, and determines the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area, so that the layout parameters of the first title area and the first content area become personalized parameters obtained based on the preset parameters of the user; then, determining layout parameters of the content elements in the first content area by acquiring the total number, the preset size and the preset margin of the content elements and according to the total number, the preset size and the preset margin of the content elements and the size of the first content area, so that the layout parameters of the content elements become personalized parameters obtained based on the preset parameters of the user; and finally, adopting an vue frame to present the target Web page in a self-adaptive manner according to the layout parameters of the areas and the elements, so that the target Web page can present a more personalized page effect for the user, and the personalized presentation effect of the self-adaptive Web page is improved.
The Web page presenting device provided by the embodiment of the present invention includes a processor and a memory, where the preset parameter obtaining unit 100, the title content layout unit 200, the content element layout unit 300, the target page presenting unit 400, and the like are all stored in the memory as program units, and the processor executes the program units stored in the memory to implement corresponding functions.
The processor comprises a kernel, and the kernel calls the corresponding program unit from the memory. The kernel can be set to be one or more, and the personalized display effect of the page is improved by adjusting the kernel parameters under the condition of realizing page self-adaption.
The memory may include volatile memory in a computer readable medium, Random Access Memory (RAM) and/or nonvolatile memory such as Read Only Memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip.
An embodiment of the present invention provides a storage medium on which a program is stored, the program implementing the Web page presentation method when executed by a processor. The storage medium may be a computer-readable storage medium.
The embodiment of the invention provides a processor, which is used for running a program, wherein the method for presenting the Web page is executed when the program runs.
Referring to fig. 9, fig. 9 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present disclosure.
As shown in fig. 9, an embodiment of the present invention further provides an electronic device 10, which includes at least one processor 11, at least one memory 12 connected to the processor 11, and a bus 13; wherein, the processor 11 and the memory 12 complete mutual communication through a bus 13; the processor 11 is arranged to call program instructions in the memory 12 to perform the model building method described above. The device herein may be a server, a PC, a PAD, a mobile phone, etc.
The present application further provides a computer program product adapted to perform a program for initializing the following method steps when executed on a data processing device:
acquiring a preset inner edge distance of a first display area;
determining layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
acquiring the total number, the preset size and the preset outer margin of the content elements;
determining layout parameters of the content elements in the first content area according to the total number of the content elements, a preset size, a preset margin and the size of the first content area;
and adopting an vue framework to adaptively present the target Web page according to the layout parameters of the areas and the elements.
Preferably, before the acquiring the preset inner edge distance of the first display area, the method further includes:
acquiring a preset inner edge distance of a second display area, wherein the second display area is wrapped outside the first display area;
determining layout parameters of a second title area and a second content area in the second display area according to the preset inner edge distance of the second display area;
acquiring the total number, the preset size and the preset outer margin of the first display area;
and determining the layout parameters of the first display area in the second content area according to the total number, preset size and preset margin of the first display area and the size of the second content area.
Preferably, the determining the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area includes:
determining an edge-adjacent area in the first display area according to the preset inner edge distance of the first display area;
determining the position and the size of the adjacent edge area as the position and the size of a first title area in the first display area;
and determining the position and the size of the rest area except the adjacent edge area in the first display area as the position and the size of the first content area in the first display area.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area includes:
determining the maximum column number capable of containing the content elements in the first content area as a first target column number according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area;
determining a minimum line number required for accommodating the content elements in the first content region according to the first target column number and the total number of the content elements, wherein the minimum line number is used as a first target line number;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number and the preset width and the preset horizontal outer margin of the content element.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area further includes:
setting a negative margin of the first content area according to a preset outer margin of the content element to shorten a distance between a boundary of the first content area and the content element adjacent to the boundary;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number, the preset width and the preset horizontal outer margin of the content element and the negative margin of the first content area.
Preferably, the determining, according to the total number of the content elements, a preset size and a preset margin, and the size of the first content area, the layout parameters of the content elements in the first content area further includes:
when detecting that no adjacent content element exists above a specified content element, adjusting the distance between the upper edge and the outer edge of the specified content element to be zero; the specified content element is any one of the content elements;
when it is detected that there is no adjacent content element below a specified content element, the lower outer margin of the specified content element is adjusted to zero.
Preferably, after the determining the layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and the size of the first content region, the method further includes:
acquiring a preset layout mode of content elements;
and determining layout parameters of the sub-elements in the content elements according to the preset layout mode of the content elements.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In a typical configuration, a device includes one or more processors (CPUs), memory, and a bus. The device may also include input/output interfaces, network interfaces, and the like.
The memory may include volatile memory in a computer readable medium, Random Access Memory (RAM) and/or nonvolatile memory such as Read Only Memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip. The memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The above are merely examples of the present application and are not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.
Claims (10)
1. A method for Web page rendering, comprising:
acquiring a preset inner edge distance of a first display area;
determining layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
acquiring the total number, the preset size and the preset outer margin of the content elements;
determining layout parameters of the content elements in the first content area according to the total number of the content elements, a preset size, a preset margin and the size of the first content area;
and adopting an vue framework to adaptively present the target Web page according to the layout parameters of the areas and the elements.
2. The method of claim 1, wherein before the acquiring the preset inner edge distance of the first display region, the method further comprises:
acquiring a preset inner edge distance of a second display area, wherein the second display area is wrapped outside the first display area;
determining layout parameters of a second title area and a second content area in the second display area according to the preset inner edge distance of the second display area;
acquiring the total number, the preset size and the preset outer margin of the first display area;
and determining the layout parameters of the first display area in the second content area according to the total number, preset size and preset margin of the first display area and the size of the second content area.
3. The method of claim 1, wherein the determining the layout parameters of the first title area and the first content area in the first display area according to the preset inner edge distance of the first display area comprises:
determining an edge-adjacent area in the first display area according to the preset inner edge distance of the first display area; the edge-adjacent area is an area covered between an original position and a target position when a specified edge of the first display area translates the preset inner edge distance from the original position to the inner side of the first display area and then reaches the target position; the appointed side of the first display area is a side appointed by a user in a plurality of sides which surround the first display area;
determining the position and the size of the adjacent edge area as the position and the size of a first title area in the first display area;
and determining the position and the size of the rest area except the adjacent edge area in the first display area as the position and the size of the first content area in the first display area.
4. The method of claim 1, wherein the determining layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and the size of the first content region comprises:
determining the maximum column number capable of containing the content elements in the first content area as a first target column number according to the preset width and the preset horizontal outer margin of the content elements and the total width of the first content area;
determining a minimum line number required for accommodating the content elements in the first content region according to the first target column number and the total number of the content elements, wherein the minimum line number is used as a first target line number;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number and the preset width and the preset horizontal outer margin of the content element.
5. The method of claim 4, wherein determining layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and a size of the first content region further comprises:
setting a negative margin of the first content area according to a preset outer margin of the content element to shorten a distance between a boundary of the first content area and the content element adjacent to the boundary;
and determining the position and the size of the content element in the first content area according to the first target column number, the first target row number, the preset width and the preset horizontal outer margin of the content element and the negative margin of the first content area.
6. The method of claim 4, wherein determining layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and a size of the first content region further comprises:
when detecting that no adjacent content element exists above a specified content element, adjusting the distance between the upper edge and the outer edge of the specified content element to be zero; the specified content element is any one of the content elements;
when it is detected that there is no adjacent content element below a specified content element, the lower outer margin of the specified content element is adjusted to zero.
7. The method of claim 1, wherein after the determining layout parameters of the content elements in the first content region according to the total number of the content elements, a preset size and a preset margin, and a size of the first content region, the method further comprises:
acquiring a preset layout mode of content elements;
and determining layout parameters of the sub-elements in the content elements according to the preset layout mode of the content elements.
8. A Web page rendering apparatus, comprising:
a preset parameter obtaining unit, configured to obtain a preset inner edge distance of the first display area;
a title content layout unit, configured to determine layout parameters of a first title area and a first content area in the first display area according to a preset inner edge distance of the first display area; the layout parameters comprise position and size;
the preset parameter acquiring unit is further configured to acquire a total number of content elements, a preset size, and a preset margin;
a content element layout unit, configured to determine layout parameters of the content elements in the first content region according to a total number of the content elements, a preset size, a preset margin, and a size of the first content region;
and the target page presenting unit is used for adopting an vue framework to present the target Web page in a self-adaptive mode according to the layout parameters of the areas and the elements.
9. A storage medium characterized in that it comprises a stored program, wherein said program executes a Web page rendering method according to any one of claims 1 to 7.
10. An electronic device, comprising at least one processor, and at least one memory connected to the processor, a bus; the processor and the memory complete mutual communication through the bus; the processor is configured to call program instructions in the memory to perform the Web page rendering method of any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911029671.XA CN112800357A (en) | 2019-10-28 | 2019-10-28 | Web page presenting method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911029671.XA CN112800357A (en) | 2019-10-28 | 2019-10-28 | Web page presenting method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112800357A true CN112800357A (en) | 2021-05-14 |
Family
ID=75802928
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911029671.XA Pending CN112800357A (en) | 2019-10-28 | 2019-10-28 | Web page presenting method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112800357A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113867868A (en) * | 2021-09-29 | 2021-12-31 | 北京达佳互联信息技术有限公司 | Display parameter determination method, device and storage medium |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060015804A1 (en) * | 2004-07-15 | 2006-01-19 | Microsoft Corporation | Method and system for presenting editable spreadsheet page layout view |
| US20060107205A1 (en) * | 2004-11-12 | 2006-05-18 | Nokia Corporation | Determining a main content area of a page |
| CN104063148A (en) * | 2014-06-11 | 2014-09-24 | 科大讯飞股份有限公司 | Method and system for dynamically fitting interface of Web application program on mobile terminal |
| CN105373567A (en) * | 2014-09-01 | 2016-03-02 | 北京奇虎科技有限公司 | Page generation method and client |
| CN106293765A (en) * | 2016-08-23 | 2017-01-04 | 乐视控股（北京）有限公司 | A kind of layout updates method and device |
| CN106462560A (en) * | 2014-04-02 | 2017-02-22 | 谷歌公司 | Systems and methods for optimizing content layout using behavior metrics |
| CN108509526A (en) * | 2018-03-13 | 2018-09-07 | 百度在线网络技术（北京）有限公司 | The method and apparatus of interface element for Dynamic Distribution's mobile application |
| CN109241473A (en) * | 2017-07-10 | 2019-01-18 | 北京搜狗科技发展有限公司 | A kind of page generation method, device and equipment |
| CN109308155A (en) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | Adjust method, apparatus, computer equipment and the storage medium of the page |
| CN110020291A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | The processing method and processing device of page layout |
-
2019
- 2019-10-28 CN CN201911029671.XA patent/CN112800357A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060015804A1 (en) * | 2004-07-15 | 2006-01-19 | Microsoft Corporation | Method and system for presenting editable spreadsheet page layout view |
| US20060107205A1 (en) * | 2004-11-12 | 2006-05-18 | Nokia Corporation | Determining a main content area of a page |
| CN106462560A (en) * | 2014-04-02 | 2017-02-22 | 谷歌公司 | Systems and methods for optimizing content layout using behavior metrics |
| CN104063148A (en) * | 2014-06-11 | 2014-09-24 | 科大讯飞股份有限公司 | Method and system for dynamically fitting interface of Web application program on mobile terminal |
| CN105373567A (en) * | 2014-09-01 | 2016-03-02 | 北京奇虎科技有限公司 | Page generation method and client |
| CN106293765A (en) * | 2016-08-23 | 2017-01-04 | 乐视控股（北京）有限公司 | A kind of layout updates method and device |
| CN109241473A (en) * | 2017-07-10 | 2019-01-18 | 北京搜狗科技发展有限公司 | A kind of page generation method, device and equipment |
| CN110020291A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | The processing method and processing device of page layout |
| CN108509526A (en) * | 2018-03-13 | 2018-09-07 | 百度在线网络技术（北京）有限公司 | The method and apparatus of interface element for Dynamic Distribution's mobile application |
| CN109308155A (en) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | Adjust method, apparatus, computer equipment and the storage medium of the page |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113867868A (en) * | 2021-09-29 | 2021-12-31 | 北京达佳互联信息技术有限公司 | Display parameter determination method, device and storage medium |
| CN113867868B (en) * | 2021-09-29 | 2024-05-17 | 北京达佳互联信息技术有限公司 | Display parameter determining method, device and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7853883B2 (en) | Content aggregation view layout based on weights | |
| US9983760B2 (en) | Apparatus, method and computer readable recording medium for arranging a plurality of items automatically in a canvas | |
| CN109753641B (en) | Method and device for changing object position, electronic equipment and storage medium | |
| CN106570025B (en) | Data filtering method and device | |
| CN106296622B (en) | Automatic layout jigsaw method and device | |
| CN106611401B (en) | Method and device for storing image in texture memory | |
| CN105787402A (en) | Information display method and device | |
| CN104793945A (en) | Large-batch picture displaying method for preventing memory overflow and device thereof | |
| CN108460003B (en) | Text data processing method and device | |
| US11620503B2 (en) | Neural network processing | |
| CN110020291B (en) | Webpage layout processing method and device | |
| CN109948083B (en) | Webpage processing method and device | |
| CN112800357A (en) | Web page presenting method, device, equipment and storage medium | |
| CN112464122A (en) | Grid-based mobile terminal H5 page grid layout method | |
| CN113792237B (en) | Optimization method and device for card layout, storage medium and processor | |
| CN110968811B (en) | Display control method and device | |
| US8594459B2 (en) | Arranging secondary images adjacent to a primary image | |
| CN113867862B (en) | List page layout method and computing device | |
| CN110968385A (en) | Proportion display method and device | |
| CN110309449A (en) | Page rendering method and device | |
| CN115145565A (en) | Rule engine-based data visualization large-screen layout method and device | |
| CN113359530A (en) | Sequence control method and device | |
| CN110032563B (en) | Processing method and system of mismatch value and electronic equipment | |
| CN106610974B (en) | Webpage photo wall generation method and device | |
| CN114154095A (en) | Page picture generation method, device, 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 |