如何使用Eleventy建立静态博客
You can find this project on Github here You can find this project on .
有没有想过这个美丽博客的动力是什么？ 这是一个名为Eleventy的静态站点生成器（SSG），使用起来非常简单。
但是我使用Eleventy（11ty）的主要原因是它是如此快速且可定制。
是的，我已经尝试了一些其他类似的化身 ，但不知何故11ty对我来说就轻松多了（看来是狼）
让我们开始与Eleventy一起创建一个简单的博客！
设置项目
喜欢就好其他文章这样一个有关设置的node.js，我们通过创建一个基本的文件夹结构开始。
mkdir blogcd blog这将创建一个名为blog的目录，并将目录更改为该目录。
npm install这将安装一个基本的节点应用程序。
npm install --save-dev @11ty/eleventy这将把Eleventy添加到我们的软件包中，根据他们的文档，本地安装优于全局安装。
而已; 现在，我们可以开始添加一些页面。
在Eleventy中添加主页
当然，每个网站/博客都需要一个主页，因此让我们从在您喜欢的编辑器中打开项目开始。
首先，我们将在根目录中添加一个名为index.njk的文件。
NJK是短期的Nunjucks这是一个模板语言
---
layout: layouts/home.njk
---
<h1>Latest posts will come here</h1>如您所见，它是Markdown和Layout之间的混合体。
我们将在上面的layouts / home.njk顶部为该文件定义一个布局。
现在让我们创建布局结构
创建一个名为_includes的文件夹，在其中创建另一个文件夹布局
首先，我们创建基本布局，创建一个名为base.njk的文件
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > </ title >
< meta
name = "Description"
content = ""
/>
< link rel = "stylesheet" href = "/css/index.css" />
</ head >
< body >
< main >
</ main >
</ body >
</ html >还有我们的home.njk文件
---
layout: layouts/base.njk
templateClass: tmpl-home
---
{{ content | safe }}要查看到目前为止我们创建的内容，请在您的终端中运行以下命令
npx eleventy --serve打开http：// localhost：8080看看我们得到了什么！
没什么好看的，但它应该显示带有文字H1的最新帖子。
向Eleventy添加博客功能
没有实际的博客文章，博客就不多了，因此让我们开始创建一些博客文章。
首先在您的根目录下创建一个名为posts的新文件夹，然后添加5个Markdown文件。
---
title: Post number 1
description: Whatever you want to say
date: 2020-04-17
tags:
- postslayout: layouts/post.njk
---
# Lorem ipsum dolar si amet!?
Yes! I agree遵循这些步骤，直到达到5，我们将其称为post-one.md。
这里的重要部分是标签选项，我们可以有多个标签，但是在这种情况下，我们将一个设置为帖子，这将成为我们的收藏！
另外，我们在这里提到了新的布局，因此我们可以创建_includes / layouts / post.njk
---
layout: layouts/base.njk
templateClass: tmpl-post
---
<p><a href="{{ '/' | url }}">Back home</a></p>
<hr />
<h1> {{ title }} </h1>
{{ content | safe }}没什么，我们再次扩展了基础模板，并添加了一个必不可少的返回主页按钮。
然后，我们显示此博客文章的标题和内容。
不，让我们回到index.njk文件并将其更改为以下内容：
---
layout: layouts/home.njk
---
<h1>Latest posts</h1>
{% set postslist = collections.posts %} {% include "postslist.njk" %}就像在帖子文件中提到的那样，我们包含了一个名为posts的标签，在这里，我们将这些集合称为posts！
您也可以使用collections.all获取所有收藏集。
现在让我们制作实际的postlist.njk
< ul >
{%- for post in postslist -%}
< li > < a href = " {{ post.url }} "> {{ post.url }} </ a > </ li >
{%- endfor -%}
</ ul >在这里，我们遍历我们的帖子列表，并为该特定帖子创建一个URL。
现在再次运行以下命令：
npx eleventy --serve是!
现在，我们有了我们的工作博客，让我们从这里开始工作，让它变得更棒！
You can find this project on Github here You can find this project on .
翻译自: https://hackernoon.com/how-to-build-a-static-blog-with-eleventy-mkdg3261