Eleventy 入门

发布时间: 2024-11-07

一、创建项目 eleventy-sample 目录
二、安装 eleventy
- 创建一个 package.json
- 安装 eleventy
三、运行 Eleventy
四、创建模板
五、观察模板
六、将其放到网上（可选）
六、继续学习
- 教程和入门项目

一、创建项目 `eleventy-sample` 目录 #

使用以下命令为您的项目创建一个目录

mkdir eleventy-sample

现在使用以下命令进入该目录（更改目录cd的缩写）：

cd eleventy-sample

二、安装 eleventy #

创建一个 `package.json` #

安装 Eleventy 需要一个 package.json 文件。使用 npm init -y 创建该文件。 -y 使用默认值并跳过命令行询问。

npm init -y

安装 eleventy #

npm install @11ty/eleventy --save-dev

您也可以全局安装 Eleventy，但 package.json 推荐使用上面的安装方法。

npm install -g @11ty/eleventy

三、运行 Eleventy #

我们可以使用 npx 命令（也由Node.js提供）来运行本地项目的 Eleventy 版本。让我们确保我们的安装顺利进行，并尝试运行 Eleventy：

npx @11ty/eleventy

Eleventy 运行结果：

npx @11ty/eleventy
[11ty] Wrote 1 file in 0.05 seconds (v2.0.1)

如果你在输出中看到 (v2.0.1) ，你就知道你使用的是最新版本。然而，Eleventy 并没有处理任何文件！文件夹还有没有查创建任何模板。

四、创建模板 #

模板是以 Markdown，HTML，Liquid，Nunjucks 等格式编写的内容文件，Eleventy在构建网站时将其转换为页面（或页面）。

让我们运行两个命令来创建两个新的模板文件。

# windows cmd 命令
echo ^<!doctype html^>^<title^>Page title^</title^>^<p^>Hi^</p^>> index.html

或

# windows powershell 命令
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index2.html

echo '# Page header' > README.md

或者，你也可以手动在项目根目录创建文件，注意文件名后缀即可。

在你创建了一个HTML模板和一个 Markdown 模板之后，让我们用下面的命令再次运行 Eleventy：

npx @11ty/eleventy

输出可能如下所示：

npx @11ty/eleventy
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v2.0.1)

我们已经将当前目录中的两个内容模板编译到输出文件夹中（ _site 是默认值）。

五、观察模板 #

使用 --serve 启动热重载本地Web服务器。

npx @11ty/eleventy --serve

你的命令行可能看起来像这样：

E:\code\web\eleventy-sample>npx @11ty/eleventy --serve
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

在浏览器中打开 http://localhost:8080/ 或 http://localhost:8080/README/ 即可实时查看您的 Eleventy 站点！当您保存模板文件时，Eleventy 将自动刷新浏览器并显示您的新更改！

六、将其放到网上（可选） #

将您的新网站上线的最简单方法是前往 Netlify Drop（无需注册帐户），并将您的新 Eleventy 生成的 _site 文件夹拖到 Netlify Drop Web界面。在几秒钟内，您的新网站将在线为任何人看到！

阅读其他一些部署选项。

六、继续学习 #

恭喜—您与 Eleventy 一起做出了一些东西！现在让它发挥作用：

添加更多内容！在上面的教程中，我们使用了 HTML 和 Markdown 。为什么接下来不使用 JavaScript 或 WebC（用于组件）呢？Nunjucks 和 Liquid 也很受欢迎。也许你觉得超级冒险，想添加自己的自定义类型？
使用布局文件，这样你就不必在每个模板上重复样板。
将 CSS、JavaScript 或 Web 字体添加到项目中。
了解 Eleventy 的更多命令行选项。
也许你想在你的项目中使用来自第三方API的数据？

教程和入门项目 #

对于想要建立博客的人，你可以学习如何从头开始（学习它是如何工作的）或使用我们的官方博客启动项目（更快地启动和运行）：

一、 创建项目 eleventy-sample 目录 #