在你可以跑步之前，先走一个 Eleventy 站点。
在你可以跑步之前，先走一个 Eleventy 站点。
最低限度的入门指南
乙 很多时候我打开文档网站 十一 ，我有这种想哭的冲动，或者转行！所以我决定创建一个小网站，它什么都没有，只有最低限度，并将它作为参考，所以下次我考虑 Eleventy 时，我不必经历他们的赞赏——但很痛苦——开始吧！
最终项目正在进行中 StackBlitz
该计划将涵盖以下内容：
- 十一设置
- 十一个文件夹
_数据文件夹
_包括文件夹 - 前题
- 集合中的多个文件
- 数组中的多个文件
- 液体规格
- 液体包含文件
传递变量
布局区域 - 奖励：先删除文件夹
- 在 GitHub 页面上托管
最低限度
目标是涵盖基础知识，之后在文档中查找细节变得更容易。
- 液体 , 使用 HTML 扩展
- 仅全局安装
- 两种配置，一种用于开发，一种用于发布
- 部署
距离仅文件夹，无管道，无操作 - 默认情况下使用
_数据和_包括 - 没有插件
我也将部署在 Github 页面 ，提醒自己这是多么容易；他们的文件让你相信这是一项军事任务！
十一设置
1. 全局安装 Eleventy
npm install -g @11ty/eleventy
2. 为项目创建一个文件夹，然后 npm 初始化 以备将来使用。如果我们想将其设置为本地安装，或者添加其他包，或者只是保存脚本快捷方式，这将很有帮助
3. 创建 .eleventy.js 配置文件，更改源目录（保持整洁），唯一真正有价值的设置是 addPassthroughCopy ：
// .eleventy.js
module.exports = 功能（eleventyConfig）{
// 这是必须的，通过你的资产
十一配置.addPassthroughCopy("src/assets");
返回 {
目录：{
输入：“src”
// 默认输出是 _site
}
}
};
4. 创建一个 源代码 文件夹并添加您的第一个 HTML
<!DOCTYPE html>
<html>
<body>
<h1>你好世界</h1>
</body>
</html>
5. 运行以下命令之一：
十一在下生成站点_地点文件夹十一——发球生成站点，监视更改并在以下位置启动本地服务器本地主机：8080十一——看生成站点，监视更改，但不启动服务器，由您来启动服务器_地点文件夹110 --config=somethingelse使用不同的配置文件来生成站点。
6. 创建一个新文件： .distconfig.js 在不同的文件夹上构建
// 首先获取 dev 配置
const devConfig = require("./.eleventy.js"); module.exports = 功能（eleventyConfig）{
// 从配置中传递所有内容
常量配置 = devConfig(eleventyConfig); // 设置不同的输出，可以先进行深度克隆，但是工作量太大
返回 {
目录：{
输入：config.dir.input，
输出：“dist”
}
};
};
跑 十一 --config:.distconfig.js ，输出在 距离 文件夹。部署 那 ！
而已。这是最低限度的。但不是很有用吗？让我们添加我们的快捷方式脚本 包.json 然后继续。
// 包.json
{
“脚本”：{
“开始”：“十一——服务”，
"watch": "十一--watch",
“构建”：“eleventy --config=.distconfig.js”
}
}
十一个文件夹
两个文件夹最重要，在里面 源代码 ： _数据 和 _包括 .内容不会被处理，因此它们可以包含所有数据、布局、简码和插件。
_数据 文件夹
文件名是 JavaScript 对象名称 ， 从...开始 东西.json
// src/_data/something.json
{
“名称”：“橙色”
}
这在 HTML 中使用如下：
<div>
<!-- in html, this outputs: orange -->
{{ 某物名称 }}
</div>
如果是数组， 东西.json ：
// src/_data/things.json
[
{
“名称”：“橙色”
},
{
“名称”：“紫色”
}
]
在 HTML 中：
<div>
<!-- in html, any html, this outputs: orange, purple -->
{{ 东西[0].name }}，{{ 东西[1].name }}
</div>
<!-- for loop in liquid -->
<ul>
{% for thing in things %}
<li>{{ 事物名称 }}</li>
{% endfor %}
</ul>
如果是键值， 少东西.json ：
// src/_data/fewthings.json
{
“橙色”：“阳光橙色”，
“紫色”：“深紫色”
}
在 HTML 中：
<p>
<!-- this outputs: sunny orange, dark purple -->
{{几个东西.橙色}}，{{几个东西.紫色}}
</p>
<!-- for loop in liquid, with key-value -->
<ul>
{% for thing in fewthings %}
<!-- first element is key, second is value -->
<li>{{ 事物[0] }}：{{ 事物[1] }}</li>
{% endfor %}
</ul>
_包括 文件夹
_包括 是创建模板的地方。从一个基本的 html 模板开始： base.html .请注意，到目前为止，我们不必创建任何特殊的扩展。开箱即用的唯一模板变量是 {{内容}} .在 HTML 扩展中， 安全的 不需要过滤器，也不会起作用。
<!-- src/_includes/base.html -->
<!DOCTYPE html>
<html>
<head>
<!-- title is a variable that needs to be set in child page -->
<title>{{ 标题 }} | Base 11ty 模板</title>
</head>
<body>
<h1>你好 11ty</h1>
<!-- here is the template literal that passes the content -->
{{ 内容 }}
</body>
</html>
前题
让我们创建我们的第一个文件，最重要的是，最低限度：
<!-- src/index.html -->
---
# 必须在 _includes 文件夹下
布局：“base.html”
# 标题是可选的
标题：“一个新标题”
--- <h2>使用 base html 的基本页面</h2>
要包含另一个文件的内容：
{% 包括 './filelocation/file.html' %}
要创建子布局，就像创建第一个布局一样简单，所有数据都向上馈送：
<!-- src/_includes/color.html -->
---
布局：base.html
---
<div>
<!-- the color variable is fed from pages using this template -->
这是{{颜色}}的详细信息
</div>
{{ 内容 }}
在外面，让我们创建一个文件夹 颜色 和几个 html 文件：
<!-- src/colors/orange.html-->
---
# 使用子布局
布局：color.html
# 将颜色传递给第一个布局
颜色为橙色
# 将标题传递给父布局
标题：橙色
--- <h1>{{ 颜色 }} 页面</h1>
来自一个的多个文件 标签 使用 收藏品
一个 收藏 在十一是一组相似的页面，相似度是基于 标签 财产。这允许我们列出相似的页面，每个 物品 有它自己的 数据 财产。
<!-- src/colors/orange.html, similar purple.html -->
---
布局：color.html
颜色为橙色
标题：橙色
标签： 颜色
--- <h1>{{ 颜色 }} 页面</h1>
在任何地方列出它们，在这里它们被列出 颜色.html 布局
<!-- src/_includes/color.html -->
<h5>所有颜色的列表</h5>
<ul>
<!-- 'collections' is provided by 11ty,
'colors' 是标签属性，
'data' 由 11ty 提供，-->
{% for items in collections.colors %}
<li>{{ item.data.color }}</li>
{% endfor %}
</ul>
十一提供的数据
我们可以用 page.url 比较 收藏[项目].url 挑出列表中的当前项目
<!-- src/_includes/color.html -->
<ul>
{% for items in collections.colors %}
<!-- inline if condition for page.url and item.url, both provided by 11ty -->
<li {% if page.url == item.url %}class="selected"{% endif %}>
<a href="{{item.url}}">{{ item.data.color }}</a>
</li>
{% endfor %}
</ul>
这就是您列出具有相同内容的页面的方式 标签 ，但是太碎片化了。更好的方法是让 Eleventy 循环遍历数据 大批 ，并相应地创建页面。
使用数组中的多个文件 分页
从数组中生成多个 HTML 文件 _数据 文件夹，例如， 东西.json ：
<!-- src/loop.html, use front matter to create multiple files -->
---
布局：“base.html”
分页：
数据：东西
# size 1 为每个项目创建一个页面
尺寸：1
# 给它取别名以使用它的 props
别名：东西
--- {{ 事物名称 }}
这会产生
/_site/loop/index.html （从 URL 中删除 0 索引）
/_site/loop/1/index.html
要将文件名更改为专有名称，我们使用 永久链接 ，注意 / 字符，它会生成一个子文件夹 索引.html ，因此是一个友好的 URL。
<!-- src/loop.html -->
---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
# 使用永久链接修复文件名，使用 slugify 过滤器使名称 slug-ish
永久链接：“循环/{{ thing.name | slugify }}/”
--- {{ 事物名称 }}
这将产生
/_site/loop/orange/index.html
/_site/loop/purple/index.html
如果名字是 自由女神像 ， 这 软化 过滤器将创建： 自由女神像
伟大的。现在到 将道具传回基本模板 ， 我们用 十一计算 在前面，注意属性值的格式：
<!-- src/loop.html -->
---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slug }}/”
# 将标题传回基本模板：使用引号
十一计算：
标题：“{{thing.name}}”
--- {{ 事物名称 }}
列出它们就像循环遍历数组一样简单，不幸的是，将当前页面映射到其中一项需要一点工作。十一提供了一个 分页 在使用它的页面中可用的对象，一个属性是 链接 , 我们可以用来比较 page.url . forloop.index0 是从零开始的数组中项目索引的 Liquid 语法。
<ul>
{% for thing in things %}
<!-- pagination.hrefs is provided by 11ty
forloop.index0 是从零开始的索引的流动语法 -->
<li {% if page.url == pagination.hrefs[forloop.index0] %}class="selected"{% endif %}>
<a href="/loop/{{thing.name | slugify }}">{{ 事物名称 }}</a>
</li>
{% endfor %}
</ul>
液体规格
以下在 Liquid JS 中非常方便：
- 分配一个变量名并使用它
{% 分配一些东西：'漂亮' %} → {{ 某物 }}
-
用多条线打开一个液体区域
{％ 液体
分配 var = 值 |筛选其他流动性报表
%}
液体包含文件
通常情况下，我想结合两个功能：将数组集中在 _数据 ，并拥有编写 HTML 的自由。为此，我们使用 Liquid 包含文件。
要包含另一个文件，另一个 HTML 文件，让我从一个示例开始，在其中包含 HTML 数据文件 _数据 文件夹：
<!-- /_data/things/orange.html, and a similar one purple.html -->
<h4>橙子</h4>
<p>
这是一个丰富的 HTML 内容文件，可以访问流动的模板变量
</p>
在一个 环形 文件，做一个包括：
<!-- src/loop.html -->
<!-- include _data/thingname.html as it is -->
{% 包括 './_data/things/{{thing.name | slugify }}.html' %}
注意：我们必须手动创建文件，并确保文件的名称等于输出 软化 筛选。但更好的方法是在我们的 东西.json 和 蛞蝓 并在任何地方使用它。
传递变量
我们可以在 Liquid 中传递变量并在 HTML 中使用它们：
<!-- src/loop.html -->
---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slugify }}/”
十一计算：
标题：“{{thing.name}}”
---
<!-- pass a property -->
{% 包括 './_data/things/{{thing.name | slugify }}.html'，主题：'dark' %}
然后使用它：
<!-- src/_data/things/orange.html -->
<h4>橙子</h4>
<p>
{{ 主题 }}
</p>
液体布局区域
不支持 Liquid 布局块，但支持模板变量。我们可以在 HTML 页面中创建条件：
<!-- src/_data/things/orange.html -->
{% 案例区域 %}
{% when "header" %}
橙色的标题
{% 当“内容” %}
橙色的内容区域，主题为{{主题}}
{% endcase %}
并在我们的循环中使用它
<!-- src/loop.html -->
---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slugify }}/”
十一计算：
标题：“{{thing.name}}”
---
<!-- include regions -->
<h4>{{ 事物名称 }}</h4>
<!-- liquid island to assign a _filepath variable -->
{％ 液体
分配_slug = thing.name |软化
分配 _filepath = './_data/things/' |附加：_slug |附加：'.html'
%}
<article>
<header>
{% include _filepath', region: 'header' %}
</header>
<div>
<!-- passing extra params are okay -->
{% include _filepath, region: 'content', 主题: 'dark' %}
</div>
</article>
我只需要提醒自己，这可以更进一步，通过在其他地方使用额外的区域。例如，如果我有一个 摘抄 地区，我可以在主页上显示。
<!-- src/_data/things/orange.html -->
{% 案例区域 %}
{% 当“摘录”%}
橙色的简短摘录
{% when "header" %}
橙色的标题
{% 当“内容” %}
橙色的内容区域，主题为{{主题}}
{% endcase %}
在循环：
{% for thing in things %}
<li>
...
添加摘录区域
<div>
{% 包括 './_data/things/{{thing.name | slugify }}.html'，区域：'摘录'%}
</div>
</li>
{% endfor %}
所以这是一个 入门 .一旦我们学会了如何走路，就更容易找到更深层次的东西。一些要寻找的东西：
- 十一 配置 , 具体改为 修女
- Nunjucks 模板 和扩展模板，以及模板区域
- 十一 数据 ，从布局馈送
- 十一个简码、过滤器和插件
奖励：先删除文件夹
一个好处，是删除 _地点 和 距离 在开始和构建之前的文件夹，您可能会在网络上找到其他解决方案，但这是配置文件中最简单的最低要求：
// .eleventy.js
// 从节点获取 fs
常量 fs = 要求（'fs'）; module.exports = 功能（eleventyConfig）{
// rm 同步 _site 文件夹，递归
fs.rmSync('./_site', {recursive: true, force: true});
// ...
}; // .distconfig.js
常量 fs = 要求（'fs'）; module.exports = 功能（eleventyConfig）{ // rm 同步 dist 文件夹
fs.rmSync('./dist', {recursive: true, force: true}); // 记住：这也会删除 _site
常量配置 = devConfig(eleventyConfig);
// ...
};
让我们把它放在 GitHub Pages 上
在 GitHub 页面上托管
- 构建项目：
npm 运行构建 - 将项目推送到 GitHub 存储库（有很多方法可以做到这一点，没有一种方法是直接的，如果你有像 VSCode 这样的可视化界面，它会让事情变得更容易一点）。忽视
_地点文件夹，但允许距离文件夹。没有节点模块最小设置中的文件夹。 - 在 GitHub 存储库中，转到 设置 > 页面
- 在下面 构建和部署 ， 选择 Github 操作 .这将带您到新创建的页面
.github/workflows/pages.yml - 向下滚动到第 39 行（大约）：
工作>部署>步骤>与>路径，并将其更改为./dist - 犯罪
您可能希望在本地提取它以供将来提交。
当你回到 设置 > 页面 ，新的 URL 将显示在顶部。它很可能会是
[ https://[username].github.io/[repositoryname]](/%5Busername%5D.github.io/%5Brepositoryname%5D)
如果您设置自定义域，它将是
[ https://[customdomain]/[repositoryname]](https://%5Bcustomdomain%5D/%5Brepositoryname%5D)
如果您的存储库名称是 [用户名].github.io ，那么 URL 将是
[ https://[客户域名]](https://%5Bcustomedomain%5D)
注意：您只需要为 [用户名].github.io 只需一次，所有新的存储库都可以自动从您的自定义域中提供。
对于自定义域或子域，在您的 DNS 管理器中，设置：
CNAME 记录：
- 名称：www [或子域]，
- 值：[用户名].github.io
添加顶点域（ 万维网 )，还添加：
一个记录：
- 名称：@（或 domain.com）
- 值：185.199.108.153
十一，揭秘。
资源
更好地阅读它 秘密车库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通