✨ Next.js Tailwind 博客模板
⭐ 如果这个项目对你有帮助，请给我们一个星星，这是对我们最大的鼓励！
🎯 为什么选择这个模板？
- 🚀 技术栈强大：基于 Next.js 13+ 和 React Server Components 构建
- ⚡ 极致性能：首次加载仅 85kB，Lighthouse 跑分接近满分
- 📱 响应式设计：完美适配移动端，支持亮色/暗色主题
- 🔍 SEO 优化：内置 SEO 最佳实践，自动生成站点地图
- 📝 丰富内容：支持 MDX、数学公式、引用系统等
- 🎨 精美设计：3种文章布局，2种列表样式，可自定义主题
💫 效果预览
|
桌面端展示 |
移动端展示 |
🚀 性能表现
Lighthouse 性能评分 - 展现卓越的性能指标
🛠️ 技术特点
- Next.js 13+ 配合 TypeScript，享受最新特性
- Tailwind CSS 3.0 轻松实现自定义样式
- Contentlayer 强大的内容管理系统
- MDX 让你的博客文章更具互动性
- Pliny 整合分析、评论等功能
- Next/Font 字体加载优化
- Next/Image 图片自动优化
📦 核心特性
📊 数据分析与互动
- 多种数据分析方案（支持 Umami、Plausible、百度统计等）
- 评论系统集成（支持 Giscus、Utterances、Disqus）
- 订阅集成（支持主流邮件订阅服务）
- 搜索功能（支持 Kbar、Algolia）
📝 内容创作增强
- 服务端代码高亮
- KaTeX 数学公式渲染
- 文献引用与参考书目
- GitHub 风格提示框
- 图片自动优化
- 多作者支持
- 文章嵌套路由
⚡ 快速开始
克隆项目
npx degit 'geekskai/blog'
安装依赖
yarn
请注意，如果您使用的是 Windows 操作系统，每次启动之前，需要提前运行：
$env:PWD = $(Get-Location).Path
启动开发服务器
yarn dev
🎨 个性化配置
- 修改
siteMetadata.js配置网站信息 - 调整
next.config.js配置安全策略 - 修改
authors/default.md设置作者信息 - 编辑
projectsData.ts更新项目展示 - 自定义
headerNavLinks.ts配置导航菜单
📝 创建文章
在 data/blog 目录下创建 .md 或 .mdx 文件：
---
title: '文章标题'
date: '2024-02-11'
tags: ['next-js', 'tailwind', '教程']
draft: false
summary: '文章摘要'
---
文章内容...
🚀 部署指南
Vercel 部署
一键部署到 Vercel，无需额外配置
静态部署
$ EXPORT=1 UNOPTIMIZED=1 yarn build
🤝 参与贡献
欢迎所有形式的贡献：
- 🐛 问题修复
- ✨ 新功能提案
- 📚 文档改进
- 🎨 界面优化
💖 支持项目
如果这个项目对你有帮助：
- ⭐ 给项目一个 Star
- 🐦 在社交媒体分享你的使用经验
- 💝 考虑赞助项目
📱 联系我们
📄 开源协议
🔥【内推机会，速来围观！】🔥
👀 你是否认识这样的大神？或者你自己就是？我们正在寻找以下精英人才，成功引荐还有丰厚奖金哦！💰
• React高手：懂底层原理，代码写得飞起！
• 设计师：创意无限，设计让人眼前一亮！🤟 woohoo～
• 产品经理：洞察需求，打造爆款产品！
• 信息安全专家：守护数据安全，技术杠杠的！
• 英语口语流利：能轻松应对国际化工作环境！
如果你或你身边的朋友符合以上条件，快来私信我！🚀
机会不等人，赶紧行动吧！💼✨
❤️ 看完三件事:
如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：
- 点赞，让更多的人也能看到这篇内容，也方便自己随时找到这篇内容（收藏不点赞，都是耍流氓 -_-）；
- 关注我们，不定期分好文章；
- 也看看其它文章；
- 有岗位想内推的小伙伴可以在评论区留言，让更多其他小伙伴看到；
🎉欢迎你把自己的学习体会写在留言区，与我和其他同学一起讨论。如果你觉得有所收获，也欢迎把文章分享给你的朋友。
