如何使用Eleventy建立静态博客

最新推荐文章于 2024-06-07 09:33:57 发布

dfsgwe1231

最新推荐文章于 2024-06-07 09:33:57 发布

阅读量383

点赞数

文章标签： java python linux html git

原文链接：https://hackernoon.com/how-to-build-a-static-blog-with-eleventy-mkdg3261

版权

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

dfsgwe1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用Eleventy建立静态博客

You can find this project on Github here You can find this project on . 有没有想过这个美丽博客的动力是什么？这是一个名为Eleventy的静态站点生成器（SSG），使用起来非常简单。但是我使用Eleventy（11ty）的主要原因是它是如此快速且可定制。是的，我已经尝试了一些其他类似的化身，但不知何故1...
复制链接

扫一扫