Eleventy-Garden 项目教程

Eleventy-Garden 项目教程

eleventy-garden:seedling: A starter site for building a mind garden with eleventy项目地址:https://gitcode.com/gh_mirrors/el/eleventy-garden

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

eleventy-garden/
├── _data/
│   └── data.js
├── assets/
│   ├── css/
│   ├── images/
│   └── js/
├── includes/
│   └── header.njk
├── layouts/
│   └── base.njk
├── notes/
│   └── example-note.md
├── .eleventy.js
├── .eleventyignore
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── about.md
├── index.md
├── package-lock.json
└── package.json

目录结构介绍

• _data/: 存放项目的数据文件，例如 data.js，用于提供全局数据。
• assets/: 存放项目的静态资源，包括 CSS、图片和 JavaScript 文件。
• includes/: 存放项目的包含文件，例如 header.njk，用于在多个页面中重复使用。
• layouts/: 存放项目的布局文件，例如 base.njk，定义了页面的基本结构。
• notes/: 存放项目的笔记文件，例如 example-note.md，用于记录和组织想法。
• .eleventy.js: Eleventy 的配置文件，用于自定义构建过程。
• .eleventyignore: 指定 Eleventy 忽略的文件或目录。
• .gitignore: 指定 Git 忽略的文件或目录。
• CONTRIBUTING.md: 贡献指南，指导如何为项目做出贡献。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• about.md: 关于项目的介绍页面。
• index.md: 项目的首页。
• package-lock.json: 锁定项目依赖的版本。
• package.json: 项目的依赖和脚本配置。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些常用的启动命令：

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

启动命令介绍

• npm start: 启动开发服务器，实时预览项目变化。
• npm run build: 构建项目，生成静态文件。

3. 项目的配置文件介绍

项目的配置文件主要是 .eleventy.js，用于自定义 Eleventy 的行为。以下是一个简单的配置示例：

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

  // 添加自定义短代码
  eleventyConfig.addShortcode("customShortcode", function(name) {
    return `<p>Hello, ${name}!</p>`;
  });

  // 配置模板引擎
  eleventyConfig.setTemplateFormats([
    "md",
    "njk",
    "html"
  ]);

  // 配置输出目录
  return {
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
  };
};

配置文件介绍

• addFilter: 添加自定义过滤器，用于在模板中处理数据。
• addShortcode: 添加自定义短代码，用于在模板中插入动态内容。
• setTemplateFormats: 设置支持的模板格式，例如 Markdown、Nunjucks 和 HTML。
• dir: 配置输入、包含、数据和输出目录。

通过以上配置，你可以根据项目需求自定义 Eleventy 的行为，生成符合你需求的静态网站。

eleventy-garden:seedling: A starter site for building a mind garden with eleventy项目地址:https://gitcode.com/gh_mirrors/el/eleventy-garden