技术

你好,世界

这是一篇置顶的示例文章,用来展示这个 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)、**强调文字**和 `行内代码`。

> 这是一段引用。

![图片说明](/img/example.webp)

二级和三级标题会自动进入文章目录。图片会获得懒加载属性,点击后可以在灯箱中查看大图。代码块、表格、列表和引用也都有与深浅色主题匹配的样式。

自定义站点信息

站点标题、导航、社交链接都集中在 src/consts.ts 里:

配置说明
SITE.title站点名称,显示在页头与页脚
SITE.description站点默认描述
SITE.url部署后的站点地址,用于 RSS 与 SEO
SITE.pageSize首页与列表页每页显示的文章数
NAV顶部导航项,增删改都在这里
SOCIAL页脚社交链接

改完配置,再换上站点图标和头像,博客就真正属于你了。

浏览和发现内容

除了首页文章列表,站点还提供了几种寻找内容的方式:

  • 归档:按照发布时间浏览全部文章
  • 分类与标签:按主题聚合文章
  • 搜索:通过标题、摘要和正文关键词查找内容
  • RSS:让读者在订阅器中获取更新
  • 站点地图:帮助搜索引擎发现公开页面

文章较多时,这些入口会比单纯翻页更有效。新增文章后不需要手动维护列表,构建过程会自动更新相关页面。

深色模式

主题默认跟随系统偏好,也可以点击页头右上角的月亮/太阳图标手动切换,选择会被记住。

移动端体验

导航、文章目录、卡片网格和正文排版都会根据屏幕宽度调整。发布带有长链接、表格或大图的文章后,仍建议在手机尺寸下快速检查一次,避免内容超出视口。

发布前检查

完成一篇文章后,可以用下面这份简短清单做最后确认:

  1. 标题和摘要能够准确说明文章内容
  2. 发布日期、分类和标签填写正确
  3. 图片路径有效,替代文字能够描述图片
  4. 文中的外部链接可以正常打开
  5. 草稿文章已设置 draft: true
  6. 执行 npm run build,确认站点能够完整生成

构建成功后,静态文件会输出到 dist/。部署平台只需要安装依赖并运行构建命令,不需要数据库或常驻服务器。


就这样,少即是多。祝写作愉快。

评论