@aaashur/eleventy-plugin-define-page-data 中文文档教程

Question

eleventy-plugin-define-page-data

一个 Eleventy 数据插件，使用 page 数据对象使任何数据可用于简码。

Setup

要安装此插件，请在 Eleventy 项目的根目录下运行以下命令：

npm install --save @aaashur/eleventy-plugin-define-page-data

接下来，将插件导入 .eleventy.js 配置文件：

const definePageData = require("@aaashur/eleventy-plugin-define-page-data");

最后，在导出的配置函数中的某处注册插件：

module.exports = eleventyConfig =>
{
    eleventyConfig.addPlugin(definePageData);

    // ...
};

Usage

使用 definePageData 短代码创建一个新的页面数据变量：

{% definePageData key, value %}

例如：

{% definePageData "prefersEmoji", false %}

使用 definePageData添加到 page 对象的数据被命名空间以防止踩踏现有Eleventy 创建和使用的数据属性。 默认情况下，使用 data 命名空间：

{
    date: new Date(),
    inputPath: "./current/page/myFile.md",
    fileSlug: "myFile",
    filePathStem: "/current/page/myFile",
    url: "/current/page/myFile/",
    outputPath: "./_site/current/page/myFile/index.html",

    data: {
        prefersEmoji: false
    }
}

要在短代码源中访问此数据，请使用 this.page.data：

/**
 * Add random emoji to the end of a string
 * @param {string} text
 * @returns {string}
 */
eleventyConfig.addShortcode( "emojify", function(text)
{
    if( !this.page.data.prefersEmoji )
    {
        return text;
    }
    else
    {
        // ...
    }
});

??? 注意 — 您必须使用传统的 function() 而不是箭头函数来定义简码，以便 Eleventy 能够 绑定页面数据到你的简码。

definePageData 短代码还支持使用点符号定义嵌套属性：

{% definePageData "user.preferences.prefersEmoji", false %}

{
    // ...

    data: {
        user: {
            preferences: {
                prefersEmoji: false
            }
        }
    }
}

Namespace

将可选的第三个参数传递给 definePageData 以指定自定义命名空间而不是默认的 data ：

{% definePageData key, value, namespace %}

例如：

{% definePageData "prefersEmoji", false, "customData" %}

{
    // ...

    customData: {
        prefersEmoji: false
    }
}