入门 Jump to heading
Eleventy 可通过 npm 安装 ,需要 Node.js 12 或更高版本才能运行。
当你运行以下命令时,不要添加 ~ $
或 ~/eleventy-sample $
字样。
步骤 1 创建一个目录 Jump to heading
首先为你的新项目创建一个目录。
mkdir eleventy-sample
cd eleventy-sample
执行上述命令后,你就进入到新项目的目录下了。
步骤 2 安装 Eleventy Jump to heading
创建 package.json 文件 Jump to heading
我们需要一个 package.json
文件才能为新项目安装 Eleventy。因此,我们利用 npm init
创建此文件。-y
参数是告诉 npm 跳过所有提问并使用默认值创建 package.json
文件。
npm init -y
安装 Eleventy 并写入 package.json 文件中 Jump to heading
现在,执行以下命令,我们就可以安装 Eleventy 并写入到项目下的 package.json
文件中了:
npm install --save-dev @11ty/eleventy
推荐安装到项目本地,不建议 安装到系统全局。
步骤 3 运行 Eleventy Jump to heading
我们可以使用 npx 运行本地安装的 Eleventy。通过运行以下命令来测试是否正确安装了 Eleventy:
npx @11ty/eleventy
Wrote 0 files in 0.03 seconds (v1.0.2)
如果你在输出中看到了 (v1.0.2)
字样,这说明你使用的是最新版本的 Eleventy。不过,此时 Eleventy 并没有处理任何文件,这很正常,因为我们还没有创建任何文件呢。
步骤 4 创建一些模板 Jump to heading
在 Eleventy 的世界里,一个 模板(template) 就是一个以某种格式 (例如 Markdown、HTML、Liquid、Nunjucks 等 )书写的文件,Eleventy 在构建网站时会将这些文件转换为一个个页面(page)。
让我们运行以下命令来新建两个模板文件:
echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
echo '# Page header' > README.md
现在,我们创建了一个 HTML 模板和一个 markdown 模板。让我们再次运行 Eleventy:
npx @11ty/eleventy
Writing _site/README/index.html from ./README.md
Writing _site/index.html from ./index.html
Processed 2 files in 0.12 seconds (v1.0.2)
这将把当前目录及其子目录下的所有模板编译并输出到用来保存编译结果的目录下(默认是 _site
目录)。
步骤 5 监测模板的修改 Jump to heading
使用 --serve
参数来启动一个支持热加载(hot-reloading)的本地 web 服务。
npx @11ty/eleventy --serve
Writing _site/README/index.html from ./README.md
Writing _site/index.html from ./index.html
Processed 2 files in 0.12 seconds (v1.0.2)
Watching…
(some output truncated)
[Browsersync] Serving files from: _site
在浏览器中打开 http://localhost:8080/
或 http://localhost:8080/README/
链接即可看到正在运行中的 Eleventy 生成的网站了! 对模板文件的任何修改和保存,Eleventy 将利用 BrowserSync 自动刷新页面并呈现修改后的结果。
<body>
标签 才能让自动刷新功能正常工作。解决办法是使用 布局(Layouts) 来为 Markdown 内容添加 <body>
标签。恭喜!你已经用 Eleventy 创建了第一个网站!接下来学习如何使用模板语法、front matter 以及数据文件吧!