当前位置: 首页 > 工具软件 > Eleventy > 使用案例 >

如何使用Eleventy建立静态博客

蒲昀
2023-12-01

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 }}

在当地运行Eleventy

要查看到目前为止我们创建的内容,请在您的终端中运行以下命令

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

 类似资料: