npm 包 eleventy-plugin-yamldata 使用教程

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

安装

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

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

使用

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

const eleventyPluginYamlData = require("eleventy-plugin-yamldata");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyPluginYamlData);
};

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

---
myData: yamlData("./src/data/my-data.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 文件中添加以下代码：

const eleventyPluginYamlData = require("eleventy-plugin-yamldata");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyPluginYamlData);
};

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

title: "我的 eleventy 项目"
description: "eleventy 是一个基于 JavaScript 的静态网站生成器"

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

---
data:
  myData: yamlData("./src/data/my-data.yaml")
---
<h1>{{ myData.title }}</h1>
<p>{{ myData.description }}</p>

1. 运行项目：

npx eleventy

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

<h1>我的 eleventy 项目</h1>
<p>eleventy 是一个基于 JavaScript 的静态网站生成器</p>

总结

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

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ead9381d61a3540c08