Eleventy 3.0 新特性：虚拟模板的JavaScript支持解析

在静态站点生成器Eleventy的最新3.0版本中，开发团队引入了一项重要功能：对JavaScript虚拟模板的原生支持。这项特性为开发者提供了更灵活的模板构建方式，特别是在需要动态生成内容的场景下。

虚拟模板允许开发者在不创建物理文件的情况下，通过编程方式定义模板内容和行为。Eleventy 3.0通过两种主要形式支持这一功能：

第一种是直接传递渲染函数：

eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
    return `当前页面URL: ${data.page.url}`;
});

第二种是使用包含数据和渲染方法的对象：

eleventyConfig.addTemplate("virtual.11ty.js", {
    data: () => ({ var: 2 }),
    render: function(data) {
        return `变量值为: ${data.var}`;
    }
});

这种设计模式与Eleventy现有的JavaScript模板类型完全兼容，包括：

• 简单的渲染函数
• 包含数据方法的对象
• 完整的JavaScript类（带有data和render方法）

对于需要更复杂逻辑的场景，开发者可以创建自定义类实例：

import CustomTemplate from './custom-template.js';
const template = new CustomTemplate({ /* 配置选项 */ });
eleventyConfig.addTemplate('dynamic.11ty.js', template);

这项特性的优势在于：

1. 减少物理文件数量，保持项目结构简洁
2. 支持更灵活的内容生成逻辑
3. 便于与其他系统或API集成
4. 保持与现有Eleventy模板系统的一致性

对于初学者来说，理解虚拟模板的关键在于认识到它们与传统模板文件的等价性。虚拟模板不是文件系统中的实体，但在Eleventy构建过程中会被同等对待，可以参与数据计算、布局继承等所有标准模板功能。

随着静态站点生成器在复杂项目中的应用越来越广泛，这种编程式的模板定义方式为开发者提供了更大的控制权和灵活性，特别是在需要与外部系统集成或实现复杂业务逻辑的场景下。