深入研究 个静态站点生成器

64 人阅读 | 0 人回复

发表于 2023-8-29 19:37:07 | 显示全部楼层 |阅读模式

在静态站点生成器中的排名正在上升。这种基于节点的构建器因其零配置起点、纯静态输出以及轻松实现梦寐以求的 Lighthouse 最高性能分数(四个完美的 100 分)而极具吸引力。让我们深入探讨它的独特之处,并了解一些基本概念以帮助您成功入门。
但首先 — 让我们快速回顾一下“静态站点”的含义,然后再回顾一下生成器提供的内容。静态站点由静态内容组成——例如,HTML、CSS、资产和所有内容在推送到网站主机之前已经编译在一起。这不同于动态站点,动态站点通过在运行时查询数据库(如 WordPress)来编译这些内容,或者从客户端 API 提取内容(如没有服务器端呈现的 JavaScript 框架)。

静态站点生成器是一个环境和构建处理器,用于将您 法国电话号码表 的内容编译成静态 HTML。他们通常提供帮助程序以提供编写内容的灵活性(例如支持 Markdown)并包括模板化方法。因此,生成器将支持通过某种模板语言将这些内容分解为组件,而不是一个接一个地编写 HTML 页面并复制和粘贴重复的部分。然后生成器的构建过程会将所有内容组合在一起并输出最终的 HTML,可以将其上传到 Web 主机以用作您的网站。根据您使用的虚拟主机,此构建过程甚至可以由主机完成。

有许多可用的静态站点生成器。您可能听说过甚至使用过提供了一个完整的列表。

Eleventy 与其他静态站点生成器有何不同?
Eleventy 在构建期间和在浏览器中都非常快。这在很大程度上要归功于不需要加载客户端 JavaScript 包来提供内容(与 Gatsby 之类的东西相比)。服务器端呈现在这里甚至不是问题,因为文件系统页面创建默认为静态 HTML。



众不同的是能够从多达十种不同的模板语言中进行选择和混合:

屏幕截图列出了可用的模板语言,包括。(大预览)
混合语言可能发生在同一个文件中,也可能发生在布局之间。例如,我经常使用 Markdown 编写我的主要内容,并将其输入到 Nunjucks 布局中。在某些项目中,我发现能够在 环遍历某些数据很有用。这种组合语言的能力非常强大,允许您设计最适合您和您的项目的编写和构建工作流。

Eleventy 包含标志,该标志使用 BrowserSync 启用本地服务站点,并在文件更改时进行热重载。这是一个很大的便利,如果您不是在寻找静态站点生成器,而是在寻找 Gulp 等构建工具的升级版,请牢记这一点。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

aaruhul

发表主题 1

发帖