这是一个使用 Astro 框架搭建的个人网站。
目录
为什么重写？
最近把文章内容由 Notion 全都迁移到了本地，使用 Obsidian 进行管理，所以在想能否使用纯静态的 markdown 文件来完成自己的博客。
网站是基于 Astro 开发的，本着追求性能的目标，说干就干，于是就有了本站。
跑个分？嘿嘿
以下是文章的静态 md 文件的结构。
Frontmatter
即前置内容区，用来描述文章的基本信息。
---
title: 全新的个人网站
author: Yawei
pubDatetime: 2025-07-02T12:31:00+08:00
modDatetime:
featured: false
draft: false
tags:
- 编程
description: 用 Astro 重写了博客
ogImage: ../attachment/og/astro-blog.png
# ogImage: "https://example.org/remote-image.png" # 远程 URL
slug: astro-blog
canonicalURL: https://example.org/example # SEO 规范化链接
---各字段具体表现，指挥 AI 画个图示吧：
标题
博客文章使用 h1 作为主标题，文章中的其余标题应使用 h 2 ~ h 6 格式，所以至少要用两个 ## 作为正文中的标题。
目录
默认情况下，文章不包含任何目录（toc）。要包含目录，必须以 h2 格式（Markdown）编写 ## 目录，并将其放置在您希望它出现在文章中的位置，只会匹配第一个目录。
---
# frontmatter - 前置内容区
---
## 目录
<!-- 文章的其余部分 -->语法高亮
使用 Shiki 作为默认的语法高亮，@shikijs/transformers 来增强代码块的显示效果。
存储博客内容的图片
以下是在 Markdown 文件中存储和显示图像的两种方法。
如果在 Markdown 中为优化的图像设置样式，应该使用 MDX。
在 attachment 目录中
这些图像将通过 Image Service API 由 Astro 自动优化。
您可以使用相对路径或别名路径（@/data/blog/attachment/）来提供这些图像。
示例：假设您要显示 example.jpg，其路径为 /src/data/blog/attachment/example.jpg。
<!-- 使用 img 标签或 Image 组件将不起作用 ❌ -->
<img src="@/data/blog/attachment/example.jpg" alt="一些描述">在 public 目录中
存储在 public 目录中的图像不会被 Astro 处理，也不会被优化，需要自己处理图像优化。对于这些图像，应该使用绝对路径，来显示这些图像。
示例：假设 example.jpg 位于 /public/assets/images/example.jpg。
<!-- 或 -->
<img src="/assets/images/example.jpg" alt="一些描述">OG 图像
如果文章未指定 OG 图像，则会自动生成默认的 OG 图像，OG 图像的推荐尺寸为 1200 X 640 像素。
卡片支持
具体说明见：obsidian-card-viewer
设计诗
源码
本博客所有内容开源，源码地址：vsme/astro-obsidian-blog。