基于 Next.js App Router、MDX 与 Contentlayer,内容与代码类型安全
digital-garden — Next.js 博客模板
作者 thedevdavid
面向开发者的现代博客与数字花园模板,基于Next.js、MDX与Contentlayer,内置分析、订阅与SEO功能。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。 本截图因高度限制未包含整页。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
内置 SEO、RSS、OG 图片生成、搜索与命令面板等开发者常用功能
支持文章系列、标签、阅读时间估算、代码高亮与暗色模式
提供 Vercel、Umami、Plausible、Google Analytics 四种分析接入
内置 MailerLite 邮件订阅表单与 API 路由
首页 Hero 区域有四种变体可选,可灵活调整展示风格
模板详细介绍
digital-garden 是一个面向开发者的开源博客与数字花园模板,基于 Next.js App Router、MDX、Contentlayer、Tailwind CSS 和 shadcn/ui 构建。它试图解决开发者自建博客时常见的需求:内容用 Markdown 或 MDX 编写,通过 Contentlayer 转换为类型安全的数据,同时内置 SEO、RSS、OG 图片生成、搜索与命令面板等能力。模板的目录结构清晰,内容按 pages、posts、projects 分类,列表页数据则集中在 lib 文件夹中,方便统一管理。
除了基础的文章展示,模板还提供了 /uses、/projects、/social 等开发者常用的页面,并支持文章系列、标签、阅读时间估算、代码高亮、暗色模式等细节功能。分析服务方面,它预留了 Vercel、Umami、Plausible 和 Google Analytics 的接入配置;邮件订阅则内置了 MailerLite 的表单与 API 路由。首页 Hero 区域有四种变体可选,从极简到嵌入视频不等,适合不同风格的展示。
需要注意的是,项目 README 明确表示仍处于持续演进中,部分功能如评论系统、分页、多语言支持等尚未实现,且没有内置 CMS。部署到 Vercel 需要设置环境变量,并自行配置分析或订阅服务。如果你希望快速搭建一个功能完整、风格现代的开发者博客,这个模板值得尝试,但上线前最好核对一遍依赖配置和未完成项。
适合你的项目吗?
适用场景
- 开发者希望快速搭建个人博客或数字花园,并展示项目与常用工具
- 需要 Markdown/MDX 写作且要求内容类型安全的场景
- 需要集成第三方分析或邮件订阅服务的个人站点
- 适合作为 Next.js 学习项目,参考其内容层与组件组织方式
适合人群
- 开发者个人博客或数字花园
- 技术内容创作者
- 希望使用 Next.js 与 MDX 构建内容站点的团队
- 需要快速部署到 Vercel 的静态生成项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后,需先安装依赖(推荐 pnpm),然后依次编辑 utils/metadata.ts、utils/uses-data.ts、utils/projects-data.ts 和 lib/navigation-links.ts 等文件以替换个人信息。
- 2
内容以 Markdown 或 MDX 形式放在 content/ 目录下,Frontmatter 支持标题、日期、标签、系列、作者和状态等字段。
- 3
部署到 Vercel 时需设置 NEXT_PUBLIC_BASE_URL 环境变量,若使用分析或订阅服务,还需额外配置对应的环境变量。
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明MIT许可证允许免费使用、修改、分发和商用该模板代码,仅需保留版权与许可声明。
使用时需要遵守
- 保留原作者版权声明和 MIT 许可证声明。
- 在所有副本或实质部分中包含版权声明和许可声明
额外费用与待核对事项
- README提及使用Inter字体及Caveat字体生成的签名SVG,这些字体素材的授权状态未在文档中明确
- README中引用的第三方服务(如Umami、MailerLite等)需遵循各自条款
查看原文依据
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
许可证原文
https://github.com/thedevdavid/digital-garden/blob/main/LICENSEhttps://github.com/thedevdavid/digital-garden/blob/HEAD/README.mdPermission is hereby granted, free of char
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-24。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 90 / 100
- 技术栈
- Next.js · React
- 网站类型
- 博客 · 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-03-04
- 截图检查日期
- 2026-09-04
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
当前版本没有可核对的编辑审核记录;旧的应用时间不代表已完成事实审核。
这条历史介绍未保存固定版本的来源快照。请对照当前仓库,发现不一致可反馈。
反馈内容错误看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

ai-website-cloner-template
Clone any website with one command using AI coding agents
Next.js · 启动器

Next.js SaaS Starter
Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板,定位介于学习资源和可直接部署的脚手架之间。
Next.js · SaaS

Next.js Commerce
Next.js Commerce 是 Vercel 团队维护的电商启动模板,基于 Next.js App Router 构建,采用服务端渲染、React Server Components、Server Actions …
Next.js · 电商

Next-js-Boilerplate
Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器,核心定位是开发者体验优先。
Next.js · 启动器

tailwind-nextjs-starter-blog
tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板,其 v2 版本基于 App Router 与 React Server Comp…
Next.js · 博客

next-forge
Production-grade Turborepo template for Next.js apps.
Next.js · 启动器
