后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 11ty 用不到 20 行代码创建博客
本文最初发布在我的个人博客上，网址为https://omarsinan.com/blog/the-eleventy-11ty-hype-explained
在这篇博文中，我将介绍 11ty 的特别之处以及为什么你应该尝试一下。我也希望这能激励你用 11ty 创建一个带有博客页面的个人网站 😄
🤯 可能是最简单的安装过程
打开 11ty 网站 (11ty.dev)，首先映入眼帘的是快速入门部分。只需 3 条命令（也可以 2 条命令完成），你就能搭建你的第一个网站。
npm install -g @11ty/eleventy
echo '# Hello, world!' > index.md
eleventy
您可能必须运行 sudo npm 才能获得安装 11ty 的正确权限。
最后，看看你的网站是否运行起来了，eleventy --serve神奇的是，你有一个由单个 .md 文件制作的静态网站正在运行！🤯
📝 想要博客？那就写个博客吧。
为你的个人网站搭建博客超级简单。第一步大概是创建一个布局文件，布局基本上就是在其他文件中使用的模板。
创建一个名为的目录_includes和一个名为的文件，layout.njk然后_includes复制粘贴以下内容：
---
title: A blog about cats
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
{{ content | safe }}
</body>
</html>
blog现在让我们在根目录中创建一个名为 的目录，并在其中创建一个名为 的目录post-1。在该post-1目录中，创建一个名为 的文件index.md。这将作为我们的第一篇博客文章：
---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!
您可以在 .md 文件中使用 Liquid 模板语言！！！（什么？）
打开浏览器并转到，http://localhost:8080/blog/post-1/猜猜怎么着？
让我们在博客文章中添加一张图片。在post-1名为 的目录中创建一个名为 的文件夹images，并在其中放置一张猫的图片（是的，只允许使用猫）。
---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!
刷新页面，哦不！它没用。11ty 默认只扫描 .md 文件。所以为了让它也扫描图片，我们需要指定它应该扫描哪些文件格式。
因此在终端中运行，eleventy --formats=md,jpg然后eleventy --serve --formats=md,jpg
瞧！来看看吧：
好吧，这很酷，但是我们如何在主页上显示所有博客文章的链接呢？很简单。在目录index.md中的文件中post-1，在 frontmatter 中添加另一个属性：tags: post。它应该如下所示：
---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
tags: post
---
# {{ title }}
Hello, world!
tags 属性将帮助我们创建一个可迭代的集合。现在，在你的index.md根目录中，它应该包含以下内容：
# Hello, world!
{% for post in collections.post %}
- {{ post.data.title }}
{% endfor %}
现在，如果你打开http://localhost:8080/，就会看到我们的第一篇帖子出现了。那么，该如何链接它呢？很简单，只需添加 post.url 作为链接即可。所以你的文件应该如下所示：
# Hello, world!
{% for post in collections.post %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}
完美，成功了！我们再发一篇帖子来确认一下。同样的操作。在目录post-2中创建一个名为 的目录blog，并在其中创建一个名为 的文件index.md：
---
layout: layout.njk
title: Woohoo! My second post
date: 2020-01-09
tags: post
---
# {{ title }}
Hey there!
就这么简单！
默认情况下，11ty 会按日期升序排序。让我们对其进行排序，以便首先显示最新的帖子。index.md在根目录中编辑你的文件，将 for 循环中的 赋值给collections.post | reverse，posts并将 更改collections.post为posts。其余部分可以保留原样。
# Hello, world!
{%- assign posts = collections.post | reverse -%}
{% for post in posts %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}
这将确保我们反转 11ty 的默认排序，从而实现日期的降序排列。
🤔 下一步是什么？
11ty 提供了太多强大的功能。这篇文章只是想让你了解创建和运行博客是多么容易。如果你不想从头开始构建所有内容，11ty 已经提供了一个博客网站基础项目，你可以访问https://www.11ty.dev/docs/starter/查看（如果你是第一次使用 11ty，我建议你通过自己创建来学习）。
我还建议您查看文档。在我看来，11ty 的文档是我见过的最令人印象深刻的文档之一。这些文档提供了大量内容，可以帮助您建立并运行一个合适的网站。
您还可以查看 Jason Lengstorf 的《Let's Learn Eleventy!》（与 Zach Leatherman 合作），网址为https://www.youtube.com/watch?v=j8mJrhhdHWc（这是一个很棒的视频，我强烈建议您看看）。
鏂囩珷鏉ユ簮锛�https://dev.to/oohsinan/create-a-blog-in-less-than-20-lines-of-code-using-11ty-3oh0