你好,世界
这是一篇置顶的示例文章,用来展示这个 Astro 博客主题的排版、目录、阅读进度与深浅色切换能力。
欢迎来到 我的博客 —— 一个追求极简、专注阅读的 Astro 博客主题。它没有花哨的动效,没有臃肿的依赖,只保留写作与阅读最需要的东西。
这个主题有什么
主题开箱即用,但每个细节都可以按你的喜好调整:
- 内容集合驱动:文章通过
src/content/post下的 Markdown 文件管理,frontmatter 支持标签、封面、置顶、草稿等字段 - 原生性能:没有引入任何前端框架,页面体积以 KB 计
- 极简排版:衬线标题 + 无衬线正文,中西文混排都舒服
- 阅读体验:阅读进度条、侧边目录、深色模式、预估阅读时长
- 内容发现:提供搜索、归档、分类、标签、RSS 和站点地图
- 图片浏览:文章图片支持懒加载和灯箱预览,相册可以按分类展示
好博客的核心不是功能多,而是让人愿意把一篇文章读完。
怎么开始写文章
在 src/content/post/ 下新建一个 Markdown 文件即可:
---
title: '我的第一篇文章'
description: '一段简短的描述'
pubDate: 2026-09-01
category: '随笔'
tags: ['生活', '记录']
---
这里是正文。
保存后,开发服务器会自动热更新,文章会出现在首页列表、归档、分类和标签页中。文件名会成为文章地址的一部分,建议使用简短且容易识别的英文名称。
文章字段说明
每篇文章顶部的 frontmatter 决定它在站点中的展示方式:
| 字段 | 是否必填 | 说明 |
|---|---|---|
title | 是 | 文章标题 |
description | 否 | 首页卡片、搜索结果与 SEO 摘要 |
pubDate | 是 | 首次发布日期 |
updatedDate | 否 | 最后更新日期 |
category | 否 | 文章所属分类 |
tags | 否 | 用于聚合同类内容的标签列表 |
cover | 否 | 首页卡片和分享信息使用的封面地址 |
pinned | 否 | 设为 true 后在文章列表中置顶 |
draft | 否 | 设为 true 后不发布文章 |
日期推荐使用 YYYY-MM-DD 格式。封面图片可以放在 public/ 中,并以 /图片名称.webp 的形式引用。
在正文中插入内容
普通 Markdown 语法已经足够完成大多数写作需求:
## 二级标题
这是一段正文,可以添加[链接](https://astro.build)、**强调文字**和 `行内代码`。
> 这是一段引用。

二级和三级标题会自动进入文章目录。图片会获得懒加载属性,点击后可以在灯箱中查看大图。代码块、表格、列表和引用也都有与深浅色主题匹配的样式。
自定义站点信息
站点标题、导航、社交链接都集中在 src/consts.ts 里:
| 配置 | 说明 |
|---|---|
SITE.title | 站点名称,显示在页头与页脚 |
SITE.description | 站点默认描述 |
SITE.url | 部署后的站点地址,用于 RSS 与 SEO |
SITE.pageSize | 首页与列表页每页显示的文章数 |
NAV | 顶部导航项,增删改都在这里 |
SOCIAL | 页脚社交链接 |
改完配置,再换上站点图标和头像,博客就真正属于你了。
浏览和发现内容
除了首页文章列表,站点还提供了几种寻找内容的方式:
- 归档:按照发布时间浏览全部文章
- 分类与标签:按主题聚合文章
- 搜索:通过标题、摘要和正文关键词查找内容
- RSS:让读者在订阅器中获取更新
- 站点地图:帮助搜索引擎发现公开页面
文章较多时,这些入口会比单纯翻页更有效。新增文章后不需要手动维护列表,构建过程会自动更新相关页面。
深色模式
主题默认跟随系统偏好,也可以点击页头右上角的月亮/太阳图标手动切换,选择会被记住。
移动端体验
导航、文章目录、卡片网格和正文排版都会根据屏幕宽度调整。发布带有长链接、表格或大图的文章后,仍建议在手机尺寸下快速检查一次,避免内容超出视口。
发布前检查
完成一篇文章后,可以用下面这份简短清单做最后确认:
- 标题和摘要能够准确说明文章内容
- 发布日期、分类和标签填写正确
- 图片路径有效,替代文字能够描述图片
- 文中的外部链接可以正常打开
- 草稿文章已设置
draft: true - 执行
npm run build,确认站点能够完整生成
构建成功后,静态文件会输出到 dist/。部署平台只需要安装依赖并运行构建命令,不需要数据库或常驻服务器。
就这样,少即是多。祝写作愉快。
评论