Next.jsReact博客启动器

digital-garden — Next.js 博客模板

作者 thedevdavid

面向开发者的现代博客与数字花园模板,基于Next.js、MDX与Contentlayer,内置分析、订阅与SEO功能。

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。 本截图因高度限制未包含整页。

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

值得关注的模板亮点

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

01

基于 Next.js App Router、MDX 与 Contentlayer,内容与代码类型安全

02

内置 SEO、RSS、OG 图片生成、搜索与命令面板等开发者常用功能

03

支持文章系列、标签、阅读时间估算、代码高亮与暗色模式

04

提供 Vercel、Umami、Plausible、Google Analytics 四种分析接入

05

内置 MailerLite 邮件订阅表单与 API 路由

06

首页 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 需要设置环境变量,并自行配置分析或订阅服务。如果你希望快速搭建一个功能完整、风格现代的开发者博客,这个模板值得尝试,但上线前最好核对一遍依赖配置和未完成项。

Next.jsReact博客启动器

适合你的项目吗?

适用场景

  • 开发者希望快速搭建个人博客或数字花园,并展示项目与常用工具
  • 需要 Markdown/MDX 写作且要求内容类型安全的场景
  • 需要集成第三方分析或邮件订阅服务的个人站点
  • 适合作为 Next.js 学习项目,参考其内容层与组件组织方式

适合人群

  • 开发者个人博客或数字花园
  • 技术内容创作者
  • 希望使用 Next.js 与 MDX 构建内容站点的团队
  • 需要快速部署到 Vercel 的静态生成项目

上手与定制指南

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

  1. 1

    克隆仓库后,需先安装依赖(推荐 pnpm),然后依次编辑 utils/metadata.ts、utils/uses-data.ts、utils/projects-data.ts 和 lib/navigation-links.ts 等文件以替换个人信息。

  2. 2

    内容以 Markdown 或 MDX 形式放在 content/ 目录下,Frontmatter 支持标题、日期、标签、系列、作者和状态等字段。

  3. 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.

许可证原文

Permission is hereby granted, free of char

许可证原文
https://github.com/thedevdavid/digital-garden/blob/main/LICENSEhttps://github.com/thedevdavid/digital-garden/blob/HEAD/README.md

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 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

当前版本没有可核对的编辑审核记录;旧的应用时间不代表已完成事实审核。

这条历史介绍未保存固定版本的来源快照。请对照当前仓库,发现不一致可反馈。

反馈内容错误

看看同类模板

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