1

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

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

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

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

4

1 回答 1

3

在 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就 11ty 个能够具有“页面”上下文的模板文件而言，该关键字现在是一个特殊关键字。

它包含有关 Oreo 和 Hershey 的嵌套对象结构信息。

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

例如，您可以将一个文件放入项目的主文件夹中，例如，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 （表形）的系统进入命令式嵌套列表和对象形状时，您将不得不处理的第一件事基于系统的系统正在考虑循环数据并以不同的方式选择它。

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

11ty 分页还可以“分块”您的数据集，这样您只需要担心手动循环通过kittens任何给定页面上的给定子块（例如，“小猫档案”，每个档案页面有 10 只小猫）。

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

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

于 2020-11-04T17:01:35.667 回答