首页 » 使用定制的静态站点生成器简化您的堆栈

使用定制的静态站点生成器简化您的堆栈

在现代开发中,有很多用于开发网站的出色工具,但它们通常超出了给定项目所需的范围。在本文中,我们将探讨如何采用简单的 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内容。

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注