Eleventy 图片画廊项目教程

Eleventy 图片画廊项目教程

eleventy-photo-galleryStarter site for creating a responsive image gallery using the Eleventy static site generator项目地址:https://gitcode.com/gh_mirrors/el/eleventy-photo-gallery

1. 项目的目录结构及介绍

eleventy-photo-gallery/
├── _data/
│   └── site.json
├── _includes/
│   ├── layouts/
│   │   └── base.njk
│   └── partials/
│       └── header.njk
├── img/
│   └── gallery/
│       └── example-image.jpg
├── src/
│   ├── _posts/
│   │   └── example-post.md
│   └── index.njk
├── .eleventy.js
├── .gitignore
├── package.json
└── README.md

• _data/: 存放全局数据文件，如 site.json。
• _includes/: 存放模板文件，包括布局文件和部分文件。
• img/: 存放图片文件，特别是画廊图片。
• src/: 源代码目录，包括文章和主页模板。
• .eleventy.js: Eleventy 配置文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置。以下是一些常见的启动命令：

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

• start: 启动开发服务器，实时预览更改。
• build: 构建生产环境下的静态站点。

3. 项目的配置文件介绍

.eleventy.js 是 Eleventy 的主要配置文件。以下是一个简单的配置示例：

module.exports = function(eleventyConfig) {
  // 添加自定义短代码
  eleventyConfig.addShortcode("image", async function(src, alt, lazy = true) {
    const Image = require("@11ty/eleventy-img");
    let metadata = await Image(src, {
      widths: [512, 1024, 2048],
      outputDir: "/_site/img/"
    });
    let imageAttributes = {
      alt,
      sizes: "100vw",
      loading: lazy ? "lazy" : "eager",
      decoding: "async"
    };
    return Image.generateHTML(metadata, imageAttributes);
  });

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

  return {
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
  };
};

• addShortcode: 添加自定义短代码，如 image 短代码用于生成响应式图片。
• addFilter: 添加自定义过滤器，如 exampleFilter 过滤器用于字符串转换。
• dir: 配置输入、包含、数据和输出目录的路径。

以上是 Eleventy 图片画廊项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

eleventy-photo-galleryStarter site for creating a responsive image gallery using the Eleventy static site generator项目地址:https://gitcode.com/gh_mirrors/el/eleventy-photo-gallery