Eleventy启动器

starter-project-eleventy — Eleventy 启动器模板

作者 FrankUsqAbant

基于 Eleventy（11ty）与 Nunjucks 的静态站点启动模板，含深浅色主题、带实时搜索的博客与 Markdown 阅读进度条，构建输出到 docs/ 目录，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Eleventy（11ty）+ Nunjucks 静态站点模板，构建输出到 docs/ 目录

02

内置深色/浅色主题切换，选择状态保存在 localStorage

03

博客支持按文本与分类实时过滤搜索

04

Markdown 文章带阅读进度条

05

样式使用 glassmorphism 效果与 Plus Jakarta Sans 字体

06

图片以 WebP 格式存放于 code/img/

模板详细介绍

这是一个 Eleventy（11ty）启动器模板，模板语言为 Nunjucks，页面与文章分别以 .njk 和 Markdown 编写。仓库 README 说明其定位为静态站点基础模板，构建产物输出到 docs/ 目录，便于直接用于 GitHub Pages 部署，并提供了已部署的演示站点链接。

功能方面，模板内置深色/浅色主题切换（通过 localStorage 保存选择）、按文本与分类（如书籍、电影）实时过滤的博客搜索、Markdown 文章阅读进度条，以及 glassmorphism 风格样式与 Plus Jakarta Sans 字体。图片资源以 WebP 格式存放在 code/img/ 下。

项目结构上，code/ 目录包含 _includes（header、menu、footer、布局等组件）、css、js、img 以及页面与文章文件，根目录的 .eleventy.js 为 11ty 配置。npm 脚本提供 start（本地开发与实时重载）、deploy（编译到 docs/）和 clean（清理 docs/）。

限制与注意事项：README 中关于 Lighthouse 满分、性能与“生产就绪”的表述属于作者自述，未在本资料中独立验证；模板的具体依赖版本未在资料中列出，需以仓库 package.json 为准。许可方面，代码采用 MIT，允许免费使用、修改、商用与分发，但需保留版权与许可声明；演示图片、字体、图标等第三方素材需单独核对其许可，域名、托管等外部服务可能另行收费。

Eleventy启动器

适合你的项目吗？

适用场景

  • 搭建以 Markdown 撰写内容的个人博客或内容站点
  • 需要一个可直接部署到 GitHub Pages 的静态站点起点
  • 为项目准备带深浅色主题与实时搜索的展示型站点

适合人群

  • 熟悉 Eleventy 与 Nunjucks 模板语法的开发者
  • 希望以 Markdown 管理文章并输出纯静态文件的个人站点作者
  • 需要将构建产物发布到 GitHub Pages 的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后执行 npm install 安装依赖

  2. 2

    运行 npm run start 启动本地开发服务器并实时重载

  3. 3

    运行 npm run deploy 将静态文件编译到 docs/ 目录

  4. 4

    运行 npm run clean 清理 docs/ 中的编译产物

  5. 5

    README 中的性能与生产就绪描述未经验证，依赖版本请以仓库 package.json 为准

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • README 声称 Lighthouse 满分与“生产就绪”属作者自述，未在资料中独立验证，不应作为性能或生产可用性的保证。
  • 代码采用 MIT 许可，可免费使用、修改、商用与分发，但必须保留版权与许可声明。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Diseñada para ofrecer la máxima puntuación de rendimiento (100/100 en Lighthouse)

README 原文

Distribuido bajo la licencia [MIT](LICENSE).

README 原文
https://github.com/FrankUsqAbant/starter-project-eleventy/blob/main/LICENSEhttps://github.com/FrankUsqAbant/starter-project-eleventy/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 71 / 100
技术栈
Eleventy
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-08-29
截图检查日期
2026-10-01

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Eleventy。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 140a4730a06d4879fd9e42b42ca83eb0295422a7cee07cb0c2cbc30f2116367a

2026-10-01T13:36:57.636Z

来源文件 / 仓库
# 🦡 Starter Project Eleventy (11ty)

<p align="center">
  <a href="https://frankusqabant.github.io/starter-project-eleventy/" target="_blank" rel="noopener noreferrer">
    <img src="code/img/preview.webp" alt="Vista Previa de Eleventy Starter — Clic para abrir el sitio en vivo" width="100%" style="border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
  </a>
</p>

<p align="center">
  <a href="https://frankusqabant.github.io/starter-project-eleventy/">
    <img src="https://img.shields.io/badge/Demo_en_Vivo-Sitio_Web-10b981?style=for-the-badge&logo=githubpages&logoColor=white" alt="Demo en Vivo">
  </a>
  <img src="https://img.shields.io/badge/Eleventy-v2.0+-5c46eb?style=for-the-badge&logo=eleventy" alt="11ty">
  <img src="https://img.shields.io/badge/Diseño-Modern_CSS-00F5D4?style=for-the-badge&logo=css3&logoColor=black" alt="Modern CSS">
  <img src="https://img.shields.io/badge/Temas-Dark_%26_Light-8b5cf6?style=for-the-badge" alt="Temas">
  <img src="https://img.shields.io/badge/Imágenes-WebP_Ultra_Fast-10b981?style=for-the-badge" alt="WebP Ready">
</p>

<p align="center">
  🌐 <b>Sitio Web Desplegado:</b> <a href="https://frankusqabant.github.io/starter-project-eleventy/">https://frankusqabant.github.io/starter-project-eleventy/</a>
</p>

---

## ⚡ ¿Qué es este proyecto?

Una plantilla base moderna, ultraligera y lista para producción, creada con **Eleventy (11ty)** y **Nunjucks**. Diseñada para ofrecer la máxima puntuación de rendimiento (100/100 en Lighthouse), estética cinematográfica y cero sobrecarga de JavaScript innecesario.

---

## ✨ Características Principales

- 🚀 **Ultrarrápido & Ligero:** Salida 100% estática optimizada con imágenes en formato WebP (~30-80 KB).
- 🌓 **Modo Oscuro / Claro:** Alternador accesible con persistencia en `localStorage`.
- 🔍 **Blog con Búsqueda en Vivo:** Filtrado en tiempo real por texto y categorías (*Libros*, *Películas*).
- 📖 **Barra de Lectura:** Indicador dinámico de avance en artículos Markdown.
- 🎨 **Diseño Moderno:** Efectos *glassmorphism*, iluminación iridiscente y tipografía *Plus Jakarta Sans*.

---

## 🚀 Inicio Rápido (Desarrollo)

```bash
# 1. Clonar e ingresar
git clone https://github.com/FrankUsqAbant/starter-project-eleventy.git
cd starter-project-eleventy

# 2. Instalar dependencias
npm install

# 3. Iniciar servidor de desarrollo
npm run start
```

---

## 🛠️ Comandos Principales

| Comando | Descripción |
| :--- | :--- |
| `npm run start` | Inicia el entorno local con recarga en vivo. |
| `npm run deploy` | Compila los archivos estáticos en la carpeta `docs/`. |
| `npm run clean` | Limpia los archivos compilados en `docs/`. |

---

## 📁 Estructura del Proyecto

```text
├── code/
│   ├── _includes/    # Componentes modulares (header, menu, footer, layouts)
│   ├── css/          # Estilos modernos con variables y temas (styles.css)
│   ├── js/           # Interactividad ligera y buscador (main.js)
│   ├── img/          # Imágenes optimizadas en WebP
│   └── *.njk / *.md  # Páginas y publicaciones en Markdown
├── docs/             # Salida estática compilada para GitHub Pages
└── .eleventy.js      # Configuración de 11ty
```

---

## 📄 Licencia

Distribuido bajo la licencia [MIT](LICENSE).
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

eleventy-base-blog

eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.

Eleventy · 博客

eleventy-garden

eleventy-garden

:seedling: A starter site for building a mind garden with eleventy

Eleventy · 启动器

eleventastic

eleventastic

An Eleventy Starter Kit

Eleventy · 启动器

neat-starter

neat-starter

Starter Template for Netlify CMS, Eleventy, Alpine JS & Tailwind CSS

Eleventy · 启动器

Eleventy-Starter-Boilerplate

Eleventy-Starter-Boilerplate

🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, …

Eleventy · 博客

eleventy-plus-vite

eleventy-plus-vite

A clean and fast Eleventy Starter Project with Vite

Eleventy · 启动器