A method and apparatus for displaying files under a directory on a page

Abstract

The application aims to provide a method and device for page display of files under a directory. The application obtains an entry folder of a module to which a Markdown file belongs by reading a configuration file. All Markdown files under the directory of the module are scanned based on the entry folder to obtain file address data and metadata of each Markdown. An initialization template file of a page site is constructed according to the file address data and the metadata of each Markdown. An engine of a front-end project of the page site is configured, and the content of the Markdown file is filled into the initialization template file to obtain a page template file. The content in the page template file is displayed on a corresponding page based on a specified command. When files under a directory are displayed on a page, the engine of the front-end project is directly relied on, and no third-party plug-in is relied on, so that the configuration flexibility is high.

Description

Technical Field

[0001] This application relates to the field of computers, and more particularly to a method and apparatus for displaying files in a directory on a page. Background Technology

[0002] Front-end projects typically contain documentation files, usually Markdown files, often distributed across different directories. These documents are not executable, and their scattered locations prevent a clear visual representation of the interface. Currently, the `dumi` method is used for UI display. By configuring `dumi` options and executing the `start` or `build` command, the site can be launched to display the Markdown files in the specified directories. However, this approach has the following drawbacks: `dumi` itself cannot launch the site; it only provides Markdown parsing functionality. Launching the project requires a separate library. `umi` is deeply integrated with `dumi`, and the `umi` library is large, adding extra dependencies for projects that don't want to use `umi`, leading to instability during version upgrades. Furthermore, `dumi` has a fixed syntax for parsing Markdown resource files, requiring the parsing of dependencies from specific paths, resulting in limited flexibility. Summary of the Invention

[0003] One objective of this application is to provide a method and device for displaying files in a directory on a page, thereby solving the problem that the prior art requires adding additional dependencies when displaying files in a directory on a page, resulting in low stability and low flexibility during version upgrades.

[0004] According to one aspect of this application, a method for displaying files in a directory on a webpage is provided, the method comprising:

[0005] Read the configuration file to obtain the entry folder of the module to which the Markdown file belongs;

[0006] Based on all Markdown files in the directory of the entry folder scanning module, file address data and metadata for each Markdown file are obtained;

[0007] An initial template file for the page site is constructed based on the file address data and the metadata of each Markdown file;

[0008] Configure the engine of the front-end project of the page site, and fill the content of the Markdown file into the initialization template file to obtain the page template file;

[0009] The content of the page template file is displayed on the corresponding page based on the specified command.

[0010] Optionally, an initialization template file for the page site is constructed based on the file address data and the metadata of each Markdown, including:

[0011] Based on the file address data, recursively traverse all Markdown files under the module to obtain a list of Markdown files, and determine the entry file of React JS based on the list;

[0012] Multiple module files are built based on the metadata of each Markdown file;

[0013] The initial template file for the website is built based on the React JS entry file and multiple module files.

[0014] Optionally, the method includes:

[0015] The data for each Markdown is collected, and the collected data is populated into the nav template to generate a module component. Clicking the module path under the entry file of the React JS will navigate to the corresponding module component for rendering.

[0016] Optionally, displaying the content within the page template file on the corresponding page based on a specified command includes:

[0017] The page template file generates links based on the specified command and displays them on the corresponding page. The page template file lists all Markdown files in a list format.

[0018] The content of the page template file is displayed based on the click operation of the link.

[0019] Optionally, displaying the content within the page template file on the corresponding page based on a specified command includes:

[0020] Set specified instructions, wherein the specified instructions include startup instructions and build instructions;

[0021] The configuration file path is used to launch a browser containing the Markdown file path based on the startup command, and the content of the page template file is displayed on the browser page according to the file path.

[0022] The site is built based on the build instructions, and pages are generated under the site and the content of the page template file is displayed according to the file path.

[0023] Optionally, building a site based on the build instructions includes:

[0024] Based on the build instructions, predefine React JS components within the site. These predefine React JS components include setting routes in the site's page header to navigate to different modules, and allowing users to switch between different pages when clicking on a route.

[0025] Optionally, configure the engine for the front-end project of the web site, including:

[0026] The engine of the front-end project of the web site parses all Markdown files, generates corresponding HTML tags, and compiles the parsed results into React JS components;

[0027] Configure the path to the Markdown file at the top of the site after starting the engine of the aforementioned front-end project;

[0028] The module folder to which Markdown belongs is displayed as a link at the top of the site.

[0029] Optionally, the contents of the Markdown file are filled into the initialization template file, including:

[0030] Build a route for the initialization template file for each Markdown file;

[0031] The contents of each Markdown file are populated into the initialization template file according to the routing of the initialization template file.

[0032] According to another aspect of this application, a device for displaying files in a directory on a page is also provided, the device comprising:

[0033] One or more processors; and

[0034] A memory storing computer-readable instructions, which, when executed, cause the processor to perform operations as described above.

[0035] According to another aspect of this application, a computer-readable medium is also provided, having stored thereon computer-readable instructions that can be executed by a processor to implement the method as described above.

[0036] Compared with existing technologies, this application obtains the entry folder of the module to which the Markdown file belongs by reading the configuration file; scans all Markdown files in the module's directory based on the entry folder to obtain file address data and metadata for each Markdown file; constructs an initialization template file for the page site based on the file address data and metadata for each Markdown file; configures the engine of the front-end project of the page site and fills the content of the Markdown file into the initialization template file to obtain the page template file; and displays the content in the page template file on the corresponding page based on a specified command. When displaying files in the directory on the page, it directly relies on the front-end project engine without relying on third-party plugins, resulting in high configuration flexibility. Attached Figure Description

[0037] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0038] Figure 1 This diagram illustrates a method for displaying files in a directory on a page, according to one aspect of this application.

[0039] Figure 2 This illustration shows the main process of converting Markdown files in a directory into UI effects in one embodiment of this application;

[0040] Figure 3 This diagram illustrates some of the default display UIs of a site in one embodiment of this application.

[0041] The same or similar reference numerals in the accompanying drawings represent the same or similar parts. Detailed Implementation

[0042] The present application will now be described in further detail with reference to the accompanying drawings.

[0043] In a typical configuration of this application, the terminal, the device of the service network, and the trusted party all include one or more processors (e.g., a central processing unit (CPU)), input / output interfaces, network interfaces, and memory.

[0044] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0045] Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can store information using any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change RAM (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 technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device. As defined in this article, computer-readable media do not include non-transitory computer-readable media, such as modulated data signals and carrier waves.

[0046] Figure 1 This diagram illustrates a method for displaying files in a directory on a page according to one aspect of this application. The method includes steps S11 to S15, wherein...

[0047] Step S11: Read the configuration file to obtain the entry folder of the module to which the Markdown file belongs. Here, the configuration file is used, which contains information about the Markdown file. The configuration file can use the project's `site.config.js` configuration option, which offers high flexibility, can override the usage of `dumi`, and adds many other options, such as adding a webpack configuration option, allowing users to directly configure webpack. Figure 2 As shown, the configuration options also specify that each template in a module is a sub-entry point, and each module stores multiple Markdown files as a folder. In this application, the Markdown files under a directory refer to all Markdown files in the directory of a specific module, and the page displays all Markdown files under that module. The entry folder of the module is read by reading the configuration file.

[0048] Step S12: Based on all Markdown files in the directory of the entry folder scanning module, obtain file address data and metadata for each Markdown file; here, refer to... Figure 2 It retrieves the entry folder for Markdown from the configuration file and begins recursively scanning Markdown files, thereby scanning for file address data and reading Markdown metadata.

[0049] Step S13: Construct an initialization template file for the page site based on the file address data and the metadata of each Markdown. Here, the initialization template file refers to the file that can be used to display the template on the page later. It can convert the content under the template file into a format that can be clicked and displayed on the page. The corresponding initialization template file is constructed using the read file address and metadata, so that it can be displayed in the form required by the page when the site is started.

[0050] Step S14: Configure the engine of the front-end project of the website and fill the content of the Markdown file into the initialization template file to obtain the page template file. After building the initialization template file, the engine needs to open the website; that is, configure the front-end project engine (webpack) again, fill the read data content into the built initialization template file, and generate the page template file. The engine can then open the page template file to display the original Markdown content. In step S15, the content of the page template file is displayed on the corresponding page based on a specified command. Here, the specified command refers to a start command or build command to start webpack and display the data content filled in the page module file on the corresponding page.

[0051] In one embodiment of this application, in step S13, all Markdown files under the module are recursively traversed according to the file address data to obtain a list of Markdown files. The entry file for React JS is determined based on this list. Multiple module files are constructed based on the metadata of each Markdown file. The initialization template file for the website is constructed based on the React JS entry file and the multiple module files. Here, file address data is read from the configuration file to obtain the module list. The recursive traversal of all Markdown files under the module is then performed to obtain the list of Markdown files. The entry file for React JS, app.jsx, is determined from the list. Each Markdown file in the list is converted into a React JS component, and the file location in the list provides the entry file for React JS. A module React route is constructed within app.jsx. A React route is constructed for each Markdown file using the metadata, resulting in multiple module files (moduleN.jsx, where N corresponds to the number of modules 1, 2, 3, ...). The initialization template file for the website is then constructed based on the generated app.jsx and moduleN.jsx.

[0052] Following the above embodiment, the method includes: collecting data from each Markdown file, filling the collected data into a nav template for printing and generating a module component, wherein clicking a module path under the entry file of the React JS will navigate to the corresponding module component for rendering. Here, all the Markdown data collected for the module is saved, including the file name, the URL path route to the Markdown file, and the last modification time of the file. The saved collected data is filled into the nav template for printing, generating a nav.jsx file, thus obtaining the module component. Specifically, the module component imports the default components (NavLayout) required for the site to run, imports all Markdown files (including the absolute paths of the files), builds a React route (react-router), generates a route path for each Markdown file, and configures the react-router; clicking a module path under the module route of app.jsx will navigate to the nav.jsx page rendering, displaying the file content.

[0053] In one embodiment of this application, in step S14, a route for the initialization template file is constructed for each Markdown file; the content of each Markdown file is filled into the initialization template file according to the route of the initialization template file. Here, app.jsx and module.jsx each have corresponding template files. The initialization template file is generated from app.jsx and module.jsx. The data obtained by traversing the Markdown files is used to construct a module react route in app.jsx. A react route is constructed for each Markdown file. The content read by traversal is filled into the initialization template file according to the constructed route, and the template file is output.

[0054] In one embodiment of this application, in step S15, links generated by the page template file are displayed on the corresponding page based on a specified command. The page template file lists all Markdown files in a list format. Content under the page template file is displayed based on a click operation on the link. Here, when displaying file content on the page, the links generated by the page template file are displayed first. The page template file corresponds to a module folder; one module folder corresponds to one page template file. Each module folder contains multiple Markdown files, and all Markdown files in the directory belong to that module. The page template file appears on the page as a link. Clicking the link leads to the module page, where the link to each Markdown file is listed in a list format, thus displaying the content of the specific Markdown file after being converted to HTML.

[0055] In one embodiment of this application, in step S15, a specified instruction is set, wherein the specified instruction includes a start instruction and a build instruction; a configuration file path is configured, and a browser containing the Markdown file path is launched based on the start instruction. The content of the page template file is displayed on the browser page according to the file path; a site is built based on the build instruction, and a page is generated under the site and the content of the page template file is displayed according to the file path. Here, two instructions are set in the library: a start instruction and a build instruction. The configuration file path is configured, thereby running the predefined command start or build to display the page content. When the command is start, the browser corresponding to the file path is launched directly, and the content of the page template file is displayed on the browser page; when the command is build, the site is built, and the built site can be routed through the configured file path, and the content of the page template file is displayed on the site page.

[0056] Furthermore, based on the build instructions, predefine React JS components within the site. These predefined React JS components include setting routes to different modules in the site's page header and allowing users to switch between different pages when clicking on a route. Here, as... Figure 3 The site predefines some React JS components, including: displaying a common header in the page header, navigating to routes under different modules, showing the UI effects of JS execution, and switching between different pages by clicking on the Nav. The site footer displays some configuration information.

[0057] In one embodiment of this application, all Markdown files are parsed in the engine of the front-end project of the webpage site, generating corresponding HTML tags and compiling the parsing results into React JS components. The path to the Markdown files is configured at the top of the site after the engine of the front-end project is started. The module folder to which the Markdown belongs is displayed as a link at the top of the site. Here, the engine of the front-end project of the webpage site is Webpack. If a Markdown file is compiled into Webpack, a Loader is used to parse the Markdown file, compiling the Markdown tags and JS separately. The tags generate corresponding HTML tags, and the JS generates corresponding React JS components. When Webpack parses a file that meets the Loader's requirements, it sends the file's content to the Loader. The Loader returns JS code. The Loader returns the input Markdown content as an executable React JS component. The content rendered by the component is the HTML tags corresponding to the Markdown. The rendered content is wrapped in MDLayout component code. This component receives the route paths of all Markdowns under the current module and renders them into a list. The list items are the route paths of each Markdown. Clicking on an item navigates to the corresponding Markdown content. The output content format is as follows. The site header displays modules, and these modules are clickable to navigate to their respective pages. MDLayout displays a list of clickable Markdown files within each module, navigating to the corresponding Markdown page. The header shows links to the modules to which the Markdown files belong; clicking these links takes you to that module. All Markdown files in the module's directory belong to that module. The module page lists all Markdown links, and clicking them allows you to view the HTML content of the specific Markdown file. Webpack is configured to use the generated `app.jsx` as the entry file, configuring the output directory and rules, such as using `babel-loader` for JSX, `url-loader` for images, and `md-loader` for Markdown files. When Webpack starts, the command determines whether to use `start` or `build`. If it's a start, it runs on the specified site; if it's a build, it generates build code in the output directory and deploys it to the server.

[0058] When a project with the site library installed starts or builds, it configures site.config.js, a JavaScript file whose exported functions return configuration items. After running the command (start or build), the configuration is imported from the config path, and the configuration items are retrieved and saved to variables for later use. Starting from the module entry point of the configuration items, all files are recursively traversed, and data is saved for each module's Markdown file. The print template generates two files: nav.jsx and app.jsx. app.jsx imports React JavaScript components and configures React routes, each corresponding to a module's route path. If a homepage is configured, the default route points to the homepage Markdown. Clicking on a module path under the module route in app.jsx will navigate to the nav.jsx page rendering. The method described in this application directly relies on webpack for startup or build control and does not depend on third-party plugins. The site.config.js configuration items of the project have high flexibility, covering the usage of dumi and adding many other options, such as adding webpack configuration items, allowing users to directly configure webpack; it can configure all Markdown files in the directory.

[0059] Furthermore, embodiments of this application also provide a computer-readable medium storing computer-readable instructions that can be executed by a processor to implement the aforementioned method for displaying files in a directory on a page.

[0060] In one embodiment of this application, a device for displaying files in a directory on a page is also provided, the device comprising:

[0061] One or more processors; and

[0062] A memory storing computer-readable instructions, which, when executed, cause the processor to perform operations as described above.

[0063] For example, computer-readable instructions, when executed, cause the one or more processors to:

[0064] Read the configuration file to obtain the entry folder of the module to which the Markdown file belongs;

[0065] Based on all Markdown files in the directory of the entry folder scanning module, file address data and metadata for each Markdown file are obtained;

[0066] An initial template file for the page site is constructed based on the file address data and the metadata of each Markdown file;

[0067] Configure the engine of the front-end project of the page site, and fill the content of the Markdown file into the initialization template file to obtain the page template file;

[0068] The content of the page template file is displayed on the corresponding page based on the specified command.

[0069] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

[0070] It should be noted that this application can be implemented in software and / or a combination of software and hardware, for example, using an application-specific integrated circuit (ASIC), a general-purpose computer, or any other similar hardware device. In one embodiment, the software program of this application can be executed by a processor to implement the steps or functions described above. Similarly, the software program of this application (including related data structures) can be stored in a computer-readable recording medium, such as RAM memory, magnetic or optical drives, floppy disks, and similar devices. Furthermore, some steps or functions of this application can be implemented in hardware, for example, as circuitry that cooperates with a processor to perform the various steps or functions.

[0071] Furthermore, a portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. The program instructions invoking the methods of this application may be stored in a fixed or removable recording medium, and / or transmitted via data streams in broadcast or other signal carrying media, and / or stored in the working memory of a computer device operating according to the program instructions. Here, one embodiment of this application includes an apparatus comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein, when the computer program instructions are executed by the processor, the apparatus is triggered to operate the methods and / or technical solutions based on the foregoing embodiments of this application.

[0072] It will be apparent to those skilled in the art that this application is not limited to the details of the exemplary embodiments described above, and that it can be implemented in other specific forms without departing from the spirit or essential characteristics of this application. Therefore, the embodiments should be considered exemplary and non-limiting in all respects, and the scope of this application is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be embraced within this application. No reference numerals in the claims should be construed as limiting the scope of the claims. Furthermore, it is clear that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. Terms such as "first," "second," etc., are used to denote names and do not indicate any particular order.

Claims

1. A method for displaying files in a directory on a webpage, characterized in that, The method includes: Read the configuration file to obtain the entry folder of the module to which the Markdown file belongs; Based on all Markdown files in the directory of the entry folder scanning module, file address data and metadata for each Markdown file are obtained; Based on the file address data, recursively traverse all Markdown files under the module to obtain a list of Markdown files, and determine the entry file of React JS based on the list; Multiple module files are built based on the metadata of each Markdown file; The initial template file for the page site is built based on the aforementioned React JS entry file and multiple module files; Collect the data from each Markdown, populate the collected data into the nav template, and print to generate a module component. Clicking the module path under the entry file of the React JS will navigate to the corresponding module component for rendering. The engine of the front-end project of the web site parses all Markdown files, generates corresponding HTML tags, and compiles the parsed results into React JS components; Configure the path to the Markdown file at the top of the site after starting the engine of the aforementioned front-end project; The module folder to which Markdown belongs is displayed as a link at the top of the site; Fill the Markdown file with the contents of the initialization template file to obtain the page template file; The content of the page template file is displayed on the corresponding page based on the specified command.

2. The method according to claim 1, characterized in that, Displaying the content of the page template file on the corresponding page based on a specified command includes: The page template file displays links generated by the specified command on the corresponding page, wherein the page template file lists links to all Markdown files in a list format. The content of the page template file is displayed based on the click operation of the link.

3. The method according to claim 2, characterized in that, Displaying the content of the page template file on the corresponding page based on a specified command includes: Set specified instructions, wherein the specified instructions include startup instructions and build instructions; The configuration file path is used to launch a browser containing the Markdown file path based on the startup command, and the content of the page template file is displayed on the browser page according to the file path. The site is built based on the build instructions, and pages are generated under the site and the content of the page template file is displayed according to the file path.

4. The method according to claim 3, characterized in that, Building a site based on the aforementioned build instructions includes: Based on the build instructions, predefine ReactJS components within the site. These predefine ReactJS components include setting routes in the site's page header to navigate to different modules, and allowing users to switch between different pages when clicking on a route.

5. The method according to claim 1, characterized in that, Fill the initialization template file with the contents of the Markdown file, including: Build a route for the initialization template file for each Markdown file; The contents of each Markdown file are populated into the initialization template file according to the routing of the initialization template file.

6. A device for displaying files in a directory on a page, characterized in that, The device includes: One or more processors; and A memory storing computer-readable instructions, which, when executed, cause the processor to perform the operations of the method as described in any one of claims 1 to 5.

7. A computer-readable medium having stored thereon computer-readable instructions that can be executed by a processor to implement the method as described in any one of claims 1 to 5.

Images