11ty-landing-page 的安装和配置教程

项目基础介绍

11ty-landing-page 是一个使用 11ty 和 Tailwind CSS 构建的基础着陆页模板。它适用于需要快速搭建个人或企业展示页面的开发者。该项目主要使用 JavaScript 进行开发，同时利用了 Nunjucks 模板引擎和 CSS 进行样式设计。

项目使用的关键技术和框架

• 11ty: 一个静态网站生成器，能够将标记模板和样式表转换为静态 HTML 文件。
• Tailwind CSS: 一个功能类优先的 CSS 框架，用于快速UI开发。
• Nunjucks: 一个 templating 语言，用于在 HTML 中嵌入变量和逻辑。

项目安装和配置的准备工作

在开始安装之前，请确保您的系统中已经安装了以下依赖：

• Node.js (建议使用 LTS 版本)
• npm (Node.js 的包管理器)

安装步骤

1. 克隆或下载项目: 你可以通过 GitHub 提供的“Fork”按钮来复制项目，然后克隆到本地环境。

   git clone https://github.com/ttntm/11ty-landing-page.git
   

2. 安装依赖: 进入项目目录后，使用 npm 来安装项目所需的依赖。

   cd 11ty-landing-page
   npm install
   

3. 启动开发服务器: 安装完依赖后，你可以启动一个本地服务器来预览页面。

   npm run serve
   

   运行上述命令后，本地服务器默认会在 8080 端口启动，你可以通过浏览器访问 http://localhost:8080 来查看页面。

4. 配置项目: 如果需要对项目进行自定义配置，你可以编辑以下文件：

   • ./.eleventy.js: 11ty 的配置文件。
   • ./tailwind.config.js: Tailwind CSS 的配置文件。
   • ./netlify.toml: 如果你在 Netlify 上部署，这个文件用于配置 Netlify 设置。

5. 修改内容: 页面内容存储在 ./src/ 目录下，你可以编辑以下文件来修改内容：

   • 页面内容 (./src/imprint.md, ./src/privacy.md)
   • 特性数据 (./src/_data/features.json)
   • 页面结构和模板 (./src/_layouts/)
   • 图片 (./static/img/)

6. 构建项目: 当你完成所有的修改后，可以构建项目来生成静态文件。

   npm run build
   

   构建后的静态文件会放在 ./_site/ 目录下。

以上就是 11ty-landing-page 的安装和配置教程，按照上述步骤操作后，你将能够成功搭建并运行一个着陆页。