如何在 11ty 静态站点生成器中创建动态列表？答案

【问题标题】：How to create dynamic lists in 11ty static site generator?如何在 11ty 静态站点生成器中创建动态列表？
【发布时间】：2021-02-16 10:23:19
【问题描述】：

我正在创建一个新网站，我希望能够使用 Vim 编辑我的内容。这意味着我可能应该使用静态站点生成器 - 对吧？过去十年我一直在使用 Drupal，但由于我不需要为客户提供 gui 来编辑他们的内容，所以我正在考虑使用不同的技术。

11ty 看起来像一个相当简单的静态站点生成器，并且能够在 Vim 中以 markdown 键入我的内容、运行一个简单的命令、git commit 和推送以发布内容的能力非常吸引人。

但我想知道更多动态/自动化的内容......就像在 Drupal 中有“视图”，它们是 SQL 查询（并且可能非常复杂，它提供了一个用于构建它们并格式化它们的结果的 gui）用于显示最近的帖子，即将发生的事件等。您如何在 11ty 中创建此类元素？ 11ty一个人能做到吗？您是否必须使用带有 11ty 的 vue.js 之类的东西才能做到这一点？

我愿意使用不同的静态网站生成器（我什至考虑使用 Drupal 并发布到网站的 Rest API），但我不想处理 reactjs。

【问题讨论】：

标签： eleventy

【解决方案1】：

在 11ty 中处理“数据”的核心和灵魂是将内容放入 .json 或 .js 文件中，这些文件将 JavaScript 对象导出到项目的 _data 文件夹中。

假设您有一个名为 kittens.js 的文件，如下所示：

const kittens = [
 {
  name: 'Oreo',
  colors: ['black','white'],
  slug: 'oreo'
 },
 {
  name: 'Hershey',
  colors: ['brown'],
  slug: 'hershey'
 }
];

module.exports = () => {
  return kittens;
};

关键字 kittens 现在是一个特殊关键字，就 11 个能够具有“页面”上下文的模板文件而言。

它包含有关奥利奥和好时的嵌套对象结构信息。

您所要做的就是选择一种模板语言并循环遍历它。

例如，您可以像这样将一个文件放入项目的主文件夹中，例如 loop_kittens.liquid，然后 11ty 会将其作为应该生成 HTML 的内容来选择：

---
layout: "layouts/my_base"
pagination:
  alias: documentData
  data: kittens
  size: 1
  addAllPagesToCollections: true
permalink: /kitten/{{ documentData.slug }}/index.html
---

<h1>{{documentData.name}}</h1>
<ul>
  {% for color in documentData.colors %}
    <li>color</li>
  {% endfor %}
</ul>

我对 Drupal 不熟悉，但在来自任何基于声明性 SQL 的 （表形） 系统和进入基于命令式嵌套列表和对象形状的系统正在考虑循环数据并以不同方式选择它。

您甚至可能希望预处理这些 _data-文件夹文件中的原始数据，以便以针对传统手动 for 循环进行优化的方式将其导出到 kittens（尽管将大小设置为 1 的模板的“分页”属性肯定有助于隐藏将数据集划分为需要生成的单个 HTML 页面的复杂性）.

11ty 分页还可以“分块”您的数据集，因此您只需要担心在任何给定页面上手动循环遍历给定的 kittens 子块（例如，“小猫档案”，每个 10 只小猫存档页面）.

但就实际在每个页面上为每只小猫放置一个块而言，这将是您模板中的手动 for 循环，无论您选择哪种模板语言。（我发现 Liquid 在简单性和能够将 for 循环的每次传递中的内容委托给“include”之间取得了很好的平衡，以维护模块化、组件化的代码——请参阅“dynamic partials "。)

我建议您像我刚才所做的那样制作您自己的虚拟数据，并在您开始尝试做一个真正的项目之前，在练习网站上练习使用 11ty 的所有许多模板、布局、组件包含等选项。 11ty 不是一个非常固执己见的框架，所以最好选择自己喜欢的方式来组织它并了解它的魔法文件夹命名约定。

【讨论】：

谢谢！这是一个有帮助的开始...但是我的页面（在.md 文件中包含降价）如何与这些.js 数据文件和_data 文件夹相关？
@alec 我设想他们而不是拥有一堆.md 文件。但事实证明，如果需要，您还可以将特殊的 .11tydata.js 和 11tydata.json 文件放在包含 .md 文件的文件夹中，作为一种“这里有一些共同的属性”附加组件。好的，所以...如果您有/kittens/oreo.md 和/kittens/hershey.md，并且您只是想要一个<ul>，每个<li> 上有他们的名字，您只需...写一个包含，例如@ 987654344@ 类似<ul>{% for kitten in kittens %}<li>{{ kitten.name }}</li>{% endfor %}</ul>。
因为 11ty 本身会负责从文件夹中的 .md 文件中生成 URL —— 你必须使用它才能让它停止。 @alec，如果您想针对基于.md 的数据（例如kittens）进行某种辅助自动URL 生成（例如/kitten_archives/1、/kitten_archives/2...），那就是更多地做一些像我原来的模式这样的事情可能是有意义的。就是说，我不记得了，但语法更像是 collections.all.kittens 用于从您的 /kittens/*.md 文件夹构建的一个 11ty，但只是 kittens 用于 _data 或其他东西。
Gaah -- 不可编辑的评论。 @alec 我设想他们而不是拥有一堆.md 文件。使用/kittens/oreo.md 和/kittens/hershey.md，如果你想要一个<ul>，每个<li> 上都有他们的名字，你只需......写一个包含/_includes/quick_kitten_list.liquid 的内容，类似于<ul>{% for kitten in kittens %}<li>{{ kitten.name }}</li>{% endfor %}</ul>。此外，仅供参考...如果需要更改 11ty 的默认“永久链接”，例如 /kittens/*.md，您可以添加 /kittens/kittens.11tydata.js 和/或 /kittens/kittens11tydata.json 文件，而不是多余的前面事项。