使用Eleventy构建静态站点生成页面：从入门到实践
随着互联网的快速发展，静态站点生成器（Static Site Generator，SSG）因其快速部署、易于维护和良好的SEO表现而受到越来越多的关注。Eleventy是一款流行的静态站点生成器，它基于Node.js，具有简洁的API和强大的插件系统。本文将围绕Eleventy，从入门到实践，详细介绍如何使用它来构建静态站点。
一、Eleventy简介
Eleventy是一个轻量级的静态站点生成器，它可以帮助开发者快速构建静态网站。Eleventy的特点如下：
- 简单易用：Eleventy的API简洁明了，易于上手。
- 插件系统：Eleventy支持丰富的插件，可以扩展其功能。
- 模板引擎：Eleventy支持多种模板引擎，如Handlebars、EJS等。
- 预处理器：Eleventy支持预处理器，如Markdown、Liquid等。
- 缓存机制：Eleventy具有缓存机制，可以提高构建速度。
二、安装与配置
1. 安装Node.js
确保你的计算机上安装了Node.js。你可以从[Node.js官网](https://nodejs.org/)下载并安装。
2. 创建项目目录
在终端中，创建一个新的项目目录，并进入该目录：
bash
mkdir my-eleventy-site
cd my-eleventy-site
3. 初始化npm项目
在项目目录中，运行以下命令初始化npm项目：
bash
npm init -y
4. 安装Eleventy
接下来，安装Eleventy：
bash
npm install @11ty/eleventy --save-dev
5. 配置eleventy.js
在项目根目录下创建一个名为`eleventy.js`的文件，这是Eleventy的配置文件。以下是`eleventy.js`的基本配置：
javascript
const eleventy = require('@11ty/eleventy');
module.exports = eleventy.config;
// 配置模板引擎
eleventy.setConfig({
templateFormats: ['njk', 'md', 'html'],
});
// 配置插件
eleventy.setConfig({
passthroughFileCopy: true,
});
三、创建页面
1. 创建模板
在项目根目录下创建一个名为`_includes`的文件夹，用于存放模板文件。在这个文件夹中，创建一个名为`header.njk`的文件，作为页面的头部模板：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<header>
<h1>{{ title }}</h1>
</header>
<main>
{{ content }}
</main>
</body>
</html>
2. 创建页面内容
在项目根目录下创建一个名为`_pages`的文件夹，用于存放页面内容。在这个文件夹中，创建一个名为`index.njk`的文件，作为首页内容：
html
{% extends "_includes/header.njk" %}
{% block content %}
<h2>欢迎来到我的Eleventy站点</h2>
<p>这是一个使用Eleventy构建的静态站点。</p>
{% endblock %}
3. 创建布局
在`_includes`文件夹中，创建一个名为`layout.njk`的文件，作为页面的布局模板：
html
{% extends "header.njk" %}
{% block content %}
{{ content }}
{% endblock %}
4. 创建首页
在`_pages`文件夹中，创建一个名为`index.njk`的文件，并使用`layout.njk`作为布局：
html
{% extends "layout.njk" %}
{% block content %}
<h2>欢迎来到我的Eleventy站点</h2>
<p>这是一个使用Eleventy构建的静态站点。</p>
{% endblock %}
四、构建站点
在终端中，运行以下命令构建站点：
bash
npx eleventy
构建完成后，Eleventy会在项目根目录下生成一个名为`_site`的文件夹，其中包含了构建好的静态网站。
五、部署站点
将`_site`文件夹中的内容上传到你的服务器或云存储服务，即可完成站点的部署。
六、总结
本文介绍了如何使用Eleventy构建静态站点。通过学习本文，你将了解到Eleventy的基本概念、安装配置、页面创建和部署方法。希望本文能帮助你快速上手Eleventy，并构建出属于自己的静态站点。
七、扩展阅读
- [Eleventy官方文档](https://www.11tyjs.org/docs/)
- [Eleventy插件列表](https://www.11tyjs.org/docs/plugins/)
- [静态站点生成器比较](https://www.staticgen.com/)
通过不断学习和实践，你将能够更好地掌握Eleventy，并构建出更加优秀的静态站点。
Comments NOTHING