Eleventy静态网站生成器简介

Static site generators are very à la mode right now and with the JAMStack becoming a more-than-viable alternative for many web projects these days, it’s no wonder!

静态站点生成器目前处于“ 单点模式” ，而JAMStack如今已成为许多Web项目的可行替代品，这也就不足为奇了！

JAMStack or not, static site generators (SSGs) offer some major advantages over more traditional CMSs, and when it comes to SSGs, there are plenty of options to choose from. Jekyll, Hugo, Gatsby, Next.jst, Sapper,… Oh my!

不管是否使用JAMStack，静态站点生成器(SSG)都比传统的CMS具有一些主要优势，而对于SSG，则有很多选择 。 Jekyll，Hugo，Gatsby，Next.jst，Sapper，……我的天哪！

I was recently shopping around to see what would be my best static site generator option for a project of mine called Spiral11. I was first leaning towards Gatsby because it packs some modern goodies like image optimization, but then I looked further at Eleventy and fell in love.

最近，我到处逛逛，以了解我的一个名为Spiral11的项目的最佳静态站点生成器选项是什么 。 我最初倾向于盖茨比(Gatsby)，因为它包含了一些诸如图像优化之类的现代功能，但后来我进一步看了看Eleventy并坠入爱河。

11ty is easy to use, doesn’t get in your way and spits out exactly what you put in, so there’s no surprise or hidden code bloat. At its most basic, 11ty just compiles files it finds from your working directory into static HTML files. Plus, since it’s written in JavaScript, you gain access to the whole of npm in terms of packages you can use in your project.

11ty易于使用，不会妨碍您，不会完全吐出您所放入的内容，因此不会感到惊讶或隐藏代码膨胀。 最简单的说，11ty只是将从工作目录中找到的文件编译为静态HTML文件。 另外，由于它是用JavaScript编写的，因此您可以使用可在项目中使用的软件包来访问整个npm 。

Let’s take a tour and see how it works…

让我们参观一下，看看它是如何工作的……

Eleventy网站设置 (Eleventy Site Setup)

Start by installing Eleventy globally on your machine using npm or Yarn:

首先使用npm或Yarn在计算机上全局安装Eleventy：

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

Now you can run the eleventy command in any directory that contains valid template files.

现在，您可以在包含有效模板文件的任何目录中运行eleventy命令。

For example, say we have a directory called best-site-ever, with an index.md file in it:

例如，假设我们有一个名为best-site-ever的目录，其中包含index.md文件：

index.md

index.md

## Chomp Chomp **Chomp** 🐊🐊🐊

You can now run eleventy in that directory, you’ll see that Eleventy creates a _site directory with an index.html file in it that contains what we expect:

现在，您可以在该目录中运行eleventy ，您将看到Eleventy创建了一个_site目录，其中包含index.html文件，其中包含我们期望的内容：

_site/index.html

_site / index.html

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

Speaking of template languages, you have plenty of options. You can use Markdown, Nunjucks, Liquid, Mustache,… And you can mix and match, so you can have some files written in Liquid and some in Nunjucks and Eleventy will handle everything just fine.

说到模板语言，您有很多选择。 您可以使用Markdown，Nunjucks，Liquid，Mustache等...，并且可以混合使用，因此可以用Liquid编写一些文件，用Nunjucks和Eleventy编写一些文件就可以了。

eleventy命令选项 (eleventy command options)

The eleventy command also accepts a few useful flags. For example:

eleventy命令还接受一些有用的标志。 例如：

• –watch: Rewrite output files when any of your project files change.

  –watch ：任何项目文件更改时，重写输出文件。

• –serve: Serve the outputted site via a local web server and watch for changes.

  –serve ：通过本地Web服务器服务输出的站点，并注意更改。

• –dryrun: Test out the processing without actually outputting any files.

  –dryrun ：在不实际输出任何文件的情况下测试处理。

• –output: Specify a different output location.

  –output ：指定其他输出位置。

That means that very often, when working locally, you’ll want to serve and rebuild on changes with the following command:

这意味着，在本地工作时，通常需要使用以下命令来服务并基于更改进行重建：

$ eleventy --serve

目录结构 (Directory Structure)

With Eleventy you’re not only free to choose your favorite template language, but you can also choose your own directory structure.

使用Eleventy，您不仅可以自由选择自己喜欢的模板语言，还可以选择自己的目录结构。

Say we have another markdown file in our project, but this time it’s in two nested sub-directories:

假设我们的项目中还有另一个markdown文件，但是这次在两个嵌套的子目录中：

/one/two/blog-post.md

/one/two/blog-post.md

One day *I will write* my 1st blog post!

Now if we run eleventy, the output in _site will look like this:

现在，如果我们运行eleventy ，在输出_site看起来就像这样：

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

So you’ll notice that the directory structure is kept, that the file name is used as the slug/URI and that Eleventy creates a directory for each outputted template with an index.html file within it which contains the HTML output.

因此，您会注意到保留了目录结构，文件名用作slug / URI，并且Eleventy为每个输出模板创建了一个目录，该模板中带有一个包含HTML输出的index.html文件。

What if we wanted our files organized in directories that are reflected differently in the final output? Easy, we can just specify the permalink for a particular template inside a front matter section at the top.

如果我们希望将文件组织在目录中，并在最终输出中有所不同，该怎么办？ 很简单，我们只需在顶部的“重要事项”部分中为特定模板指定永久链接即可。

/one/two/blog-post.md

/one/two/blog-post.md

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

Just run eleventy again and you’ll now see that now blog-post appears at the root level in _site. This way, specifying a permalink allows you full flexibility.

再次运行eleventy ，您现在会看到现在blog-post出现在_site的根目录_site 。 这样，指定一个永久链接可以为您提供充分的灵活性。

前事 (Front matter)

Speaking of front matter, you can put all sorts of metadata in it, which will then be available to layouts (more on that later). It’s in the front matter, for example, that you’ll specify things like the title, meta description/excerpt and tags for a post, and most of the keys can be named whatever you’d like.

说到最重要的事情，您可以在其中放置各种元数据，然后这些元数据将可用于布局(稍后会详细介绍)。 例如，这是头等大事，您将指定诸如标题，元描述/摘录和帖子标签之类的东西，并且大多数键都可以随便命名。

Here’s an example to illustrate:

这是一个例子说明：

/one/two/blog-post.md

/one/two/blog-post.md

---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
  - blog
  - getting-started
---

One day *I will write* my 1st blog post!

馆藏 (Collections)

I won’t go too deep on the topic here, and I invite you to read the docs to learn more, but Eleventy uses the tags you provide in the front matter to populate collections, which can be iterated over in other templates like, say, category pages.

在这里，我不会对此主题进行深入探讨，我邀请您阅读文档以了解更多信息，但是Eleventy使用您在前端提供的标签来填充集合，可以在其他模板(例如，例如，类别页面。

There’s also a special collection called all which by default includes every single post. With the all collection, you may end up with something like a sitemap that includes posts/pages you don’t want, so there’s an easy way to opt out of having a post or page included in collections:

还有一个名为all的特殊集合，默认情况下包括每个帖子。 使用all集合时，您可能最终会得到类似于站点地图的内容，其中包含不需要的帖子/页面，因此有一种简单的方法可以选择不将帖子或页面包含在集合中：

---
eleventyExcludeFromCollections: true
---

版面 (Layouts)

So far what we’ve done is just output HTML from the markdown files we’ve created. Most of the time though such markdown files should be wrapped in a layout to provide things like the boilerplate HTML, header, navigation bar, sidebar and footer.

到目前为止，我们所做的只是从我们创建的markdown文件中输出HTML。 尽管在大多数情况下，此类降价文件应包装在布局中，以提供样板HTML，标头，导航栏，边栏和页脚。

By default layout templates should live in the _includes directory.

默认情况下，布局模板应位于_includes目录中。

Let’s create some sample layouts using Nunjucks syntax. One will be the default layout with our HTML boilerplate and the other one will be our blog layout:

让我们使用Nunjucks语法创建一些示例布局。 一个将是我们HTML样板的默认布局，另一个将是我们的博客布局：

_includes/default.njk

_includes / default.njk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} | My Site</title>
</head>
<body>
   {{ content | safe }}
</body>
</html>

_includes/blog.njk

_includes / blog.njk

---
layout: default
---

<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>

<article>
  {{ content | safe }}
</article>

---

---

As you can see, a layout can call another layout and our layouts can access the data that’s in the front matter of our regular template files.

如您所见，一个布局可以调用另一个布局，而我们的布局可以访问常规模板文件中最重要的数据。

We can use a layout by specifying it in the front matter of any of our content templates:

我们可以通过在任何内容模板的最前面指定布局来使用布局：

---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---

One day *I will write* my 1st blog post!

多配置 (Eleventy Configuration)

So far we’ve done everything without even touching a configuration file, and it goes to show the simplicity of using Eleventy. But as your website gains in complexity, you’ll surely want to be able to set some configuration options. You can do that in an .eleventy.js file at the root of your project.

到目前为止，我们已经完成了所有工作，甚至没有接触配置文件，这表明使用Eleventy非常简单。 但是，随着您的网站变得越来越复杂，您肯定希望能够设置一些配置选项。 您可以在项目根目录的.eleventy.js文件中执行此操作。

Here’s a sample configuration file which copies our static assets to the output directory and specifies a different output directory name (public):

这是一个示例配置文件，该文件将我们的静态资产复制到输出目录，并指定其他输出目录名称( public )：

.eleventy.js

.eleventy.js

module.exports = eleventyConfig => {
  // Copy our static assets to the output folder
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('js');
  eleventyConfig.addPassthroughCopy('images');

  // Returning something from the configuration function is optional
  return {
    dir: {
      output: 'public'
    }
  };
};

You can do all sorts of things in your config file like minifying the HTML output, using plugins and configuring shortcodes. Again, I invite you to look at the docs to learn more about what can be configured. But if you start to get overwhelmed at first, just remember that by default Eleventy doesn’t even need a config file and can do most of the heavy lifting without one.

您可以在配置文件中执行各种操作，例如最小化HTML输出，使用插件和配置简码。 再次，我邀请您查看文档以了解有关可配置内容的更多信息。 但是，如果您一开始变得不知所措，请记住，默认情况下，Eleventy甚至不需要配置文件，并且不需要一个文件就可以完成大部分繁重的工作。

使用入门 (Using a Starter)

So far we’ve been creating a site from scratch to see how things work, but often you’ll want to get started with a good base that’s already configured and/or styled in a way that you like. You can browse through a list of 11ty starters here.

到目前为止，我们一直在从头开始创建一个站点，以了解其工作原理，但是通常您会想开始使用一个已经以您喜欢的方式配置和/或样式化的良好基础。 您可以在此处浏览11个初学者的列表 。

I personally really like the Skeleventy starter, which uses Tailwind CSS for styling and is configured with PurgeCSS to get rid of unused styles in production. If you’re starting a blog, the official Eleventy blog starter would also be a great place to start.

我个人真的很喜欢Skeleventy启动程序 ，该启动程序使用Tailwind CSS进行样式设置，并配置了PurgeCSS以摆脱生产中未使用的样式。 如果您要开始写博客，那么Eleventy官方博客初学者也将是一个不错的起点。

了解更多 (Learning More)

✨✨ That’s it for this brief introduction, but I invite you to learn more by checking out these resources:

this就是这个简短的介绍，但是我邀请您通过检查以下资源来了解更多信息：

• The official docs

  官方文档

• This Learn With Jason episode with Zach Leatherman, the creator of Eleventy

  这是Eleventy的作者Zach Leatherman的《 与Jason一起学习》剧集

翻译自: https://www.digitalocean.com/community/tutorials/js-eleventy