机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

eleventy-base-blog 第9版

一个入门仓库，展示如何使用 Eleventy 网站生成器（使用 v3.0 版本）构建博客。

入门

• 想要更通用/更详细的入门指南吗？

1. 创建一个目录并进入它：

mkdir my-blog-name
cd my-blog-name

2. 克隆这个仓库

git clone https://github.com/11ty/eleventy-base-blog.git .

可选: 查看 eleventy.config.js 和 _data/metadata.js 以配置网站的选项和数据。

3. 安装依赖项

npm install

4. Run Eleventy

将生产就绪的构建生成到 _site 文件夹：

npx @11ty/eleventy

或者在本地开发服务器上构建和托管：

npx @11ty/eleventy --serve

或者你可以运行 调试模式 来查看所有内部细节。

功能

• 使用 Eleventy v3 实现零 JavaScript 输出。
  • 内容完全是预渲染的（这是一个静态网站）。
  • 可以轻松部署到子文件夹而不更改任何内容
  • 所有 URL 都与内容在文件系统上的位置解耦。
  • 通过 Eleventy 数据级联 配置模板
• 性能优先：开箱即用的 Lighthouse 分数四百分以上！
  • 0 累积布局偏移
  • 0毫秒 总阻塞时间
• 本地开发实时重载由 Eleventy Dev Server 提供。
• 以内容为驱动的导航菜单
• 全自动图像优化
  • 零 JavaScript 输出。
  • 自动支持现代图像格式（例如 AVIF 和 WebP）
  • 在 --serve 期间按需处理图像，以加快本地构建速度。
  • 如果可能，优先使用 <img> 标记（单图像格式），但在多图像格式时会自动切换到 <picture>。
  • 带有 srcset 和可选 sizes 的自动 <picture> 语法标记
  • 包括 width/height 属性以避免 内容布局偏移。
  • 包含 loading="lazy"，实现无需 JavaScript 的原生懒加载。
  • 包括 decoding="async"
  • 图片可以与博客文章文件放在同一位置。
• 每页 CSS 打包 通过 eleventy-plugin-bundle。
• 内置 语法高亮器（零 JavaScript 输出）。
• 草稿内容：使用 draft: true 将任何模板标记为草稿。草稿仅在 --serve / --watch 中包含，不会出现在完整构建中。这由 addPreprocessor 的配置 API 在 eleventy.config.js 中驱动。如果数据级联中设置非布尔值，模式验证器会显示错误。
• 博客文章
  • 自动下一页/上一页链接
  • 可访问的标题深层链接
• 生成的页面
  • 首页、归档页和关于页。
  • 包含 Atom 提要（可轻松一行切换使用 RSS 或 JSON）
  • sitemap.xml
  • 零维护标签页面 (在演示中查看)
  • 内容未找到（404）页面

演示

• Netlify
• Vercel
• Cloudflare Pages
• GitHub Pages

将其部署到你自己的网站

只需点击几下即可在以下服务上部署此 Eleventy 网站：

• 阅读更多关于部署 Eleventy 项目到网站的信息。
• 将此部署到 Netlify
• 部署到 Vercel
• 查看 .github/workflows/gh-pages.yml.sample 了解有关部署到 GitHub Pages的信息。
• 在 Stackblitz 上试用

实现说明

• content/about/index.md 是一个内容页面示例。
• content/blog/ 包含博客文章，但实际上它们可以放在任何目录中。它们只需要包含 posts 标签即可被包含在博客文章的集合中。
• 在您的 front matter 中使用 eleventyNavigation 键（通过Eleventy 导航插件）将模板添加到顶级站点导航中。这在 content/index.njk 和 content/about/index.md 中都有应用。
• 内容可以是任何模板格式（例如，博客文章不必仅限于 markdown）。在 eleventy.config.js -> templateFormats 配置项目支持的模板。
• 输入目录中的 public 文件夹将复制到输出文件夹（通过 addPassthroughCopy 在 eleventy.config.js 文件中）。这意味着 ./public/css/* 在构建完成后将位于 ./_site/css/*。
• 此项目使用三个Eleventy 布局：
  • _includes/layouts/base.njk：顶层 HTML 结构
  • _includes/layouts/home.njk：主页模板（包含在 base.njk 中）
  • _includes/layouts/post.njk：博客文章模板（包装在 base.njk 中）
• _includes/postslist.njk 是一个 Nunjucks include，是一个可重用组件，用于显示所有文章的列表。content/index.njk 提供了如何使用它的示例。

内容安全策略

如果您的网站实施内容安全策略（如面向公众的网站应如此），您有几个选择（选择其中一个）：

1. 在 base.njk 中，删除 <style>{% getBundle "css" %}</style> 并取消注释 <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
2. 使用 CSP 指令 style-src: 'unsafe-inline' 配置服务器（安全性较低）。