11ty-landing-page 项目启动与配置教程

1. 项目目录结构及介绍

11ty-landing-page 是一个基于 11ty 和 Tailwind CSS 的简单落地页模板。以下是项目的目录结构及其介绍：

11ty-landing-page/
├── .github/                    # GitHub 仓库相关文件
├── docs/                      # 文档文件夹
├── src/                       # 源代码文件夹
│   ├── _data/                 # 数据文件夹，用于存储 JSON 格式的数据
│   ├── _includes/             # 包含文件夹，用于存储可复用的模板片段
│   ├── _layouts/              # 布局文件夹，用于存储页面的布局模板
│   ├── css/                   # CSS 文件夹
│   ├── img/                   # 图片文件夹
│   ├── static/                # 静态文件文件夹
│   ├── imprint.md             # 印记页面内容文件
│   ├── privacy.md             # 隐私政策页面内容文件
│   └── index.njk              # 主页模板文件
├── .gitignore                 # Git 忽略文件列表
├── .nvmrc                     # Node.js 版本管理文件
├── LICENSE                    # 开源协议文件
├── README.md                  # 项目说明文件
├── eleventy.config.js         # 11ty 配置文件
├── package-lock.json          # 包版本锁定文件
├── package.json               # 项目包配置文件
└── tailwind.config.cjs        # Tailwind CSS 配置文件

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的脚本实现。以下是项目启动文件的介绍：

• package.json：此文件定义了项目的依赖和脚本。其中 scripts 部分包含了启动开发服务器的命令。

"scripts": {
  "serve": "eleventy --serve"
}

要启动项目，运行以下命令：

npm run serve

这将会启动一个本地服务器，通常在 http://localhost:8080 地址上可以访问。

3. 项目的配置文件介绍

项目的配置主要通过以下几个文件进行：

• eleventy.config.js：11ty 的配置文件，用于自定义 11ty 的行为，如设置模板引擎、添加插件等。

module.exports = function (eleventyConfig) {
  // 11ty 配置代码
};

• tailwind.config.cjs：Tailwind CSS 的配置文件，用于定制 Tailwind 的行为，如设置颜色主题、字体等。

module.exports = {
  // Tailwind 配置代码
};

这些配置文件通常在项目初始化时根据官方文档或模板提示进行设置，以满足个性化的项目需求。