npm 包 eleventy-plugin-yamldata 使用教程

eleventy-plugin-yamldata 是一个 npm 包，它是一个 eleventy 插件，可以轻松地获取 yml 格式的数据，使你能够更方便地在 eleventy 项目中使用数据。

安装

你可以使用 npm 在你的项目中安装 eleventy-plugin-yamldata:

--- ------- ------------------------ ----------

使用

1. 首先，你需要在 eleventy 的配置文件中添加 eleventy-plugin-yamldata 插件。在 .eleventy.js 文件中添加以下代码：

----- ---------------------- - ------------------------------------

-------------- - ------------------------ -
  -------------------------------------------------
--

1. 在你的 eleventy 配置文件中，你现在可以使用以下语法引用 yaml 文件：

---
------- -----------------------------------
---

这将返回一个对象，其中包含 yaml 文件中的数据。 在这个例子中，对象将被命名为 "myData"。

示例代码

你可以按照下面的步骤来创建一个 eleventy 项目，然后使用 eleventy-plugin-yamldata 插件引用并使用 yaml 文件中的数据：

1. mkdir my-eleventy-project

2. cd my-eleventy-project

3. npm init

4. npm install --save-dev eleventy eleventy-plugin-yamldata

5. 在 .eleventy.js 文件中添加以下代码：

----- ---------------------- - ------------------------------------

-------------- - ------------------------ -
  -------------------------------------------------
--

1. 在 src/data/my-data.yaml 文件中添加以下内容：

------ --- -------- ---
------------ --------- ----- ---------- ---------

1. 在 src/index.njk 文件中添加以下内容：

---
-----
  ------- -----------------------------------
---
------ ------------ -------
----- ------------------ ------

1. 运行项目：

--- --------

1. 你现在将在生成的 _site/index.html 文件中看到以下内容：

------ -------- -------
----------- ----- ---------- ------------

总结

通过 eleventy-plugin-yamldata 插件，你可以轻松地在 eleventy 项目中使用 yaml 文件中的数据。这为 eleventy 项目带来了更加方便和灵活的数据管理方式。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ead9381d61a3540c08