Astro杂志资讯博客

broadsheet — Astro 杂志资讯模板

作者 xyovo

报刊头版式排版的 Astro 博客模板,含双内容集合、Pagefind 全文搜索与明暗主题。

看看你的网站会是什么样

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

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

浏览头条、近期文章与作者侧栏。

全部页面与视图 7

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

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

值得关注的模板亮点

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

01

首页按印刷报纸头版组织:头条、近期文章、旧文列表与作者侧栏

02

blog 与 projects 双内容集合,frontmatter 由 Zod 校验,字段错误在构建时暴露

03

Pagefind 构建时生成全文搜索索引,无需外部搜索服务

04

明暗与跟随系统三态主题切换,首屏无闪烁

05

Giscus 评论按需启用,四个环境变量缺任意一个则整块跳过

06

静态输出,无客户端框架,页面过渡使用 Astro 内置 ClientRouter

模板详细介绍

Broadsheet 是一个把首页做成印刷报纸头版的 Astro 博客模板:一篇头条、三篇近期文章、一份旧文列表,加上带标签导航的作者侧栏。内容分成 posts(blog)和 projects 两个集合,frontmatter 由 Zod 校验,字段写错会在构建阶段失败而不是上线后才发现。文章支持 Markdown 与 MDX,标签归档页和计数自动生成。

功能层面比较完整:Pagefind 在构建时生成全文搜索索引,不依赖外部搜索服务;明暗与跟随系统三态切换;目录由 h2/h3 生成并随滚动高亮;RSS 与 sitemap 在构建时产出;评论走 Giscus,未配置时该区块直接不渲染。技术栈为 Astro 6、TypeScript、Tailwind CSS v4、Pagefind、MDX 与 Shiki,静态输出,没有客户端框架,页面过渡用 Astro 内置的 ClientRouter。

需要注意几点:界面文案和示例文章默认是简体中文,标签、日期格式等要改 `src/consts.ts` 和 `src/components/` 下的组件;示例文章同时充当文档,删除前建议先读一遍。搜索索引只在构建时生成,开发模式下搜不到结果是正常现象。部署到 Vercel 之外的平台必须自己设置 `SITE_URL`,否则 RSS 和 sitemap 里的链接会指向 localhost。仓库标注 MIT,但当前 license 状态为待核对,商用前建议确认。

Astro杂志资讯博客

适合你的项目吗?

适用场景

  • 个人技术博客或写作站点,希望首页有明确的编辑感而非卡片流
  • 同时维护文章与项目展示两类内容的独立开发者
  • 偏好静态托管、不想引入搜索服务或评论后端的站点
  • 需要 RSS、sitemap、标签归档开箱可用的内容站

适合人群

  • 熟悉 Astro 与 Markdown/MDX 写作流程的开发者
  • 接受通过修改 consts.ts、global.css 和组件来定制外观的使用者
  • 部署在 Vercel 或愿意自行配置 SITE_URL 的静态托管用户

上手与定制指南

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

在本地运行你的副本

Node.js 24 与 pnpm。下载或克隆仓库后,在项目目录运行:

pnpm install
pnpm dev
依据:仓库上手说明

从这些文件开始定制

src/consts.ts
修改站点名称、导航与作者资料
src/content/
替换示例文章与项目内容
src/styles/global.css
调整配色、字体与明暗主题
.env
配置 SITE_URL 与可选的 Giscus 评论参数
  1. 1

    示例文章与界面文案为简体中文,需按需替换 `src/consts.ts` 与 `src/components/` 中的标签

  2. 2

    projects 集合的 status 为中文枚举值,自定义措辞要改 `src/content.config.ts` 里的 z.enum

  3. 3

    global.css 中有两个 :root 块,后者生效,改色时需连同 `html.dark` 块一起修改

  4. 4

    非 Vercel 平台必须设置 SITE_URL,子路径部署还需配置 astro.config.mjs 的 base

  5. 5

    开发模式下搜索无结果属预期,验证搜索需先 `pnpm build && pnpm preview`

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可证允许免费使用、修改、分发和商用,仅需保留版权与许可声明;README仅提供定制说明,无额外授权限制。

使用时需要遵守

  • 保留原作者版权声明和 MIT 许可证声明。
  • 保留版权声明和许可声明于所有副本或实质部分

额外费用与待核对事项

  • 未确认演示图片、字体等第三方素材的授权范围
查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy

许可证原文

Fonts default to Geist Sans and Geist Mono, bundled locally via `@fontsource`

README 原文

Permission is hereby granted, free of char

许可证原文
https://github.com/xyovo/broadsheet/blob/main/LICENSEhttps://github.com/xyovo/broadsheet/blob/HEAD/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-09-24。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 70 / 100
技术栈
Astro
网站类型
杂志资讯 · 博客
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-08
截图检查日期
2026-09-13

目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

仓库文件核对

检查日期: 2026-09-30 · 仅核对文件,未安装依赖或运行测试。

声明的依赖版本范围

astro
^6.1.3
tailwindcss
^4.1.13
typescript
^5.9.2

声明的 npm 脚本名(未执行):dev · start · build · preview · astro

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

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

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

反馈内容错误

看看同类模板

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