静态站点生成器现在非常时尚,随着JAMStack(https://jamstack.org/)成为许多Web项目的可行替代方案,这并不奇怪!
无论是JAMStack还是不,静态网站生成器(SSGs)比传统的CMS提供一些主要优势,而当涉及到SSGs时,有许多选项可供选择(https://www.staticgen.com/)。
我最近在购物,看看我的一项名为Spiral11(LINK0)的项目的最佳静态网站生成器选项是什么。我首先倾向于盖茨比,因为它包装了一些现代化优化,如图像优化,但然后我进一步看到了Eleventy并坠入爱河。
11ty 易于使用,不会妨碍你的方式,并排出你插入的内容,所以没有惊喜或隐藏的代码膨胀. 在其最基本的情况下,11ty 只是将它从工作目录中找到的文件编译成静态的 HTML 文件。
让我们走一趟,看看它是如何工作的......
十一 站点设置
首先,在您的机器上使用 npm 或 Yarn 全球安装 Eleventy:
1# with npm
2$ npm install -g @11ty/eleventy
3
4# with Yarn
5$ yarn global add @11ty/eleventy
现在,您可以在任何包含有效模板文件的目录中运行eleventy命令。
例如,假设我们有一个名为最佳网站的目录,其中包含一个index.md文件:
1[label index.md]
2## Chomp Chomp **Chomp** 🐊🐊🐊
你现在可以在该目录中运行eleventy,你会看到Eleventy创建一个_site目录,其中包含我们所期望的index.html文件:
1[label _site/index.html]
2<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>
你可以使用Markdown,Nunjucks,Liquid,Mustache,...你可以混合和匹配,所以你可以有一些文件写在Liquid和一些在Nunjucks和Eleventy将处理一切都很好。
11 个命令选项
Eleventy命令也接受了一些有用的旗帜,例如:
- --watch:在任何项目文件发生更改时重写输出文件
- --serve:通过本地Web服务器服务输出网站并观察变化
- --dryrun:测试处理而不实际输出任何文件
- --output:指定不同的输出位置
这意味着,当您在本地工作时,您通常需要使用以下命令来服务和重建更改:
1$ eleventy --serve
董事会结构
有了 Eleventy,您不仅可以自由选择您最喜欢的模板语言,还可以选择自己的目录结构。
假设我们在我们的项目中有另一个标记文件,但这次它是在两个嵌入式子目录中:
1[label /one/two/blog-post.md]
2One day *I will write* my 1st blog post!
现在,如果我们运行eleventy,在_site中的输出将是这样的:
1📁 _site/
2 index.html
3 📁 one/
4 📁 two/
5 📁 blog-post/
6 index.html
因此,您会注意到目录结构被保留,文件名被用作 slug/URI,并且Eleventy为每个输出模板创建了一个目录,其中包含 HTML 输出的 index.html 文件。
如果我们想要我们的文件组织成目录,这些目录在最终输出中有所不同? 简单地说,我们可以在顶部的首页内容部分中指定特定模板的永久链接。
1[label /one/two/blog-post.md]
2---
3permalink: '/blog-post/'
4---
5
6One day *I will write* my 1st blog post!
只需再次运行eleventy,你现在会看到blog-post现在出现在_site中的根级别。
前线问题
谈到前提,你可以将各种元数据放入其中,然后可用于布局(稍后更多)。在前提中,例如,你会指定类似标题,元描述 / 摘要和标签的文章,而大多数键可以被命名任何你想要的。
这里有一个例子来说明:
1[label /one/two/blog-post.md]
2---
3title: "My first blog post 😊"
4date: 2020-04-02
5excerpt: "This post talks about how one day I'll write a 1st post."
6permalink: '/blog-post/'
7emotion: happy
8tags:
9 - blog
10 - getting-started
11---
12
13One day *I will write* my 1st blog post!
收藏
我不会在这里深入讨论这个话题,我邀请您阅读文件(LINK0),以了解更多信息,但Eleventy使用您在主题中提供的标签来填充集合,这些标签可以重复在其他模板中,比如类别页面。
有了所有集合,你可能最终会发现一些类似于网站地图的内容,其中包括你不想要的帖子/页面,所以有一个简单的方法来退出包含在集合中的帖子或页面:
1---
2eleventyExcludeFromCollections: true
3---
布局
到目前为止,我们所做的只是从我们创建的标记文件中输出HTML,但大多数时候,这些标记文件应该被包装在一个布局中,以提供类似的HTML,标题,导航栏,侧栏和脚板。
默认情况下,布局模板应该生活在_includes目录中。
让我们使用Nunjucks语法创建一些样本布局,其中一个将是我们的HTML锅炉板的默认布局,另一个将是我们的博客布局:
1[label _includes/default.njk]
2<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>{{ title }} | My Site</title>
8</head>
9<body>
10 {{ content | safe }}
11</body>
12</html>
1[label _includes/blog.njk]
2---
3layout: default
4---
5
6<h1>{{ title }}</h1>
7<div>
8 Published on {{ date }}
9</div>
10
11<article>
12 {{ content | safe }}
13</article>
正如您所看到的,一个布局可以调用另一个布局,我们的布局可以访问我们常规模板文件的前面数据。
我们可以通过在我们内容模板中的任何一个前科中指定一个布局:
1---
2layout: blog.njk
3title: "My first blog post 😊"
4date: 2020-04-02
5excerpt: "This post talks about how one day I'll write a 1st post."
6---
7
8One day *I will write* my 1st blog post!
电梯配置
到目前为止,我们已经完成了一切,甚至没有触摸配置文件,它可以显示使用Eleventy的简单性,但随着您的网站的复杂性增加,您肯定希望能够设置一些配置选项。
以下是样本配置文件,将我们的静态资产复制到输出目录并指定不同的输出目录名称(‘public’):
1[label .eleventy.js]
2module.exports = eleventyConfig => {
3 // Copy our static assets to the output folder
4 eleventyConfig.addPassthroughCopy('css');
5 eleventyConfig.addPassthroughCopy('js');
6 eleventyConfig.addPassthroughCopy('images');
7
8 // Returning something from the configuration function is optional
9 return {
10 dir: {
11 output: 'public'
12 }
13 };
14};
您可以在配置文件中做各种各样的事情,例如缩小HTML输出,使用插件和配置短代码. 再次,我邀请您查看文件(https://www.11ty.dev/docs/config/)以了解更多关于可以配置的内容。
使用一个起点
到目前为止,我们一直在从头开始创建一个网站,看看事情是如何工作的,但通常你会想从一个好的基础开始,已经配置和 / 或以你喜欢的方式进行风格化。
我个人真的很喜欢 Skeleventy starter,它使用 Tailwind CSS来设计风格,并与 PurgeCSS配置,以消除在生产中未使用的风格。
学习更多
✨✨ 这就是这个简短的介绍,但我邀请您通过检查这些资源来了解更多:
- The official docs
- This Learn With Jason 集 與 Zach Leatherman, Eleventy 的創造者