Web page adjustment method and device

By scanning and adjusting code files using the style adjustment tool in web programming, ensuring that component styles meet preset standards and performing style isolation, the problem of style conflicts and disorders in traditional web programming is solved, and project maintenance efficiency is improved.

CN114153429BActive Publication Date: 2025-06-27SHANGHAI ZHONGYAN NETWORK TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202111317754.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-11-09
Publication Date
2025-06-27
Estimated Expiration
2041-11-09

AI Technical Summary

Technical Problem

In traditional web programming, component styles conflict with each other, resulting in confusion of page styles and increasing the workload of project maintenance.

Method used

Through the pre-installed and configured style adjustment tool, the scanning information of the target code file is obtained to determine whether the component style meets the preset standards. If it does not meet, an error or adjustment code will be reported to meet the preset standards, and the style isolation will be performed automatically.

Benefits of technology

Ensure that all CSS styles are scoped and automatically style isolation is performed, thereby fundamentally solving the problem of style confusion and reducing maintenance workload.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114153429B_ABST
    Figure CN114153429B_ABST
Patent Text Reader

Abstract

The present disclosure provides a method and apparatus for adjusting a web page. The method includes obtaining scanning information of a target code file based on a pre-installed and configured style adjustment tool; according to the scanning information, determining whether the component styles in the scanning information conform to preset standard component styles, and if not, reporting an error, giving a prompt file, and / or adjusting the target code file that does not meet the requirements to conform to the preset standard component styles. The method of the present disclosure can ensure that all CSS has a scope and will automatically perform style isolation, thereby fundamentally solving the problem of style confusion.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present disclosure relates to the technical field of web pages, and in particular, to a method and device for adjusting web pages. Background Art

[0002] In traditional web programming methods, conflicts between component styles often occur, and the page often has a disordered style, which increases the unnecessary workload of technicians during the project maintenance phase.

[0003] The information disclosed in the background art section of this application is only intended to deepen the understanding of the general background art of this application, and should not be regarded as an admission or any form of implication that this information constitutes the prior art known to those skilled in the art. Summary of the Invention

[0004] Embodiments of the present disclosure provide a method and device for adjusting web pages, which can solve at least some problems in the prior art.

[0005] In a first aspect of the embodiments of the present disclosure, a method for adjusting a web page is provided, including:

[0006] Based on a pre-installed and configured style adjustment tool, obtain the scanning information of the target code file;

[0007] According to the scanning information, determine whether the component style in the scanning information conforms to a preset standard component style,

[0008] If not, report an error, give a prompt file, and / or adjust the target code file that does not meet the requirements to conform to the preset standard component style.

[0009] In an optional implementation manner,

[0010] The method for determining whether the component style in the scanning information conforms to the preset standard component style includes:

[0011] Determine whether the component style in the scanning information conforms to the specification of the scope.

[0012] In an optional implementation manner,

[0013] The method further includes:

[0014] Obtain the style feature of the target code file, and based on a preset style isolation model, obtain the matching degree between the preset style isolation template in the style isolation model and the style feature,

[0015] If the matching degree exceeds a preset threshold, automatically perform style isolation for the target code file;

[0016] If the matching degree is lower than a preset threshold, store the style feature and search for and / or configure a quasi-style isolation template corresponding to the style feature.

[0017] In an alternative embodiment,

[0018] The method for adjusting a target code file that does not meet the requirements to conform to a preset standard component style includes:

[0019] Based on a pre-configured scope installation tool, install a scope for the target code file that does not meet the requirements, and implement the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

[0020] In an alternative embodiment,

[0021] The scope installation tool includes a Node.js tool.

[0022] In a second aspect of the embodiments of the present disclosure,

[0023] A web page adjustment device is provided, including:

[0024] A first unit, configured to obtain scan information of a target code file based on a pre-installed and configured style adjustment tool;

[0025] A second unit, configured to determine whether the component style in the scan information conforms to a preset standard component style according to the scan information,

[0026] A third unit, configured to, if not, report an error, give a prompt file, and / or

[0027] Adjust the target code file that does not meet the requirements to conform to a preset standard component style.

[0028] In an alternative embodiment,

[0029] The second unit is further configured to:

[0030] Determine whether the component style in the scan information conforms to the specification of a scope.

[0031] In an alternative embodiment,

[0032] The device further includes a fourth unit, and the fourth unit is configured to:

[0033] Obtain the style feature of the target code file, and based on a preset style isolation model, obtain the matching degree between a preset style isolation template in the style isolation model and the style feature,

[0034] If the matching degree exceeds a preset threshold, automatically perform style isolation for the target code file;

[0035] If the matching degree is lower than a preset threshold, store the style feature, and search for and / or configure a quasi-style isolation template corresponding to the style feature.

[0036] In an alternative embodiment,

[0037] The third unit is further configured to:

[0038] Install a scope for the target code file that does not meet the requirements based on a pre-configured scope installation tool, and implement the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

[0039] In an alternative embodiment,

[0040] The scope installation tool includes a Node.js tool.

[0041] The present disclosure provides a method for adjusting a web page, the method including

[0042] Obtain scan information of a target code file based on a pre-installed and configured style adjustment tool;

[0043] According to the scan information, determine whether the component style in the scan information conforms to a preset standard component style,

[0044] If not, report an error, provide a prompt file, and / or adjust the target code file that does not meet the requirements to conform to the preset standard component style.

[0045] The web page adjustment method of the present disclosure can ensure that all CSS has a scope, and will automatically perform style isolation, thereby fundamentally solving the problem of style disorder. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 is a flowchart of a method for adjusting a web page provided by an embodiment of the present disclosure;

[0047] Figure 2 is a schematic structural diagram of a device for adjusting a web page provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0048] To make the objectives, technical solutions, and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present disclosure. Apparently, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. Based on the embodiments of the present disclosure, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the scope of protection of the present disclosure.

[0049] The terms "first", "second", "third", "fourth", etc. (if any) in the description, claims and above-mentioned drawings of the present disclosure are used to distinguish similar objects, and do not necessarily have to be used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged under appropriate circumstances so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein.

[0050] It should be understood that in various embodiments of the present disclosure, the magnitude of the serial number of each process does not mean the sequence of execution, and the execution sequence of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present disclosure.

[0051] It should be understood that in the present disclosure, "including" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units does not have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0052] It should be understood that in the present disclosure, "a plurality of" means two or more. "And / or" is merely a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally indicates that the associated objects before and after are in an "or" relationship. "Including A, B, and C" and "including A, B, C" mean that all of A, B, and C are included. "Including A, B, or C" means including any one of A, B, and C. "Including A, B, and / or C" means including any one or any two or all three of A, B, and C.

[0053] It should be understood that in the present disclosure, "B corresponding to A", "B corresponding to A", "A corresponding to B"

[0054] "corresponding" or "B corresponding to A" means that B is associated with A, and B can be determined according to A. Determining B according to A does not mean determining B only according to A, and B can also be determined according to A and / or other information. The matching of A and B means that the similarity between A and B is greater than or equal to a preset threshold.

[0055] Depending on the context, as used herein, "if" can be interpreted as "when", "while", "in response to determining", or "in response to detecting".

[0056] The technical solution of the present disclosure will be described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0057] Figure 1 Exemplarily, a flowchart of the method for adjusting a web page according to an embodiment of the present disclosure is shown, as Figure 1 shown, the method includes:

[0058] Step S101: Obtain the scanning information of the target code file based on the pre-installed and configured style adjustment tool;

[0059] Exemplarily, after the style adjustment tool is configured, when a code file is received, the received code file can be scanned. The scanning method can be real-time scanning or scheduled scanning. Specifically, when the style adjustment tool receives a code file, the style adjustment tool scans the received code file in real time.

[0060] Alternatively, when the style adjustment tool receives a code file, the style adjustment tool scans the code file according to a preset duration or time point when the duration or time point of receiving the code file meets the preset duration or time point. When the style adjustment tool scans the code file, the scanned code file information is read.

[0061] Step S102: Determine whether the component style in the scanning information conforms to the preset standard component style,

[0062] In an alternative embodiment,

[0063] The method for determining whether the component style in the scanning information conforms to the preset standard component style includes:

[0064] Determine whether the component style in the scanning information conforms to the specification of the scope.

[0065] Exemplarily, scope belongs to a CSS pseudo-class, which represents an element that is the reference point to be matched as a selector.

[0066] It can be determined whether the component style in the scanning information conforms to the specification of the scope. By determining whether it conforms to the specification of the scope, it can be determined whether the web page will have a style disorder, so that problems can be found at the compilation stage, improving the work efficiency of the staff.

[0067] In an alternative embodiment,

[0068] The method further includes:

[0069] Obtain the style features of the target code file, and based on a preset style isolation model, obtain the matching degree between the preset style isolation template in the style isolation model and the style features.

[0070] If the matching degree exceeds a preset threshold, automatically perform style isolation on the target code file.

[0071] If the matching degree is lower than the preset threshold, store the style features, and search and / or configure a quasi-style isolation template corresponding to the style features.

[0072] Exemplarily, the style isolation model of the present disclosure can be constructed based on a neural network model, and is used to judge the matching degree between the style features of the input code file and the preset style isolation template.

[0073] If the matching degree exceeds a preset threshold, automatically perform style isolation on the target code file.

[0074] If the matching degree is lower than the preset threshold, store the style features, and search and / or configure a quasi-style isolation template corresponding to the style features.

[0075] When the matching degree is lower than the preset threshold, it indicates that there is no suitable style isolation template. Then, the style features can be stored, and a quasi-style isolation template corresponding to the style features can be searched and / or configured, so that when the style features are encountered next time, the style isolation template corresponding to the style features can be accurately matched.

[0076] Step S103, if not, then report an error, give a prompt file, and / or

[0077] Adjust the target code file that does not meet the requirements to conform to the preset standard component style.

[0078] In an alternative embodiment,

[0079] The method for adjusting the target code file that does not meet the requirements to conform to the preset standard component style includes:

[0080] Based on a pre-configured scope installation tool, install a scope for the target code file that does not meet the requirements, and implement the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

[0081] Exemplarily, a pre-configured scope installation tool can, when the target code file does not meet the requirements, that is, when there is no specified scope in the target code file, the current component style may conflict with other components, resulting in style errors on the page.

[0082] In an alternative embodiment,

[0083] The scope installation tool includes a nodejs tool.

[0084] In an alternative embodiment,

[0085] The scope installation tool includes a NodeJS management tool.

[0086] Exemplarily, the NodeJS management tool is a JavaScript runtime environment based on the Chrome V8 engine, using an event-driven, non-blocking I / O model, making it lightweight and efficient.

[0087] The present disclosure provides a method for adjusting a web page, the method including

[0088] Obtaining scan information of a target code file based on a pre-installed and configured style adjustment tool;

[0089] Judging whether the component style in the scan information conforms to a preset standard component style according to the scan information,

[0090] If not, then reporting an error, giving a prompt file, and / or

[0091] Adjusting the target code file that does not meet the requirements to conform to the preset standard component style.

[0092] Figure 2 Exemplarily showing a schematic structural diagram of a web page adjustment device according to an embodiment of the present disclosure, as Figure 2 shown, the device includes:

[0093] A first unit 21, configured to obtain scan information of a target code file based on a pre-installed and configured style adjustment tool;

[0094] A second unit 22, configured to judge whether the component style in the scan information conforms to a preset standard component style according to the scan information,

[0095] A third unit 23, configured to, if not, report an error, give a prompt file, and / or

[0096] Adjust the target code file that does not meet the requirements to conform to the preset standard component style.

[0097] In an alternative embodiment,

[0098] The second unit 22 is further configured to:

[0099] Determine whether the component style in the scanned information conforms to the specification of the scope.

[0100] In an alternative embodiment,

[0101] The device further includes a fourth unit, and the fourth unit is configured to:

[0102] Obtain the style features of the target code file, and based on a preset style isolation model, obtain the matching degree between the preset style isolation template in the style isolation model and the style features.

[0103] If the matching degree exceeds a preset threshold, automatically perform style isolation on the target code file;

[0104] If the matching degree is lower than the preset threshold, store the style features, and search for and / or configure a quasi-style isolation template corresponding to the style features.

[0105] In an alternative embodiment,

[0106] The third unit 23 is further configured to:

[0107] Based on a pre-configured scope installation tool, install a scope for the target code file that does not meet the requirements, and implement the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

[0108] In an alternative embodiment,

[0109] The scope installation tool includes a nodejs tool.

[0110] The present disclosure also provides a program product, which includes execution instructions stored in a readable storage medium. At least one processor of the device can read the execution instructions from the readable storage medium, and the at least one processor executes the execution instructions to enable the device to implement the methods provided by the above various embodiments.

[0111] Among them, the readable storage medium can be a computer storage medium or a communication medium. The communication medium includes any medium that facilitates the transmission of a computer program from one place to another. The computer storage medium can be any available medium accessible by a general-purpose or special-purpose computer. For example, the readable storage medium is coupled to the processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (ASIC). Additionally, the ASIC can be located in a user device. Of course, the processor and the readable storage medium can also exist as discrete components in a communication device. The readable storage medium can be a read-only memory (ROM), a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0112] In the above embodiments of the terminal or the server, it should be understood that the processor can be a central processing unit (CPU for short), and can also be other general-purpose processors, digital signal processors (DSP for short), application specific integrated circuits (ASIC for short), etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in conjunction with the present disclosure can be directly implemented by the execution of the hardware processor, or can be implemented by the combination of the hardware and software modules in the processor.

[0113] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present disclosure, rather than to limit them; although the present disclosure has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present disclosure.

Claims

1. A method for adjusting a web page, characterized in that, Including: Obtain the scanning information of the target code file based on a pre-installed and configured style adjustment tool; According to the scanning information, determine whether the component style in the scanning information conforms to the preset standard component style, If not, report an error, give a prompt file, and / or adjust the target code file that does not meet the requirements to conform to the preset standard component style; Obtain the style features of the target code file, and based on a preset style isolation model, obtain the matching degree between the preset style isolation template in the style isolation model and the style features, If the matching degree exceeds the preset threshold, automatically perform style isolation on the target code file; If the matching degree is lower than the preset threshold, store the style features, and search for and / or configure a quasi-style isolation template corresponding to the style features.

2. The method according to claim 1, characterized in that The method for determining whether the component style in the scanning information conforms to the preset standard component style includes: Determine whether the component style in the scanning information conforms to the specification of the scope.

3. The method according to claim 1, wherein The method for adjusting the target code file that does not meet the requirements to conform to the preset standard component style includes: Based on a pre-configured scope installation tool, install a scope for the target code file that does not meet the requirements, and implement the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

4. The method according to claim 3, wherein The scope installation tool includes a nodejs tool.

5. A web page adjustment device, characterized in that, Including: A first unit for obtaining the scanning information of the target code file based on a pre-installed and configured style adjustment tool; A second unit for determining whether the component style in the scanning information conforms to the preset standard component style according to the scanning information, A third unit for, if not, reporting an error, giving a prompt file, and / or Adjusting the target code file that does not meet the requirements to conform to the preset standard component style; The device further includes a fourth unit, and the fourth unit is used for: Obtaining the style features of the target code file, and based on a preset style isolation model, obtaining the matching degree between the preset style isolation template in the style isolation model and the style features, If the matching degree exceeds the preset threshold, automatically performing style isolation on the target code file; If the matching degree is lower than the preset threshold, storing the style features, and searching for and / or configuring a quasi-style isolation template corresponding to the style features.

6. The device according to claim 5, characterized in that, The second unit is further used for: Determining whether the component style in the scanning information conforms to the specification of the scope.

7. The device according to claim 5, characterized in that, The third unit is further used for: Based on a pre-configured scope installation tool, installing a scope for the target code file that does not meet the requirements, and implementing the Cascading Style Sheets (CSS) style specification for the target code file that does not meet the requirements.

8. The device according to claim 7, characterized in that, The scope installation tool includes a nodejs tool.

Citation Information

Patent Citations

  • Method for correcting web page codes

    CN107577465A