Eleventy 开源项目教程

Eleventy 开源项目教程

eleventyA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址:https://gitcode.com/gh_mirrors/el/eleventy

项目的目录结构及介绍

Eleventy（11ty）是一个简单的静态站点生成器，它将一个包含各种类型模板的目录转换为HTML。以下是一个典型的Eleventy项目的目录结构：

my-project/
├── _includes/
│   ├── layouts/
│   └── partials/
├── src/
│   ├── _data/
│   ├── _includes/
│   ├── assets/
│   ├── css/
│   ├── js/
│   └── index.md
├── .eleventy.js
├── package.json
└── README.md

目录结构介绍

• _includes/：包含布局和部分模板文件。
  • layouts/：存放主要的布局文件，如base.njk。
  • partials/：存放可重用的部分模板，如页眉和页脚。
• src/：源文件目录，包含所有需要被Eleventy处理的文件。
  • _data/：存放全局数据文件，如site.json。
  • _includes/：与根目录下的_includes/类似，但通常用于特定页面的部分模板。
  • assets/：存放静态资源文件，如图片、字体等。
  • css/：存放CSS文件。
  • js/：存放JavaScript文件。
  • index.md：主页的Markdown文件。
• .eleventy.js：Eleventy的配置文件。
• package.json：Node.js项目的配置文件，包含依赖和脚本。
• README.md：项目的说明文档。

项目的启动文件介绍

Eleventy项目的启动通常通过package.json中的脚本来完成。以下是一个典型的package.json文件中的启动脚本：

{
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  }
}

启动脚本介绍

• start：启动开发服务器，使用eleventy --serve命令，实时监听文件变化并自动重新生成站点。
• build：构建生产环境的静态站点，使用eleventy命令。

项目的配置文件介绍

Eleventy的配置文件通常是.eleventy.js。以下是一个典型的.eleventy.js配置文件的内容：

module.exports = function(eleventyConfig) {
  // 添加自定义集合
  eleventyConfig.addCollection("posts", function(collection) {
    return collection.getFilteredByGlob("src/posts/*.md");
  });

  // 添加自定义过滤器
  eleventyConfig.addFilter("customFilter", function(value) {
    return value.toUpperCase();
  });

  // 添加自定义短代码
  eleventyConfig.addShortcode("year", () => {
    return new Date().getFullYear();
  });

  // 添加自定义插件
  eleventyConfig.addPlugin(require("eleventy-plugin-sass"));

  // 设置输入和输出目录
  return {
    dir: {
      input: "src",
      output: "dist"
    }
  };
};

配置文件介绍

• addCollection：添加自定义集合，用于组织和过滤内容。
• addFilter：添加自定义过滤器，用于处理数据。
• addShortcode：添加自定义短代码，用于生成动态内容。
• addPlugin：添加自定义插件，扩展Eleventy的功能。
• dir：设置输入和输出目录，input指定源文件目录，output指定生成的静态站点目录。

通过以上配置，可以灵活地定制Eleventy项目的行为和输出。

eleventyA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址:https://gitcode.com/gh_mirrors/el/eleventy