本文详解如何使用Eleventy（11ty）将WordPress导出为静态网站（Jamstack架构）。
什么是Eleventy（11ty）
Eleventy（2018年发布）：
- 简单、轻量的静态网站生成器（SSG）
- 支持多种模板语言（Nunjucks/Liquid/Handlebars/Markdown）
- 零客户端JavaScript（性能极致）
- 构建速度：1000页面 < 1秒
vs Hugo/Gatsby：
- Hugo：更快（Go语言），但学习曲线陡
- Gatsby：功能强（React），但复杂
- Eleventy：简单灵活（Node.js），适合中小型项目
为什么静态导出WordPress
优势：
- 性能极致（TTFB < 50ms）
- 安全性高（无PHP/MySQL，无法被黑）
- 托管便宜（静态文件 → GitHub Pages/Cloudflare Pages免费）
- 可扩展性强（CDN缓存）
劣势：
- 无法实时更新（需要重新构建）
- 无用户登录/评论（需要第三方服务）
- 不适合电商（需要动态功能）
实战一：搭建Eleventy项目
安装Eleventy
# 初始化Node.js项目
mkdir wp-static && cd wp-static
npm init -y
安装Eleventy（本地安装）
npm install @11ty/eleventy
安装WordPress REST API客户端
npm install axios
添加到package.json scripts
"scripts": {
"build": "eleventy",
"serve": "eleventy --serve"
}
项目结构
wp-static/
├── _data/ # 全局数据（11ty自动读取）
│ └── posts.js # 从WordPress获取文章
├── _includes/ # 模板部分
│ ├── base.njk # 基础模板
│ └── post.njk # 文章模板
├── index.njk # 首页
├── posts/ # 文章页（动态生成）
│ └── post.njk
├── .eleventy.js # 配置文件
└── package.json
实战二：从WordPress获取数据
创建数据文件（_data/posts.js）
// _data/posts.js
const axios = require('axios');
module.exports = async () => {
try {
const response = await axios.get('https://www.shenma98.com/wp-json/wp/v2/posts', {
params: {
per_page: 100, // 最多100篇
_embed: true, // 嵌入媒体/分类
},
});
return response.data.map(post => ({
id: post.id,
title: post.title.rendered,
slug: post.slug,
content: post.content.rendered,
excerpt: post.excerpt.rendered,
date: post.date,
modified: post.modified,
featuredImage: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || null,
categories: post._embedded?.['wp:term']?.[0]?.map(term => term.name) || [],
author: post._embedded?.author?.[0]?.name || 'Unknown',
}));
} catch (error) {
console.error('获取WordPress数据失败:', error.message);
return [];
}
};
创建分类数据（_data/categories.js）
// _data/categories.js
const axios = require('axios');
module.exports = async () => {
const response = await axios.get('https://www.shenma98.com/wp-json/wp/v2/categories');
return response.data;
};
实战三：创建模板
基础模板（_includes/base.njk）
{% block title %}我的静态网站{% endblock %}
我的静态网站
{% block content %}{% endblock %}
© 2026 我的静态网站
首页模板（index.njk）
---
layout: layouts/base.njk
title: 首页
---
{% block content %}
最新文章
{% for post in posts | reverse | limit(10) %}
-
{% endfor %}
{% endblock %}
文章模板（posts/post.njk）
---
layout: layouts/base.njk
---
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ title }}
作者：{{ author }} | 日期：{{ date | dateFormat }}
{% if featuredImage %}
{% endif %}
{{ content | safe }}
分类：{{ categories | join(', ') }}
评论(0)