Next.jsReact博客

editorial-blog-template — Next.js 博客模板

作者 F0und-icu

基于 Next.js 16、React 19、TypeScript 与 Markdown 的编辑风格博客模板,内置虚构财经刊物 Margin & Measure 的四篇英文文章与两则短札记,提供搜索、目录与静态导出。

看看你的网站会是什么样

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

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

查看现有预览图,更多页面尚未采集。

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

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

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

值得关注的模板亮点

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

01

内置首页、文章归档、文章详情、短札记、关于、搜索与 404 页面

02

客户端全文搜索,查询与筛选条件可写入 URL 分享

03

元数据驱动的分类、标签、相关阅读与精选文章排序

04

支持 Markdown 表格、引用、列表、语法高亮与可复制代码

05

桌面端粘性目录与移动端可折叠目录

06

静态导出,附带 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 辅助撰写,属于教学示例,不构成投资建议。

Next.js博客

适合你的项目吗?

适用场景

  • 搭建以长篇阅读为主的个人写作站点或专栏
  • 发布英文财经、评论类文章并需要分类与标签归档
  • 用 Markdown 管理内容、以元数据控制排序与精选
  • 部署到 GitHub Pages 或其他静态托管服务
  • 在本地预览并定制印刷期刊风格的排版与配色

适合人群

  • 习惯用 Markdown 写作并自行管理内容的作者
  • 需要静态导出、不依赖数据库或 CMS 账号的博客项目
  • 偏好编辑式排版、希望调整配色与字体令牌的开发者
  • 想以完整示例文章为起点改写为个人站点的使用者

上手与定制指南

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

  1. 1

    使用 Node.js 22,执行 nvm use、npm ci、npm run dev,然后打开 http://localhost:3000

  2. 2

    无需数据库、CMS 账号、API 密钥或外部字体服务

  3. 3

    文章写入 content/articles/*.md,并在 content/article-meta.json 添加对应条目;不支持 YAML front matter

  4. 4

    新增图片后运行 node scripts/article-image-metadata.mjs 刷新尺寸映射

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

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

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

反馈内容错误

看看同类模板

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