Page conversion method and device, computer equipment and storage medium
By combining lazy loading and parsing tools to generate HTML pages, the performance bottleneck problem of Markdown to HTML conversion tools is solved, fast rendering and interactive HTML page generation are achieved, and user experience and development efficiency are improved.
Patent Information
- Application Number
- CN202510596463.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-08
- Publication Date
- 2025-10-03
AI Technical Summary
Existing Markdown to HTML conversion tools have performance bottlenecks when processing large-scale documents, resulting in page loading delays and low development efficiency, which particularly affects user experience and business promotion in business document management scenarios in the financial field.
Use lazy loading to load Markdown files, and combine preset parsing tools, HTML page templates, target styles and scripts to use the template engine to generate HTML pages. Through the combination of lazy loading, parsing tools and target style scripts, it can automatically and accurately parse Markdown content and generate interactive HTML pages.
Improves document loading performance and development efficiency, ensures fast rendering and interactivity of Markdown content, and enhances user experience.
Smart Images

Figure CN120744259A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of data processing technology and can be applied to fields such as financial technology and digital medicine, and in particular to page conversion methods, devices, computer equipment and storage media. Background Art
[0002] In traditional front-end development and document management processes, Markdown files are widely used to write documentation such as component library instructions, parameter lists, and application scenarios due to their concise syntax and ease of reading and editing. However, as a plain text format, Markdown files cannot be directly displayed to end users and usually require the use of additional conversion tools to render them into HTML web pages for presentation in a browser. Although there are a variety of Markdown-to-HTML conversion tools on the market, existing technologies still have significant performance deficiencies, resulting in page loading delays, which affects user experience and development efficiency.
[0003] Specifically, existing conversion tools often struggle with large-scale Markdown documents due to complex parsing algorithms or inappropriate resource allocation, resulting in slow conversion speeds. For example, in documents with complex nested structures, conversion tools can require significant time for syntax parsing and DOM tree construction, leading to page freezes or load timeouts. Furthermore, some tools lack effective compatibility support for dynamic content, further exacerbating performance bottlenecks.
[0004] Such performance issues are particularly prominent in business document management scenarios within the financial sector. For example, when developing an insurance product documentation system, a financial institution used the Markdown format to create detailed product descriptions, terms and conditions, and insurance application process guides. However, due to the performance limitations of existing conversion tools, users frequently encountered slow loading times and incomplete content rendering when accessing document pages, severely impacting business promotion and customer service efficiency. Specifically, when a user inquired about the detailed terms and conditions of a complex insurance product, the document system might be unable to respond promptly due to the lengthy conversion process, leading to user churn and complaints.
[0005] Therefore, there is an urgent need to provide a high-performance Markdown to HTML conversion method to solve the performance bottleneck problem in the existing technology, improve the loading speed and rendering quality of front-end documents, thereby optimizing the user experience and meeting the business needs of related fields. Summary of the Invention
[0006] The purpose of the embodiments of the present application is to propose a page conversion method, apparatus, computer equipment and storage medium to solve the technical problems of page loading delay and low development efficiency in the existing Markdown to HTML conversion method.
[0007] In a first aspect, a page conversion method is provided, comprising:
[0008] Receiving a page view request triggered by a user; wherein the page view request carries an access path corresponding to a target document;
[0009] Extracting the access path from the page view request and obtaining a routing configuration corresponding to the access path;
[0010] Based on the routing configuration, the corresponding Markdown file is loaded in a lazy loading manner;
[0011] Parsing the Markdown file based on a preset parsing tool to obtain corresponding parsed content; wherein the parsed content includes at least a title, a paragraph, a table, and a code block;
[0012] Call the preset HTML page template and obtain the preset target style and target script;
[0013] Based on the target style and the target script, use a preset template engine to inject the parsed content into the HTML page template to generate a corresponding HTML page;
[0014] The HTML page is displayed.
[0015] In a second aspect, a page conversion device is provided, comprising:
[0016] A receiving module, configured to receive a page viewing request triggered by a user; wherein the page viewing request carries an access path corresponding to a target document;
[0017] A first acquisition module is used to extract the access path from the page viewing request and obtain a routing configuration corresponding to the access path;
[0018] The first loading module is used to load the corresponding Markdown file in a lazy loading manner based on the routing configuration;
[0019] A parsing module, configured to parse the Markdown file based on a preset parsing tool to obtain corresponding parsed content; wherein the parsed content includes at least titles, paragraphs, tables, and code blocks;
[0020] The second acquisition module is used to call the preset HTML page template and obtain the preset target style and target script;
[0021] A generation module, configured to inject the parsed content into the HTML page template using a preset template engine based on the target style and the target script, and generate a corresponding HTML page;
[0022] The first display module is used to display the HTML page.
[0023] In a third aspect, a computer device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned page conversion method when executing the computer program.
[0024] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned page conversion method are implemented.
[0025] In the solution implemented by the above-mentioned page conversion method, device, computer equipment and storage medium, a page viewing request triggered by a user is first received; wherein, the page viewing request carries an access path corresponding to the target document; then, the access path is extracted from the page viewing request, and a routing configuration corresponding to the access path is obtained; then, based on the routing configuration, the corresponding Markdown file is loaded in a lazy loading manner; subsequently, the Markdown file is parsed based on a preset parsing tool to obtain corresponding parsed content; wherein, the parsed content includes at least titles, paragraphs, tables and code blocks; further, a preset HTML page template is called, and a preset target style and target script are obtained; and based on the target style and the target script, a preset template engine is used to inject the parsed content into the HTML page template to generate a corresponding HTML page; finally, the HTML page is displayed. This application extracts the access path from the received user-triggered page viewing request, obtains the routing configuration corresponding to the access path, and then, based on the routing configuration, uses lazy loading to load the corresponding Markdown file. After that, the Markdown file is parsed based on the use of a parsing tool to obtain the corresponding parsed content. Then, based on the obtained target style and target script, a preset template engine is used to inject the parsed content into the HTML page template to generate the corresponding HTML page, and finally the HTML page is displayed. Through the above-mentioned conversion and generation process of HTML pages, this application can automatically and accurately parse Markdown content and generate interactive HTML pages by combining the lazy loading method, parsing tools, and the combined use of target styles and target scripts, effectively improving the document loading performance and development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0026] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the drawings described below are some embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0027] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;
[0028] Figure 2 is a flow chart of an embodiment of a page conversion method according to the present application;
[0029] Figure 3 is a structural diagram of an embodiment of a page conversion device according to the present application;
[0030] Figure 4 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION
[0031] Unless otherwise defined, all technical and scientific terms used herein have the same meanings as commonly understood by those skilled in the art to which this application belongs. The terms used in the specification of the application are for the purpose of describing specific embodiments only and are not intended to limit this application. The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of this application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.
[0032] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.
[0033] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.
[0034] like Figure 1As shown, system architecture 100 may include a terminal device 101, a network 102, and a server 103. Terminal device 101 may be a laptop computer 1011, a tablet computer 1012, or a mobile phone 1013. Network 102 is a medium for providing a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired or wireless communication links or fiber optic cables.
[0035] The user can use the terminal device 101 to interact with the server 103 via the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.
[0036] The terminal device 101 can be various electronic devices with a display screen and supporting web browsing. In addition to the laptop computer 1011, tablet computer 1012 or mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV) player, a laptop computer and a desktop computer, etc.
[0037] The server 103 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal device 101 .
[0038] It should be noted that the page conversion method provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the page conversion device is generally set in the server / terminal device.
[0039] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.
[0040] Continue to refer Figure 2 , shows a flow chart of an embodiment of the page conversion method according to the present application. According to different needs, the order of the steps in the flow chart can be changed, and some steps can be omitted. The page conversion method provided in the embodiment of the present application can be applied to any scenario that requires page conversion, and the page conversion method can be applied to products in these scenarios, for example, page conversion in the financial field or the medical field. The page conversion method includes the following steps:
[0041] Step S201: receiving a page viewing request triggered by a user; wherein the page viewing request carries an access path corresponding to a target document.
[0042] In this embodiment, the electronic device (eg, Figure 1 The server / terminal device shown in the figure) can obtain the access path corresponding to the target document through a wired connection or a wireless connection. It should be pointed out that the above-mentioned wireless connection method may include but is not limited to 3G / 4G / 5G connection, Wi-Fi connection, Bluetooth connection, Wi MAX connection, Zigbee connection, UWB (Ultra Wi-Fi Broadband) connection, and other wireless connection methods currently known or to be developed in the future. The execution subject of this application is a page processing system, which can be referred to as the system for short. The above-mentioned page viewing request is a request triggered by the user to view the HTML interface obtained after HTML conversion of the Markdown file related to the access path of the target document. Among them, all Markdown files corresponding to the above-mentioned target documents are associated with the front-end routing, and each Markdown file corresponds to a routing path (or access path). When a user accesses a specific page, only the corresponding content is loaded to avoid loading all documents at one time. The on-demand loading of content is achieved through routing lazy loading, which can reduce the initial loading time and improve the user experience.
[0043] This application can be applied to page conversion scenarios in the financial field or the medical field. For example, in the financial field, the above-mentioned target documents may include instructions for use of the insurance product details page, insurance claim application form parameter description, insurance plan comparison tool documents, etc. Specifically, the content of the above-mentioned instructions for use of the insurance product details page includes describing the layout structure of the insurance product details page (such as coverage, premium calculator, and claim process entry); explaining how dynamic data (such as premium amount) is obtained through the interface and rendered in real time; providing user interaction logic (such as the jump path after clicking "Insure Now"). The content of the above-mentioned insurance claim application form parameter description includes: listing form fields (such as accident time, medical expense list) and their verification rules (such as date format, file size limit); explaining the compatibility requirements of the file upload component (such as support for PDF / image format); and providing error prompt text examples (such as "The uploaded file format is incorrect, please reselect"). The contents of the above-mentioned insurance plan comparison tool document include: describing the screening conditions of the comparison tool (such as protection type, coverage range) and display methods (such as tables / charts); explaining the data source (such as insurance product database) and update frequency; and providing user operation instructions (such as "Click the 'Add Plan' button to compare different products").
[0044] In the medical field, the target documents mentioned above may include instructions for use of hospital appointment registration systems, electronic medical record system parameter descriptions, medical knowledge graph query tool documents, etc. Specifically, the contents of the instructions for use of the hospital appointment registration system include: describing the layout of the registration page (such as department selection, doctor schedule); explaining the appointment process (such as selecting time, payment method) and exception handling (such as prompts for full availability); providing user interaction logic (such as "click the 'appointment' button to jump to the payment page"). The contents of the electronic medical record system parameter description include: listing the medical record form fields (such as chief complaint, current medical history, past medical history) and their verification rules (such as required items, word limit); explaining the storage and encryption methods of medical record data (such as compliance with HIPAA standards); and providing examples of error prompts (such as "the chief complaint content cannot be empty"). The contents of the medical knowledge graph query tool document include: describing the query tool's search conditions (such as disease names, symptom keywords) and display methods (such as knowledge cards, relationship maps); explaining the data source (such as medical literature, clinical guidelines) and update frequency; and providing user operation instructions (such as "enter 'diabetes' to view related complications and treatment plans").
[0045] Step S202: extract the access path from the page viewing request, and obtain a routing configuration corresponding to the access path.
[0046] In this embodiment, the system can detect the above page viewing request through the front-end routing to extract the access path corresponding to the user access and then match it to the corresponding routing configuration.
[0047] Step S203: Based on the routing configuration, the corresponding Markdown file is loaded in a lazy loading manner.
[0048] In this embodiment, since the matched route configuration enables lazy loading, the browser will not immediately load the document content of the entire target document, but will load the basic resources associated with the route (such as the main page framework, basic style), and then asynchronously request the Markdown file corresponding to the above access path (such as component-x.md).
[0049] Step S204: Parse the Markdown file based on a preset parsing tool to obtain corresponding parsed content; wherein the parsed content at least includes titles, paragraphs, tables, and code blocks.
[0050] In this embodiment, the above-mentioned parsing tool can specifically adopt the markdown-it tool. This parsing tool supports all common syntax, including titles, paragraphs, tables, code blocks, etc. At the same time, the Markdown-it plug-in is extended to support custom syntax, for example: dynamically generate title anchors to facilitate quick document navigation. Add enhanced styles (such as custom style classes) to tables. Support parsing of specific syntax blocks (such as tip blocks and warning blocks).
[0051] Specifically, the Markdown file is parsed by using parsing tools, including: Basic conversion: converting Markdown syntax (titles, paragraphs, lists, etc.) into HTML structure. Custom tag processing: converting :::tip into<divclass="tip"> , ::: warning is converted to<divclass="war ning"> Anchor generation: Generate a unique ID for each title (such as #component-x-usage) for quick navigation. Code block rendering: Extract code block content.
[0052] Step S205: calling a preset HTML page template, and obtaining a preset target style and target script.
[0053] In this embodiment, the above-mentioned HTML page template is a page template pre-designed according to actual needs, and a space is reserved for inserting dynamically generated document content. For example, a placeholder {{{content}}} is defined in the page template to insert the parsed HTML content. In addition, the above-mentioned target style refers to the necessary CSS styles corresponding to ensuring the correct rendering of the page, such as the global style sheet and the component style sheet. The above-mentioned target script refers to the necessary JavaScript script corresponding to ensuring the normal operation of the interactive function of the page, such as the script related to the Vue.js framework and document parsing.
[0054] Step S206: Based on the target style and the target script, a preset template engine is used to inject the parsed content into the HTML page template to generate a corresponding HTML page.
[0055] In this embodiment, a suitable template engine may be selected to render the parsed content into the above-mentioned HTML page template, and the above-mentioned target style and target script may be injected into the generated initial HTML page to thereby generate a corresponding HTML page.
[0056] Step S207: display the HTML page.
[0057] In this embodiment, responsive design principles can be adopted to ensure that the generated HTML page can be well displayed on different devices and screen sizes. For example, media queries and elastic layouts are used to implement responsive design. The responsiveness of the page is then tested on different devices and browsers, and optimization is performed based on the test results. For example, the font size, spacing, and layout are adjusted to ensure that the page can be well displayed on various devices. Then, the generated HTML page is loaded into the current interface to complete the display processing of the HTML page.
[0058] This application first receives a page viewing request triggered by a user; wherein, the page viewing request carries an access path corresponding to the target document; then, the access path is extracted from the page viewing request, and the routing configuration corresponding to the access path is obtained; then, based on the routing configuration, the corresponding Markdown file is loaded in a lazy loading manner; subsequently, the Markdown file is parsed based on a preset parsing tool to obtain corresponding parsed content; wherein, the parsed content includes at least titles, paragraphs, tables, and code blocks; further, a preset HTML page template is called, and a preset target style and target script are obtained; and based on the target style and the target script, the parsed content is injected into the HTML page template using a preset template engine to generate a corresponding HTML page; finally, the HTML page is displayed. This application extracts the access path from the page viewing request triggered by the user, obtains the routing configuration corresponding to the access path, and then loads the corresponding Markdown file in a lazy loading manner based on the routing configuration. After that, the Markdown file is parsed based on the use of the parsing tool to obtain the corresponding parsed content. Then, based on the obtained target style and target script, the preset template engine is used to inject the parsed content into the HTML page template to generate the corresponding HTML page, and finally the HTML page is displayed. Through the above-mentioned conversion and generation process of HTML pages, this application can automatically and accurately parse Markdown content and generate interactive HTML pages by combining the lazy loading method, parsing tools, and the combined use of target styles and target scripts, effectively improving the document loading performance and development efficiency.
[0059] In some optional implementations, after step S204, the electronic device may further perform the following steps:
[0060] Get the preset configuration file.
[0061] In this embodiment, the configuration file is a pre-built configuration file that allows developers to customize Markdown conversion rules and styles by modifying the configuration file. For example, you can customize the code highlighting style. Dynamically add or modify specific information in the document (such as the API parameter list). Among them, the above configuration file is dynamically loaded when the project starts.
[0062] Determine whether the configuration file contains custom Markdown conversion rules.
[0063] In this embodiment, a content query can be performed on the loaded configuration file to detect whether there are Markdown conversion rules customized by the developer in the configuration file. If it is detected that there is content in the configuration file, it is determined that the customized Markdown conversion rules exist in the configuration file. If it is detected that the content in the configuration file is empty, it is determined that there are no customized Markdown conversion rules in the configuration file.
[0064] If so, load the Markdown conversion rule.
[0065] In this embodiment, the corresponding Markdown conversion rule can be obtained by extracting the content in the above configuration file, and the Markdown conversion rule is loaded.
[0066] Based on the Markdown conversion rule, corresponding adjustment processing is performed on the parsed content to obtain adjusted parsed content.
[0067] In this embodiment, the logic of Markdown parsing and rendering can be adjusted according to the loaded Markdown conversion rules to achieve corresponding adjustments to the above-mentioned parsed content and obtain corresponding adjusted parsed content.
[0068] Wherein, step S206 includes the following steps:
[0069] Based on the target style and the target script, a preset template engine is used to inject the adjusted parsed content into the page template to generate a corresponding HTML page.
[0070] In this embodiment, by injecting the adjusted parsed content into the page template, an HTML page matching the customized page conversion requirement can be generated, thereby improving the intelligence and adaptability of the generated HTML page.
[0071] This application obtains a preset configuration file; then determines whether the configuration file contains a custom Markdown conversion rule; if so, loads the Markdown conversion rule; subsequently, based on the Markdown conversion rule, the parsed content is adjusted accordingly to obtain the adjusted parsed content; and then, based on the target style and target script, the preset template engine is used to inject the adjusted parsed content into the page template to generate the corresponding HTML page. This application obtains a preset configuration file, and when it is detected that the configuration file contains a custom Markdown conversion rule, the parsed content is adjusted accordingly based on the use of the loaded Markdown conversion rule to obtain the adjusted parsed content, thereby completing the intelligent adjustment of the parsed content and improving the accuracy and adaptability of the generated parsed content. Moreover, based on the target style and target script, the template engine is used to inject the adjusted parsed content into the page template, thereby effectively improving the accuracy and adaptability of the generated HTML page, thereby improving the user experience.
[0072] In some optional implementations of this embodiment, after step S207, the electronic device may further perform the following steps:
[0073] Determine whether a page loading request for the target document triggered by a specified user is detected; wherein the page loading request carries display content information.
[0074] In this embodiment, the page loading request is a request triggered by a designated user according to a demand for viewing a target HTML page of a target document. The displayed content information refers to information corresponding to the relevant content of the target document that the designated user needs to view.
[0075] If so, call a preset processing tool and obtain the subcontracting strategy of the processing tool.
[0076] In this embodiment, the processing tool may specifically be a Webpack tool. The subpackaging strategy refers to the subpackaging mechanism of the Webpack tool, which separates the document content from the functional script by using a code splitting function.
[0077] Based on the subpackaging strategy, the target document is divided into functional scripts and document contents to obtain corresponding packaged documents.
[0078] In this embodiment, according to the processing method corresponding to the above-mentioned subpackaging strategy, the document content of the target document can be packaged into an independent chunk, and the commonly used functional scripts (such as Vue framework code, component library code, etc.) can be packaged into another chunk, thereby obtaining the divided packaged document.
[0079] The display content information is extracted from the page loading request, and target document content corresponding to the display content information is determined from the document content.
[0080] In this embodiment, the page loading request may be subjected to content parsing to extract corresponding display content information, and then the target document content matching the display content information may be extracted from the document content.
[0081] When the target HTML page corresponding to the target document is loaded, the function script is loaded first, and then the target document content is loaded.
[0082] In this embodiment, the target HTML page is a page generated by converting the target document into an HTML page. When the target HTML page is loaded, the commonly used function scripts are loaded first, and then the target document content corresponding to the above-mentioned display content information is loaded on demand, thereby effectively improving page loading performance.
[0083] The present application determines whether a page loading request for the target document triggered by a specified user is detected; wherein the page loading request carries display content information; if so, a preset processing tool is called, and the subcontracting strategy of the processing tool is obtained; then, based on the subcontracting strategy, the target document is divided into function script and document content to obtain a corresponding packaged document; thereafter, the display content information is extracted from the page loading request, and the target document content corresponding to the display content information is determined from the document content; subsequently, when the target HTML page corresponding to the target document is loaded, the function script is loaded first, and then the target document content is loaded. When detecting a page loading request for a target document triggered by a specified user, the present application will intelligently divide the target document into functional scripts and document contents based on the use of the subpackaging strategy of the called processing tool to obtain a packaged document, then extract the display content information from the page loading request, and determine the target document content corresponding to the display content information from the document content. Then, when the target HTML page corresponding to the target document is loaded, the functional script will be automatically and intelligently loaded first, and then the target document content will be loaded. This can achieve on-demand loading of the document content of the target document, which is beneficial to improving the page loading performance of the target HTML page and improving the user experience.
[0084] In some optional implementations, after the step of dividing the target document into a functional script and document content based on the subpackaging strategy to obtain a corresponding packaged document, the electronic device may further perform the following steps:
[0085] Get the preset removal policy.
[0086] In this embodiment, the removal strategy includes: utilizing the TreeShaking function of the Webpack tool to remove the code to reduce the package size.
[0087] The cold codes in the packaged document are removed based on the removal strategy to obtain a corresponding target packaged document.
[0088] In this embodiment, the cold code refers to the unused code in the packaged document. According to the policy content of the removal policy, the cold code in the packaged document can be removed to obtain the target packaged document with reduced package size.
[0089] Get the preset cache strategy.
[0090] In this embodiment, the cache policy may include using memory cache, or using a redis database for caching, or using a file hash value as part of the file name to ensure that the browser can correctly load the new version when the file is updated, etc.
[0091] The target packaged document is cached based on the cache policy.
[0092] In this embodiment, the packaged documents may be cached according to the obtained cache policy content, thereby achieving intelligent caching of commonly used resources to reduce repeated loading and thereby improve page loading speed.
[0093] The present application obtains a preset removal strategy; then removes cold codes from the packaged document based on the removal strategy to obtain a corresponding target packaged document; then obtains a preset cache strategy; and subsequently caches the target packaged document based on the cache strategy. The present application removes cold codes from the packaged document based on the removal strategy to obtain a corresponding target packaged document, which can effectively reduce the package size of the target packaged document, thereby reducing the required storage space for the target packaged document. In addition, the target packaged document is automatically cached based on the cache strategy, thereby realizing intelligent caching of commonly used packaged documents to reduce repeated loading, thereby effectively improving page loading speed.
[0094] In some optional implementations, after step S207, the electronic device may further perform the following steps:
[0095] Determine whether a change in the Markdown file is detected.
[0096] In this embodiment, a file listener may be pre-set, and the changes of the Markdown file may be monitored through the file listener. When a change of the Markdown file is detected, a corresponding reconstruction process is triggered.
[0097] If so, obtain the change information corresponding to the Markdown file.
[0098] In this embodiment, when a change in a Markdown file is detected, change information related to the change in the Markdown file can be synchronously recorded.
[0099] Call the preset hot update strategy.
[0100] In this embodiment, the hot update strategy includes enabling the hot update function of the Webpack tool, automatically recompiling (automatically re-parsing and re-building documents) and updating pages when the Markdown file changes, eliminating the need to manually refresh the browser to improve development efficiency.
[0101] By integrating Markdown file presentation into a Vue.js project, the generated HTML page can be seamlessly integrated with the component library's development environment. The Webpack build tool can also be used to automate document conversion and hot updates, improving development efficiency.
[0102] The HTML page is updated accordingly based on the hot update strategy to obtain a designated HTML page.
[0103] In this embodiment, the above-mentioned HTML page may be updated according to the policy content of the above-mentioned hot update policy, thereby obtaining an updated designated HTML page.
[0104] The specified HTML page is displayed.
[0105] In this embodiment, the generated designated HTML page may be loaded into the current interface to complete the display processing of the designated HTML page.
[0106] The present application determines whether a change is detected in the Markdown file; if so, obtains the change information corresponding to the Markdown file; then calls a preset hot update strategy; then performs corresponding update processing on the HTML page based on the hot update strategy to obtain a specified HTML page; and subsequently displays the specified HTML page. When the present application detects a change in the Markdown file, it automatically obtains the change information corresponding to the Markdown file, and then performs corresponding update processing on the HTML page based on the use of the hot update strategy to obtain a specified HTML page, and displays the specified HTML page, thereby automatically and accurately completing the automatic recompilation and update of the Markdown file, eliminating the need to manually refresh the browser, and effectively improving the development efficiency of page processing.
[0107] In some optional implementations of this embodiment, after step S207, the electronic device may further perform the following steps:
[0108] The code block is extracted from the parsed content.
[0109] In this embodiment, the parsed content includes at least a title, a paragraph, a table, and a code block. The code block can be extracted from the parsed content to obtain the corresponding code block. For example, the code block can be a Vue component code.
[0110] Get the preset component template.
[0111] In this embodiment, the above component template can adopt an interactive Vue component template. Specifically, a Vue renderable component template can be constructed based on the extracted code content. For HTML content, it is directly embedded into the template part of the component; for CSS content, it is converted into <style>标签并添加到组件中;对于JavaScript内容,根据需求将其转换为组件的脚本部分或使用外部脚本文件的方式引入。
[0112] 将所述代码块嵌入至所述组件模板内,并基于预设的运行策略对所述代码块执行运行处理得到对应的代码运行结果。
[0113] 在本实施例中,上述运行策略具体可采用Vue的运行机制。在将上述代码块内容嵌入至组件模板内后,通过Vue的运行机制,代码块可以实时运行并展示相应的代码运行结果(如显示组件的渲染效果)。
[0114] 在所述HTML页面中展示所述代码运行结果。
[0115] 在本实施例中,可通过在上述HTML页面中展示生成的上述代码运行结果,使得用户可以直接在HTML页面上查看代码的运行效果。其中,在HTML页面中支持动态交互功能,如代码运行示例、参数动态调整等。
[0116] 本申请通过从所述解析内容中提取出所述代码块;然后获取预设的组件模板;之后将所述代码块嵌入至所述组件模板内,并基于预设的运行策略对所述代码块执行运行处理得到对应的代码运行结果;后续在所述HTML页面中展示所述代码运行结果。本申请通过从解析内容中提取出代码块,然后将代码块内容嵌入至组件模板内,并基于预设的运行策略的使用对代码块执行运行处理得到对应的代码运行结果,进而在HTML页面中展示代码运行结果,从而自动智能地实现了代码的即时运行和结果展示,提高了HTML页面展示的动态性,提高了用户的使用体验。
[0117] 在本实施例的一些可选的实现方式中,在步骤S201之前,上述电子设备还可以执行以下步骤:
[0118] 获取预设的标准Mar kdown格式。
[0119] 在本实施例中,上述标准Mar kdown格式可通过现有技术进行获取。
[0120] 基于所述标准Mar kdown格式对所述目标文档进行拆分处理,得到对应的独立文件。
[0121] 在本实施例中,可通过将上述目标文档的内容按照上述标准Mar kdown格式进行组织处理,并将处理后的文档拆分为独立文件。其中,目标文档中包含的每个组件或主题对应一个Mar kdown文件,便于后续通过路由动态加载对应内容。另外,独立文件的基础结构用于为后续解析提供标准化输入,包括标题、段落、表格等。
[0122] 获取预设的自定义标注。
[0123] 在本实施例中,对于上述自定义标注的内容不做具体限定,可根据实际的业务需求进行设置。具体的,自定义标记可包括:为文档添加提示(如:::tip)或警告(如:::war ning),这些标记在后续步骤中会被解析为特定样式的HTML元素。
[0124] 基于所述自定义标注对所述独立文件进行标注处理。
[0125] 在本实施例中,可根据获取的自定义标注对上述独立文件添加相应的提示,以完成对于独立文件的标注处理。
[0126] 本申请通过获取预设的标准Mar kdown格式;然后基于所述标准Mar kdown格式对所述目标文档进行拆分处理,得到对应的独立文件;之后获取预设的自定义标注;后续基于所述自定义标注对所述独立文件进行标注处理。本申请通过基于标准Mar kdown格式的使用对目标文档进行拆分处理得到对应的独立文件,进而基于自定义标注的使用对独立文件进行标注处理,从而可以自动准确地完成对于目标文档的文档内容的规则与结构化处理,有利于为后续的Mar kdown文件的解析处理提供标准化输入,进而提高Mar kdown文件的解析处理的处理准确性与规范性。
[0127] 在一些可选的实现方式中,获取的用户信息征求了用户同意,且符合相关法律和相关政策的规定。
[0128] 另外,本申请实施例中出现的非本公司软件工具或组件,仅仅是举例介绍,不代表实际使用。
[0129] 应理解,上述实施例中各步骤的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本发明实施例的实施过程构成任何限定。
[0130] 需要强调的是,为进一步保证上述HTML页面的私密和安全性,上述HTML页面还可以存储于一区块链的节点中。
[0131] 本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchai n),本质上是一个去中心化的数据库,是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一批次网络交易的信息,用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
[0132] 本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中,人工智能(ArtificialIntelligence,AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能,感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。
[0133] 人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作 / 交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习 / 深度学习等几大方向。
[0134] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机可读指令来指令相关的硬件来完成,该计算机可读指令可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-On l y Memory,ROM)等非易失性存储介质,或随机存储记忆体(Random Access Memory,RAM)等。
[0135] 应该理解的是,虽然附图的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
[0136] 进一步参考图3,作为对上述图2所示方法的实现,本申请提供了一种页面转换装置的一个实施例,该装置实施例与图2所示的方法实施例相对应,该装置具体可以应用于各种电子设备中。
[0137] 如图3所示,本实施例所述的页面转换装置300包括:接收模块301、第一获取模块302、第一加载模块303、解析模块304、第二获取模块305、生成模块306以及第一展示模块307。其中:
[0138] 接收模块301,用于接收用户触发的页面查看请求;其中,所述页面查看请求携带与目标文档对应的访问路径;
[0139] 第一获取模块302,用于从所述页面查看请求中提取出所述访问路径,并获取与所述访问路径对应的路由配置;
[0140] 第一加载模块303,用于基于所述路由配置,采用懒加载的方式加载对应的Markdown文件;
[0141] 解析模块304,用于基于预设的解析工具对所述Mar kdown文件进行解析,得到对应的解析内容;其中,所述解析内容至少包括标题、段落、表格以及代码块;
[0142] 第二获取模块305,用于调用预设的HTML页面模板,以及获取预设的目标样式和目标脚本;
[0143] 生成模块306,用于基于所述目标样式与所述目标脚本,使用预设的模板引擎将所述解析内容注入到所述HTML页面模板中,生成对应的HTML页面;
[0144] 第一展示模块307,用于对所述HTML页面进行展示处理。
[0145] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0146] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0147] 第三获取模块,用于获取预设的配置文件;
[0148] 第一判断模块,用于判断所述配置文件是否存在自定义的Mar kdown转换规则;
[0149] 第二加载模块,用于若是,加载所述Mar kdown转换规则;
[0150] 调整模块,用于基于所述Mar kdown转换规则对所述解析内容进行对应的调整处理,得到调整后的解析内容;
[0151] 其中,所述生成模块306包括:
[0152] 生成子模块,用于基于所述目标样式与所述目标脚本,使用预设的模板引擎将所述调整后的解析内容注入到所述页面模板中,生成对应的HTML页面。
[0153] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0154] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0155] 第二判断模块,用于判断是否检测到指定用户触发的对于所述目标文档的页面加载请求;其中,所述页面加载请求携带展示内容信息;
[0156] 第一调用模块,用于若是,调用预设的处理工具,并获取所述处理工具的分包策略;
[0157] 划分模块,用于基于所述分包策略,将所述目标文档对应划分为功能脚本与文档内容,得到对应的打包文档;
[0158] 确定模块,用于从所述页面加载请求中提取所述展示内容信息,并从所述文档内容中确定出与所述展示内容信息对应的目标文档内容;
[0159] 第三加载模块,用于在与所述目标文档对应的目标HTML页面加载时,先加载所述功能脚本,再加载所述目标文档内容。
[0160] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0161] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0162] 第四获取模块,用于获取预设的移除策略;
[0163] 移除模块,用于基于所述移除策略移除所述打包文档中的冷代码,得到对应的目标打包文档;
[0164] 第五获取模块,用于获取预设的缓存策略;
[0165] 缓存模块,用于基于所述缓存策略对所述目标打包文档进行缓存处理。
[0166] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0167] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0168] 第三判断模块,用于判断是否检测到所述Markdown文件发生变化;
[0169] 第六获取模块,用于若是,获取与所述Markdown文件对应的变化信息;
[0170] 第二调用模块,用于调用预设的热更新策略;
[0171] 更新模块,用于基于所述热更新策略对所述HTML页面进行对应的更新处理,得到指定HTML页面;
[0172] 第二展示模块,用于对所述指定HTML页面进行展示处理。
[0173] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0174] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0175] 提取模块,用于从所述解析内容中提取出所述代码块;
[0176] 第七获取模块,用于获取预设的组件模板;
[0177] 运行模块,用于将所述代码块嵌入至所述组件模板内,并基于预设的运行策略对所述代码块执行运行处理得到对应的代码运行结果;
[0178] 第三展示模块,用于在所述HTML页面中展示所述代码运行结果。
[0179] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0180] 在本实施例的一些可选的实现方式中,页面转换装置还包括:
[0181] 第八获取模块,用于获取预设的标准Markdown格式;
[0182] 拆分模块,用于基于所述标准Markdown格式对所述目标文档进行拆分处理,得到对应的独立文件;
[0183] 第九获取模块,用于获取预设的自定义标注;
[0184] 标注模块,用于基于所述自定义标注对所述独立文件进行标注处理。
[0185] 在本实施例中,上述模块或单元分别用于执行的操作与前述实施方式的页面转换方法的步骤一一对应,在此不再赘述。
[0186] 为解决上述技术问题,本申请实施例还提供计算机设备。具体请参阅图4,图4为本实施例计算机设备基本结构框图。
[0187] 所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是,图中仅示出了具有组件41-43的计算机设备4,但是应理解的是,并不要求实施所有示出的组件,可以替代的实施更多或者更少的组件。其中,本技术领域技术人员可以理解,这里的计算机设备是一种能够按照事先设定或存储的指令,自动进行数值计算和 / 或信息处理的设备,其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecificIntegrated Circuit,ASIC)、可编程门阵列(Field-Programmable Gate Array,FPGA)、数字处理器(Digital Signal Processor,DSP)、嵌入式设备等。
[0188] 所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
[0189] 所述存储器41至少包括一种类型的可读存储介质,所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如,SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中,所述存储器41可以是所述计算机设备4的内部存储单元,例如该计算机设备4的硬盘或内存。在另一些实施例中,所述存储器41也可以是所述计算机设备4的外部存储设备,例如该计算机设备4上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(Secu re Digital,SD)卡,闪存卡(FlashCard)等。当然,所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中,所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件,例如页面转换方法的计算机可读指令等。此外,所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
[0190] 所述处理器42在一些实施例中可以是中央处理器(Cent ral Processing Unit,CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中,所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据,例如运行所述页面转换方法的计算机可读指令。
[0191] 所述网络接口43可包括无线网络接口或有线网络接口,该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
[0192] 本申请还提供了另一种实施方式,即提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机可读指令,所述计算机可读指令可被至少一个处理器执行,以使所述至少一个处理器执行如上述的页面转换方法的步骤。
[0193] 与现有技术相比,本申请实施例主要有以下有益效果:
[0194] 本申请实施例中,首先接收用户触发的页面查看请求;其中,所述页面查看请求携带与目标文档对应的访问路径;然后从所述页面查看请求中提取出所述访问路径,并获取与所述访问路径对应的路由配置;之后基于所述路由配置,采用懒加载的方式加载对应的Mar kdown文件;后续基于预设的解析工具对所述Mar kdown文件进行解析,得到对应的解析内容;其中,所述解析内容至少包括标题、段落、表格以及代码块;进一步调用预设的HTML页面模板,以及获取预设的目标样式和目标脚本;并基于所述目标样式与所述目标脚本,使用预设的模板引擎将所述解析内容注入到所述HTML页面模板中,生成对应的HTML页面;最后对所述HTML页面进行展示处理。本申请通过从接收的用户触发的页面查看请求中提取出访问路径,并获取与访问路径对应的路由配置,然后基于路由配置,采用懒加载的方式加载对应的Mar kdown文件,之后基于解析工具的使用对Mar kdown文件进行解析得到对应的解析内容,进而基于获取的目标样式与目标脚本,使用预设的模板引擎将解析内容注入到HTML页面模板中生成对应的HTML页面,最后对HTML页面进行展示处理。通过上述HTML页面的转换生成流程,本申请通过结合懒加载的方式、解析工具以及目标样式和目标脚本的结合使用,可以实现自动准确地解析Mar kdown内容并生成交互式的HTML页面,有效地提高了文档的加载性能和开发效率。
[0195] 通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM / RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本申请各个实施例所述的方法。
[0196] 显然,以上所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例,附图中给出了本申请的较佳实施例,但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现,相反地,提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明,对于本领域的技术人员来而言,其依然可以对前述各具体实施方式所记载的技术方案进行修改,或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构,直接或间接运用在其他相关的技术领域,均同理在本申请专利保护范围之内。< / style>
Claims
1. A page conversion method, characterized in that: The steps include: Receiving a page view request triggered by a user; wherein the page view request carries an access path corresponding to a target document; Extracting the access path from the page view request and obtaining a routing configuration corresponding to the access path; Based on the routing configuration, the corresponding Markdown file is loaded in a lazy loading manner; Parsing the Markdown file based on a preset parsing tool to obtain corresponding parsed content; wherein the parsed content includes at least a title, a paragraph, a table, and a code block; Call the preset HTML page template and obtain the preset target style and target script; Based on the target style and the target script, use a preset template engine to inject the parsed content into the HTML page template to generate a corresponding HTML page; The HTML page is displayed.
2. The page conversion method according to claim 1, characterized in that: After the step of parsing the Markdown file based on the preset parsing tool to obtain the corresponding parsed content, the method further includes: Get the preset configuration file; Determine whether the configuration file contains a custom Markdown conversion rule; If so, load the Markdown conversion rule; Performing corresponding adjustment processing on the parsed content based on the Markdown conversion rule to obtain adjusted parsed content; Wherein, based on the target style and the target script, the parsed content is injected into the page template using a preset template engine to generate a corresponding HTML page, including: Based on the target style and the target script, a preset template engine is used to inject the adjusted parsed content into the page template to generate a corresponding HTML page.
3. The page conversion method according to claim 1, wherein: After the step of displaying the HTML page, the method further includes: Determining whether a page loading request for the target document triggered by a specified user is detected; wherein the page loading request carries display content information; If so, calling a preset processing tool and obtaining the subcontracting strategy of the processing tool; Based on the subpackaging strategy, the target document is divided into functional scripts and document contents to obtain corresponding packaged documents; Extracting the display content information from the page load request, and determining target document content corresponding to the display content information from the document content; When the target HTML page corresponding to the target document is loaded, the function script is loaded first, and then the target document content is loaded.
4. The page conversion method according to claim 3, characterized in that: After the step of dividing the target document into functional scripts and document contents based on the subpackaging strategy to obtain corresponding packaged documents, the method further includes: Get the preset removal strategy; Remove the cold codes in the packaged document based on the removal strategy to obtain a corresponding target packaged document; Get the preset cache strategy; The target packaged document is cached based on the cache policy.
5. The page conversion method according to claim 1, wherein: After the step of displaying the HTML page, the method further includes: Determining whether a change in the Markdown file is detected; If so, obtain the change information corresponding to the Markdown file; Call the preset hot update strategy; Perform corresponding update processing on the HTML page based on the hot update strategy to obtain a specified HTML page; The specified HTML page is displayed.
6. The page conversion method according to claim 1, characterized in that: After the step of displaying the HTML page, the method further includes: Extracting the code block from the parsed content; Get the preset component template; Embed the code block into the component template, and execute operation processing on the code block based on a preset operation strategy to obtain a corresponding code operation result; The code execution result is displayed in the HTML page.
7. The page conversion method according to claim 1, characterized in that: Before the step of receiving a page view request triggered by a user, the method further includes: Get the preset standard Markdown format; Splitting the target document based on the standard Markdown format to obtain corresponding independent files; Get the preset custom annotation; The independent file is annotated based on the custom annotation.
8. A page conversion device, characterized in that: include: A receiving module, configured to receive a page viewing request triggered by a user; wherein the page viewing request carries an access path corresponding to a target document; A first acquisition module is used to extract the access path from the page viewing request and obtain a routing configuration corresponding to the access path; The first loading module is used to load the corresponding Markdown file in a lazy loading manner based on the routing configuration; A parsing module, configured to parse the Markdown file based on a preset parsing tool to obtain corresponding parsed content; wherein the parsed content includes at least titles, paragraphs, tables, and code blocks; The second acquisition module is used to call the preset HTML page template and obtain the preset target style and target script; A generation module, configured to inject the parsed content into the HTML page template using a preset template engine based on the target style and the target script, and generate a corresponding HTML page; The first display module is used to display the HTML page.
9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the page conversion method according to any one of claims 1 to 7 when executing the computer-readable instructions.
10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the page conversion method according to any one of claims 1 to 7.