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