使用定制的静态站点生成器简化您的堆栈
在现代开发中,有很多用于开发网站的出色工具,但它们通常超出了给定项目所需的范围。在本文中,我们将探讨如何采用简单的 HTML 页面,并使其内容在没有框架和客户端 JavaScript 的 CMS 中可编辑。 随着 Jamstack 运动的出现,静态服务站点再次风靡一时。大多数提供静态 HTML 的开发人员并不是在编写本机 HTML。为了获得可靠的开发人员体验,我们经常使用称为静态站点生成器 (SSG) 的工具。 这些工具具有许多功能,使创作大型静态网站变得愉快。无论它们是提供与第三方 API(如Gatsby 的数据源)的简单挂钩,还是提供深入的配置(如11ty 的大量模板引擎),静态站点生成中的每个人都能找到适合自己的东西。 由于这些工具是针对不同的用例而构建的,因此它们必须具有很多功能。这些功能使它们变得强大。
对于新开发人员来说
它们也变得相当复杂和不透明。在本文中,我们将分解 SSG 的基本组件并创建我们自己的组件。 什么是静态站点生成器 马耳他手机号码列表 静态站点生成器的核心是一个程序,它对一组文件执行一系列转换,将它们转换为静态资源,例如 HTML。SSG 可以接受什么类型的文件、如何转换这些文件以及生成什么类型的文件。 Jekyll是一个早期且仍然流行的 SSG,它使用 Ruby 将Liquid模板和 Markdown 内容文件处理为 HTML。 Gatsby 使用 React 和 JSX 将组件和内容转换为 HTML。然后,它更进一步,创建一个可以静态提供服务的单页面应用程序。 11ty 从模板文本等模板引擎渲染 HTML。 每个平台都有附加功能,让我们的生活更轻松。他们提供主题、构建管道、插件架构等等。每个附加功能都会带来更多的复杂性、更多的魔力和更多的依赖性
我们新的静态站点生成器的技术堆栈
该main()函数接受两个参数:HTML 模板的路径和我们希望构建的文件存在的路径。在我们的主函数中,我们buildHTML在模板源路径上运行一些数据。 构建函数将源文档 AERO 领先 转换为字符串并将该字符串传递给 使用该字符串编译模板。然后,我们将数据传递到已编译的模板中,Handlebars 会呈现一个新的 HTML 字符串,用数据输出替换任何变量或模板逻辑。 我们将该字符串返回到main函数中,并使用writeFileNode 的文件系统模块提供的方法在指定位置写入新文件(如果目录存在)。 为了防止错误,请将一个dist目录添加到您的项目中 其中包含一个文件。我们不想提交我们的构建文件(我们的构建过程将执行此操作),但我们希望确保我们的脚本有这个目录。 在创建 CMS 来管理此页面之前,我们先确认它是否正常工作。为了进行测试,我们将修改 HTML 文档以使用刚刚传递到其中的数据。我们将使用 Handlebars 变量语法来包含variableData内容。