前言
在 Web 开发中，静态网页的生成和发布一直是一个重要的话题。为了提高开发效率和网站性能，使用一个静态网页生成工具能够帮助我们快速地生成符合预期的 HTML 和 CSS 文件，同时去掉服务器端的运行环节。在众多的静态网页生成工具中，noddity-render-static 是一款值得开发者借鉴和使用的 npm 包，它不仅支持 Markdown 格式的文章渲染，还提供了极为灵活的自定义设置功能，可以轻松地实现不同的静态网站需求。接下来，本文将详细地介绍 noddity-render-static 的使用方法和实践技巧，帮助大家更好地使用它进行静态网页生成和发布。
安装
noddity-render-static 是一款基于 Node.js 的 npm 包，因此安装前需要先确保本地已经安装了 npm 和 Node.js 。安装方法如下：
npm install noddity-render-static --save
使用
安装完成后，在项目的根目录中，创建一个名为 _noddity 的文件夹，并在其中创建一个名为 articles 的文件夹，用于存储 Markdow 格式的文章。接着，创建一个 JavaScript 文件，代码如下：
-- -------------------- ---- ------- --- ------ - -------------------------------- -------- ------ ---------------------- ---- --------- ---------------- ------------- --------- ------------------- -------------------------------- ---------------- ---------------------- -- -------- ----- - -- ----- ----- --- --------------------- --
人人都活生生是灰色教师反欺负浪费愤怒
在这段代码中，首先使用 require 导入了 noddity-render-static 包，并创建了一个 render 对象。接着，我们使用 render 方法来生成静态网页。其中，我们需要提供一些基本的参数:
- title: 文章的标题
- template: 模板文件的路径
- outputFolder: 生成文件的存储路径
- articleListSources: 文章源文件的路径
- templatesFolder: 模板文件夹的路径
以上所有参数都是必须提供的，它们定义了文章的标题、HTML 模板、生成文件的目录、Markdown 文章文件的位置和 HTML 模板文件所在目录的位置。并且它们是一个数组，可以存放多个源文件路径，表示可以使用多个源路径来生成静态网站。
执行上述代码，即可在自己指定的文件夹生成静态网站的代码。
进阶
在上面的代码示例中，我们默认使用了 noddity-render-static 内置的模板，但是我们也可以定义自己的模板。接下来，我们将看到如何使用自定义模板来生成静态网页。
- 创建自定义 HTML 模板
在 HTML 文档中，需要将文章的标题、内容等填充到预先定义好的 HTML 文档中。这个预定义好的 HTML 文档就是我们所谓的模板文件，它需要放置在指定路径下，以便能被应用到生成的每一个文章中。而 noddity-render-static 则会自动将文章的元数据（比如文章的标题、时间、分类等）和内容渲染到模板文件中相应的位置。
- 增加模板标签
在模板文件中，使用奇怪的标签，以便让渲染器能够识别我们想要渲染出来的模板部分，具体如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
--------------------
-------------------
-------------
-------
-------在上面的模板文件中，我们使用了三个模板标签：{{title}},{{{date}}} 以及 {{{content}}}。其中，"{{ }}" 代表要对模板引擎的变量进行 HTML 转义，必要时务必转义，而 "{{{ }}}" 则代表直接输出 HTML 代码，不进行任何 HTML 转义。
- 更改渲染器代码
在生成器代码中，找到 template 参数，将其设置为自己的模板文件：
template: 'path/to/your/template.html'
总结
noddity-render-static 包拥有非常丰富的功能，能够为前端开发者提供高效、便捷的静态页面生成解决方案。通过本文，我们详细地学习了 npm 包 noddity-render-static 的使用和实践技巧，学习了如何通过自定义模板来进行更加灵活、个性化的静态网页生成。在新的项目中，读者可尝试使用 noddity-render-static 包，仔细查看文档，寻找更多的使用案例和技巧，以便将其最大化地应用到实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/181901