使用 Nunjucks 构建带有组件的静态站点

Desknumber

即使您根本不使用任何客户端 JavaScript 来构建网站，也不意味着您必须放弃使用组件构建的想法。了解如何在 HTML 预处理器的帮助下构建静态站点。现在很流行，我敢说用组件构建网站是一个非常好的主意。我们不是一个接一个地构建整个页面，而是构建一个组件系统（例如：搜索表单、文章卡、菜单、页脚），然后将网站与这些组件拼凑在一起。

像 React 和 Vue 这样的 JavaScript 框架非常强调这个想法。但即使您根本不使用任何客户端 JavaScript 来构建网站，也不意味着您必须放弃使用组件构建的想法！通过使用 HTML 预处理器，我们可以 电子邮件营销列表 构建静态站点，并且仍然可以获得将站点及其内容抽象为可重用组件的所有好处。

如今，静态网站风靡一时，这是理所当然的，因为它们快速、安全且托管成本低廉。信不信由你，即使是 Smashing Magazine也是一个静态网站！



让我们看一下我最近使用这种技术构建的网站。我使用CodePen Projects来构建它，它提供Nunjucks作为预处理器，它非常适合这项工作。

仅靠 HTML 并不能很好地解决这个问题。我们需要的是进口。像 PHP 这样的语言通过诸如 之类的东西使这个变得简单<? ""; ?>，但是静态文件主机不运行 PHP（故意），并且单独的 HTML 没有帮助。幸运的是，我们可以使用 Nunjucks 来预处理包含内容。

请注意，包含的文件的名称类似于_. 这并不是完全必要的。它可能是或i，但它们是这样命名的，因为 1) 以下划线开头的文件有点像表示它们是部分文件的标准方式。在 CodePen 项目中，这意味着它们不会尝试单独编译。2) 通过命名它，如果我们愿意的话，我们可以在其中使用更多 Nunjucks 的东西。