在你可以跑步之前，先走一个 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




你好世界



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 中使用如下：



{{ 某物名称 }}

如果是数组， 东西.json ：

// src/_data/things.json
[
{
“名称”：“橙色”
},
{
“名称”：“紫色”
}
]

在 HTML 中：



{{ 东西[0].name }}，{{ 东西[1].name }}



    {% for thing in things %}
  • {{ 事物名称 }}

    • {% endfor %}

如果是键值， 少东西.json ：

// src/_data/fewthings.json
{
“橙色”：“阳光橙色”，
“紫色”：“深紫色”
}

在 HTML 中：



{{几个东西.橙色}}，{{几个东西.紫色}}




    {% for thing in fewthings %}

  • {{ 事物[0] }}：{{ 事物[1] }}

    • {% endfor %}

_包括 文件夹

_包括 是创建模板的地方。从一个基本的 html 模板开始： base.html .请注意，到目前为止，我们不必创建任何特殊的扩展。开箱即用的唯一模板变量是 {{内容}} .在 HTML 扩展中， 安全的 不需要过滤器，也不会起作用。






{{ 标题 }} | Base 11ty 模板


你好 11ty



{{ 内容 }}

前题

让我们创建我们的第一个文件，最重要的是，最低限度：


---
# 必须在 _includes 文件夹下
布局：“base.html”
# 标题是可选的
标题：“一个新标题”
---

使用 base html 的基本页面

要包含另一个文件的内容：

{% 包括 './filelocation/file.html' %}

要创建子布局，就像创建第一个布局一样简单，所有数据都向上馈送：


---
布局：base.html
---



这是{{颜色}}的详细信息

{{ 内容 }}

在外面，让我们创建一个文件夹 颜色 和几个 html 文件：


---
# 使用子布局
布局：color.html
# 将颜色传递给第一个布局
颜色为橙色
# 将标题传递给父布局
标题：橙色
---

{{ 颜色 }} 页面

来自一个的多个文件 标签 使用 收藏品

一个 收藏 在十一是一组相似的页面，相似度是基于 标签 财产。这允许我们列出相似的页面，每个 物品 有它自己的 数据 财产。


---
布局：color.html
颜色为橙色
标题：橙色
标签： 颜色
---

{{ 颜色 }} 页面

在任何地方列出它们，在这里它们被列出 颜色.html 布局


所有颜色的列表



    {% for items in collections.colors %}
  • {{ item.data.color }}

    • {% endfor %}

十一提供的数据

我们可以用 page.url 比较 收藏[项目].url 挑出列表中的当前项目



    {% for items in collections.colors %}

    <li {% if page.url == item.url %}class="selected"{% endif %}>
    {{ item.data.color }}

    {% endfor %}

这就是您列出具有相同内容的页面的方式 标签 ，但是太碎片化了。更好的方法是让 Eleventy 循环遍历数据 大批 ，并相应地创建页面。

使用数组中的多个文件 分页

从数组中生成多个 HTML 文件 _数据 文件夹，例如， 东西.json ：


---
布局：“base.html”
分页：
数据：东西
# size 1 为每个项目创建一个页面
尺寸：1
# 给它取别名以使用它的 props
别名：东西
--- {{ 事物名称 }}

这会产生

/_site/loop/index.html （从 URL 中删除 0 索引）

/_site/loop/1/index.html

要将文件名更改为专有名称，我们使用 永久链接 ，注意 / 字符，它会生成一个子文件夹 索引.html ，因此是一个友好的 URL。


---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
# 使用永久链接修复文件名，使用 slugify 过滤器使名称 slug-ish
永久链接：“循环/{{ thing.name | slugify }}/”
--- {{ 事物名称 }}

这将产生

/_site/loop/orange/index.html

/_site/loop/purple/index.html

如果名字是 自由女神像 ， 这 软化 过滤器将创建： 自由女神像

伟大的。现在到 将道具传回基本模板 ， 我们用 十一计算 在前面，注意属性值的格式：


---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slug }}/”
# 将标题传回基本模板：使用引号
十一计算：
标题：“{{thing.name}}”
--- {{ 事物名称 }}

列出它们就像循环遍历数组一样简单，不幸的是，将当前页面映射到其中一项需要一点工作。十一提供了一个 分页 在使用它的页面中可用的对象，一个属性是 链接 , 我们可以用来比较 page.url . forloop.index0 是从零开始的数组中项目索引的 Liquid 语法。


    {% for thing in things %}

    <li {% if page.url == pagination.hrefs[forloop.index0] %}class="selected"{% endif %}>
    {{ 事物名称 }}

    {% endfor %}

液体规格

以下在 Liquid JS 中非常方便：

  • 分配一个变量名并使用它

{% 分配一些东西：'漂亮' %} → {{ 某物 }}

  • 用多条线打开一个液体区域

    {％ 液体
    分配 var = 值 |筛选

    其他流动性报表

    %}

液体包含文件

通常情况下，我想结合两个功能：将数组集中在 _数据 ，并拥有编写 HTML 的自由。为此，我们使用 Liquid 包含文件。

要包含另一个文件，另一个 HTML 文件，让我从一个示例开始，在其中包含 HTML 数据文件 _数据 文件夹：


橙子



这是一个丰富的 HTML 内容文件，可以访问流动的模板变量

在一个 环形 文件，做一个包括：



{% 包括 './_data/things/{{thing.name | slugify }}.html' %}

注意：我们必须手动创建文件，并确保文件的名称等于输出 软化 筛选。但更好的方法是在我们的 东西.json 和 蛞蝓 并在任何地方使用它。

传递变量

我们可以在 Liquid 中传递变量并在 HTML 中使用它们：


---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slugify }}/”
十一计算：
标题：“{{thing.name}}”
---

{% 包括 './_data/things/{{thing.name | slugify }}.html'，主题：'dark' %}

然后使用它：


橙子



{{ 主题 }}

液体布局区域

不支持 Liquid 布局块，但支持模板变量。我们可以在 HTML 页面中创建条件：


{% 案例区域 %}
{% when "header" %}
橙色的标题
{% 当“内容” %}
橙色的内容区域，主题为{{主题}}
{% endcase %}

并在我们的循环中使用它


---
布局：“base.html”
分页：
数据：东西
尺寸：1
别名：东西
永久链接：“循环/{{ thing.name | slugify }}/”
十一计算：
标题：“{{thing.name}}”
---

{{ 事物名称 }}



{％ 液体
分配_slug = thing.name |软化
分配 _filepath = './_data/things/' |附加：_slug |附加：'.html'
%}


{% include _filepath', region: 'header' %}



{% include _filepath, region: 'content', 主题: 'dark' %}

我只需要提醒自己，这可以更进一步，通过在其他地方使用额外的区域。例如，如果我有一个 摘抄 地区，我可以在主页上显示。


{% 案例区域 %}
{% 当“摘录”%}
橙色的简短摘录
{% when "header" %}
橙色的标题
{% 当“内容” %}
橙色的内容区域，主题为{{主题}}
{% endcase %}

在循环：

{% for thing in things %}


  • ...
    添加摘录区域

    {% 包括 './_data/things/{{thing.name | slugify }}.html'，区域：'摘录'%}


    • {% 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 页面上托管

    1. 构建项目： npm 运行构建
    2. 将项目推送到 GitHub 存储库（有很多方法可以做到这一点，没有一种方法是直接的，如果你有像 VSCode 这样的可视化界面，它会让事情变得更容易一点）。忽视 _地点 文件夹，但允许 距离 文件夹。没有 节点模块 最小设置中的文件夹。
    3. 在 GitHub 存储库中，转到 设置 > 页面
    4. 在下面 构建和部署 ， 选择 Github 操作 .这将带您到新创建的页面 .github/workflows/pages.yml
    5. 向下滚动到第 39 行（大约）： 工作>部署>步骤>与>路径 ，并将其更改为 ./dist
    6. 犯罪

    您可能希望在本地提取它以供将来提交。

    当你回到 设置 > 页面 ，新的 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

    所以这是我们的项目 GitHub , 并托管在 页面 .

    十一，揭秘。

    资源

    更好地阅读它 秘密车库

    版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

    本文链接：https://www.qanswer.top/18476/39050608

    posted @ 2022-09-06 08:40  哈哈哈来了啊啊啊  阅读(172)  评论(0)    收藏  举报