CN110187886B

CN110187886B - 一种文档网站生成方法及终端

Info

Publication number: CN110187886B
Application number: CN201910328652.0A
Authority: CN
Inventors: 刘德建; 陈铭; 陈耀灿; 郭玉湖
Original assignee: Fujian Huayu Education Technology Co Ltd
Current assignee: Fujian Huayu Education Technology Co Ltd
Priority date: 2019-04-23
Filing date: 2019-04-23
Publication date: 2022-04-12
Anticipated expiration: 2039-04-23
Also published as: CN110187886A

Abstract

本发明公开了一种文档网站生成方法及终端，遍历源代码，获取静态文件，将所述静态文件提交至静态loader；执行静态loader，将所述静态文件转换为JS文件，生成文档网站；本发明只需要编写静态文件，然后通过Loader插件，将静态文件自动转换成动态代码，从而可以快速搭建出具有动态效果的文档网站，提高了网站的生成速度，降低了调试成本同时易于阅读。

Description

一种文档网站生成方法及终端

技术领域

本发明涉及软件领域，特别涉及一种文档网站生成方法及终端。

背景技术

在前端开发过程中，为了让使用者尽快了解某种前端技术(开发框架、ui组件等等)，研发者在发布程序的时候也会同时提供一个文档网站，这个网站除了介绍这些前端技术的内容以外，还会通过提供各种丰富的在线演示，帮助使用者尽快的上手。

在传统的开发方式中，文档网站中Demo页面是通过前端代码写成的，这种方式有很多不方便的地方，具体如下：

1、由于代码拥有严格的格式规范限制和框架约束，相比写静态文件，写代码文件的速度要更慢；

2、由于代码可能出现bug，相比于写静态文件，写代码文件会增加调试成本；

3、相比于静态页面，代码风格的页面不容易被阅读。

发明内容

本发明所要解决的技术问题是：提供一种文档网站生成方法及终端，从而快速搭建出具有动态效果的文档网站。

为了解决上述技术问题，本发明采用的技术方案为：

一种文档网站生成方法，包括步骤：

S1、遍历源代码，获取静态文件，将所述静态文件提交至静态loader；

S2、执行静态loader，将所述静态文件转换为JS文件，生成文档网站。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种文档网站生成终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

本发明的有益效果在于：一种文档网站生成方法及终端，遍历源代码，获取静态文件，将静态文件提交至静态loader，由静态loader将静态文件转换为JS文件，生成文档网站，即只需要编写静态文件，然后通过Loader插件，将静态文件自动转换成动态代码，从而可以快速搭建出具有动态效果的文档网站，提高了网站的生成速度，降低了调试成本同时易于阅读。

附图说明

图1为本发明实施例的一种文档网站生成方法的流程示意图；

图2为本发明实施例的一种文档网站生成方法的具体流程示意图；

图3为本发明实施例的一种文档网站生成终端的结构示意图。

标号说明：

1、一种文档网站生成终端；2、处理器；3、存储器。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

在此之前，为了便于理解本发明的技术方案，对于本发明中涉及的英文缩写、设备等进行说明如下：

(1)、webpack：目前流行的web前端工程打包工具，主要功能是对web前端工程中的源代码进行压缩、混淆、分片等。

(2)、loader：webpack框架提供的一种扩展能力，webpack使用者通过编写自己的loader，可以将自己工程源代码中指定的文件进行转换；在本发明中的静态loader是指将静态文件转换为js文件的loader，md loader是指将MD文件转换为js文件的loader。

(3)、md：在本发明中为MarkDown的缩写，它是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式；在本发明中MD文件是指使用MarkDown编写的文件。

(4)、md解析器：由于MD文件只是一个普通文本，无法直接在浏览器上显示，所以需要使用md解析器，将MD文件解析成数据结构，其中该数据结构如本发明中的AST。

(5)、AST：AST在本发明中为Abstract Syntax Tree的缩写，意为抽象语法树，或简称语法树，它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

请参照图1至图2，一种文档网站生成方法，包括步骤：

其中，在生成文档网站之前，开发者根据需求编译一个使静态文件转换为JS文件的静态loader。

从上述描述可知，本发明的有益效果在于：遍历源代码，获取静态文件，将静态文件提交至静态loader，由静态loader将静态文件转换为JS文件，生成文档网站，即只需要编写静态文件，然后通过Loader插件，将静态文件自动转换成动态代码，从而可以快速搭建出具有动态效果的文档网站，提高了网站的生成速度，降低了调试成本同时易于阅读。

进一步地，所述步骤S1中的静态文件具体为MD文件，所述静态loader为mdloader。

从上述描述可知，本发明中的静态文件为MD文件，MD文件的语法简洁明了、学习容易，而且功能比纯文本更强，也已经被广泛使用，故而使用MD文件能进一步提高网站的生成速度。

进一步地，所述步骤S2具体为：

S21、对MD文件进行解析，以得到AST；

S22、遍历所述AST，依次判断所述AST的树节点是否为约定格式，若是，则将所述树节点的内容作为原生的js代码返回，否则将所述树节点的内容转换为显示格式的js代码后返回，所述显示格式为浏览器支持的显示格式；

S23、合并所述步骤S22所返回的js代码，以得到JS文件，生成文档网站。

从上述描述可知，对于MD文件，包括一级标题、静态区域等部分的内容是标准的md格式，要将其转换成显示格式的js代码后进行返回；而在约定格式之内的内容，则作为原生的js代码返回即可，从而提供了一种将MD文件快速转换为JS文件的技术方案。

进一步地，所述步骤S21中“对MD文件进行解析”具体为：通过md解析器对MD文件进行解析；

所述步骤S22中“将所述树节点的内容转换为显示格式的js代码后返回”具体为：通过md解析器对所述树节点的内容进行转换，以得到显示格式的js代码，返回显示格式的所述js代码。

从上述描述可知，通过md解析器进行解析以及格式转换，以使得MD文件能够顺利转换成JS文件。

进一步地，所述步骤S23中“合并所述步骤S22所返回的js代码，以得到JS文件”具体为：

通过webpack将所述步骤S22所返回的js代码打包成JS文件。

从上述描述可知，在webpack的配置文件中添加静态loader，使得webpack在遇到静态文件时就自动执行静态loader，从而自动完成对静态文件转换成动态代码的过程。

请参照图3、一种文档网站生成终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

进一步地，所述步骤S2具体为：

S21、对MD文件进行解析，以得到AST；

所述步骤S22中“将所述树节点的内容转换为显示格式的js代码后返回”具体为：通过md解析器对所述树节点的内容进行转换，以得到浏览器支持的显示格式的js代码，返回显示格式的所述js代码。

通过webpack将所述步骤S22所返回的js代码打包成JS文件。

请参照图1至图2，本发明的实施例一为：

一种文档网站生成方法，包括步骤：

S1、遍历源代码，获取静态文件，将静态文件提交至静态loader；

其中，在源代码可能存在多个静态文件，则进行一一转换；

S2、执行静态loader，将静态文件转换为JS文件，生成文档网站。

其中，JS文件即包括有动态的js代码，根据js代码生成文档网站。

请参照图1至图2，本发明的实施例二为：

一种文档网站生成方法，在上述实施例一的基础上，步骤S1中的静态文件具体为MD文件，静态loader为md loader。

步骤S2具体为：

S21、对MD文件进行解析，以得到AST；

其中，步骤S21中“对MD文件进行解析”具体为：通过md解析器对MD文件进行解析；

S22、遍历AST，依次判断AST的树节点是否为约定格式，若是，则将树节点的内容作为原生的js代码返回，否则将树节点的内容转换为显示格式的js代码后返回，显示格式为浏览器支持的显示格式；

其中，步骤S22中“将树节点的内容转换为显示格式的js代码后返回”具体为：通过md解析器对树节点的内容进行转换，以得到显示格式的js代码，返回显示格式的js代码；

如图2所示，对于AST的遍历，从第一个树节点开始判断然后返回js代码，直至AST的所有树节点均判断完为止。

S23、合并步骤S22所返回的js代码，以得到JS文件，生成文档网站；

其中，步骤S23中“合并步骤S22所返回的js代码，以得到JS文件”具体为：

通过webpack将步骤S22所返回的js代码打包成JS文件。

如图2所示，源代码中有可能包括多个MD文件，步骤S2则对多个MD文件按照顺序依次执行步骤S21、步骤S22以及步骤S23。在步骤S23中，若有多个MD文件，则在每一个的MD文件都转换成JS文件之后，对所有的JS文件进行代码优化，最终根据优化后的代码生成文档网站。

在本实施例中，约定格式根据具体环境自行约定，没有任何限制，例如可以约定以符号“+”开始，以符号“#”结束等等。

在本实施例中，假设我们事先约定好一个格式，以“:::demo```js”开始，以“```:::”结束，中间的内容，是一个动态的Demo。此时这个demo.MD文件，内容如下：

对上述demo.MD文件执行步骤S22时，具体如下：

“#这里是页面的一级标题”，判断这是一个标准的md格式，将其转换为：“<h1>这里是页面的一级标题</h1>”

“##这里是页面的二级标题”，判断这是一个标准的md格式，将其转换为：“<h2>这里是页面的二级标题</h2>”

“静态区域，可以编写任何你想要的文本”，判断这是一个标准的md格式，将其转换为：“<div>静态区域，可以编写任何你想要的文本</div>”

“:::demo```js”，判断这是一个事先约定格式，于是将其转换为具体的js代码，最终得到的JS文件如下：

请参照图1至图2，本发明的实施例三为：

一种文档网站生成终端1，包括存储器3、处理器2及存储在存储器3上并可在处理器2上运行的计算机程序，处理器2执行计算机程序时实现上述实施例一中的步骤。

请参照图1至图2，本发明的实施例四为：

一种文档网站生成终端1，在上述实施例三的基础上，处理器2执行计算机程序时实现上述实施例二中的步骤。

综上所述，本发明提供的一种文档网站生成方法及终端，遍历源代码，获取静态文件，将静态文件提交至静态loader，由静态loader将静态文件转换为JS文件，生成文档网站，即只需要编写静态文件，然后通过Loader插件，在webpack的配置文件中添加静态loader，使得webpack在遇到静态文件时就自动执行静态loader，以将静态文件自动转换成动态代码，从而可以快速搭建出具有动态效果的文档网站，提高了网站的生成速度，降低了调试成本同时易于阅读；使用MD文件，降低难度且能进一步提高速度；通过对是否为预定格式的节点内容作不同的处理，从而将MD文件快速转换为JS文件。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种文档网站生成方法，其特征在于，包括步骤：

S2、执行静态loader，将所述静态文件转换为JS文件，生成文档网站；

所述步骤S1中的静态文件具体为MD文件，所述静态loader为md loader；

所述步骤S2具体为：

S21、对MD文件进行解析，以得到AST；

S22、遍历所述AST，依次判断所述AST的树节点是否为约定格式，若是，则将所述树节点的内容作为原生的js代码返回，否则将所述树节点的内容转换为显示格式的js代码后返回，所述显示格式为浏览器支持的显示格式，所述约定格式为根据具体环境自行约定的符号；

2.根据权利要求1所述的一种文档网站生成方法，其特征在于，所述步骤S21中“对MD文件进行解析”具体为：通过md解析器对MD文件进行解析；

3.根据权利要求1所述的一种文档网站生成方法，其特征在于，所述步骤S23中“合并所述步骤S22所返回的js代码，以得到JS文件”具体为：

通过webpack将所述步骤S22所返回的js代码打包成JS文件。

4.一种文档网站生成终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

所述步骤S2具体为：

S21、对MD文件进行解析，以得到AST；

5.根据权利要求4所述的一种文档网站生成终端，其特征在于，所述步骤S21中“对MD文件进行解析”具体为：通过md解析器对MD文件进行解析；

6.根据权利要求4所述的一种文档网站生成终端，其特征在于，所述步骤S23中“合并所述步骤S22所返回的js代码，以得到JS文件”具体为：

通过webpack将所述步骤S22所返回的js代码打包成JS文件。