内置首页、文章归档、文章详情、短札记、关于、搜索与 404 页面
editorial-blog-template — Next.js 博客模板
作者 F0und-icu
基于 Next.js 16、React 19、TypeScript 与 Markdown 的编辑风格博客模板,内置虚构财经刊物 Margin & Measure 的四篇英文文章与两则短札记,提供搜索、目录与静态导出。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
客户端全文搜索,查询与筛选条件可写入 URL 分享
元数据驱动的分类、标签、相关阅读与精选文章排序
支持 Markdown 表格、引用、列表、语法高亮与可复制代码
桌面端粘性目录与移动端可折叠目录
静态导出,附带 CI 检查与默认关闭的 GitHub Pages 工作流
模板详细介绍
Editorial Blog Template 是一个面向长篇阅读的 Next.js 博客模板,技术栈为 Next.js 16、React 19、TypeScript 和 Markdown。仓库自带一个虚构的英文财经刊物「Margin & Measure」,用四篇完整文章和两则短札记演示主题效果。页面覆盖首页、文章归档、文章详情、短札记、关于、搜索与 404,并支持客户端全文搜索、可分享的查询与筛选 URL、基于元数据的分类与标签、相关阅读和精选文章排序。
视觉上借鉴印刷期刊:暖色纸张、克制的分隔线、衬线标题与紧凑正文节奏,配色使用纸色 #f6f3ed、墨色 #2c2b27、胡桃色 #825b42 与鼠尾草色 #53684f。桌面端将阅读栏与目录导航分列,移动端收为单栏并折叠导航。模板不下载专有字体,仅引用系统字体,因此不同操作系统下排版略有差异。
内容以 Markdown 文件加 article-meta.json 元数据驱动,分类与标签自由填写,日期为显式编辑字段而非文件时间戳,不支持 YAML front matter。构建产出静态文件到 out/,附带 CI 检查与默认关闭的 GitHub Pages 工作流。示例文章由 AI 辅助撰写,属于教学示例,不构成投资建议。
适合你的项目吗?
适用场景
- 搭建以长篇阅读为主的个人写作站点或专栏
- 发布英文财经、评论类文章并需要分类与标签归档
- 用 Markdown 管理内容、以元数据控制排序与精选
- 部署到 GitHub Pages 或其他静态托管服务
- 在本地预览并定制印刷期刊风格的排版与配色
适合人群
- 习惯用 Markdown 写作并自行管理内容的作者
- 需要静态导出、不依赖数据库或 CMS 账号的博客项目
- 偏好编辑式排版、希望调整配色与字体令牌的开发者
- 想以完整示例文章为起点改写为个人站点的使用者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
使用 Node.js 22,执行 nvm use、npm ci、npm run dev,然后打开 http://localhost:3000
- 2
无需数据库、CMS 账号、API 密钥或外部字体服务
- 3
文章写入 content/articles/*.md,并在 content/article-meta.json 添加对应条目;不支持 YAML front matter
- 4
新增图片后运行 node scripts/article-image-metadata.mjs 刷新尺寸映射
- 5
GitHub Pages 发布默认关闭,需将 Actions 变量 PAGES_ENABLED 设为 true,并按仓库路径设置 NEXT_PUBLIC_BASE_PATH
授权与来源资料
使用条件与限制
待核对- 尚未完成使用条件评估,请先查看原仓库许可证。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 62 / 100
- 技术栈
- Next.js · React
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-23
- 截图检查日期
- 2026-09-23
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
当前版本没有可核对的编辑审核记录;旧的应用时间不代表已完成事实审核。
这条历史介绍未保存固定版本的来源快照。请对照当前仓库,发现不一致可反馈。
反馈内容错误看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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

Nextjs-tailwindcss-blog-template
⭐Build SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer. If you want to learn t…
Next.js · 博客

Next-js-Blog-Boilerplate
Next-js-Blog-Boilerplate 是一套面向个人与技术博客的启动代码,基于 Next.js 12 与 Tailwind CSS 3 构建,同时集成了 TypeScript、ESLint、Prettier …
Next.js · 博客

nextjs-blog-theme
nextjs-blog-theme 是 Netlify 团队维护的一个博客启动模板,基于 Next.js 15(Pages Router)和 Tailwind CSS 4.x 构建,设计由 Bejamas 机构完成。
Next.js · 博客

blog
🚀 My personal blog made with Tailwind CSS and NextJS. Template from Timlrx. Feel free to fork, follow and use…
Next.js · 博客

tailnext
Tailnext 是一个基于 Next.js 14 App Router 和 Tailwind CSS 的免费开源模板,由 onWidget 团队创建并维护。
Next.js · 博客
