我的第一篇博客

Astro 博客模板使用指南#

本文档为您提供了使用此博客模板所需的核心知识，涵盖了文章的创建、配置和内容撰写。本模板基于 Astro 构建，更多高级用法可参考其官方文档。

一、核心概念：文章属性 (Front-matter)#

每一篇 Markdown 文章的开头部分，都由一对 --- 包裹，这部分被称为 Front-matter。它用于定义这篇文章的所有元数据，是控制文章标题、发布日期、分类、标签等信息的关键。

标准格式示例：

1
---
2
title: 我的第一篇博客
3
published: 2025-07-09
4
description: 这是我用 Astro 搭建的新博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [技术, 思考]
7
category: 前端
8
draft: false
9
---

属性详解表：

属性 (`Attribute`)	中文说明	示例与规则
`title`	文章标题	将会显示在文章页面和列表中的标题。
`published`	发布日期	文章的发布时间，用于排序和显示。
`description`	文章摘要	一段简短的描述，会显示在文章列表页。
`image`	封面图片	文章的封面图路径。 1. `https://...`：使用网络图片。 2. `/images/cover.png`：使用 `public` 目录下的图片。 3. `./cover.png`：使用相对于当前 md 文件的图片。
`tags`	标签	文章的标签，可以有多个，用方括号包裹。
`category`	分类	文章所属的分类。
`draft`	草稿状态	- `true`: 文章为草稿，不会被发布和显示。 - `false`: 文章为公开状态，所有人可见。

二、文章存放位置#

您所有的文章（.md 文件）都应该存放在项目的 src/content/posts/ 目录下。您也可以在此目录下创建子文件夹来更好地组织文章和相关资源（如图片）。

目录结构示例：

1
src/content/posts/
2
├── 我的第一篇文章.md
3
└── 我的第二篇文章/
4
    ├── cover.png      # 这是文章的封面图片
5
    └── index.md       # 这是文章的 Markdown 文件

三、内容撰写指南#

本模板支持标准的 Markdown 语法，并提供了丰富的扩展功能来增强内容表现力。

1. 基础 Markdown 语法#

我用的Obsidian，因此需要记忆快捷键在这里列出快捷键方便我熟悉与查找

支持所有常见的 Markdown 语法，例如：

各级标题 (# h1, ## h2) Ctrl+Alt+2
列表（有序、无序）Ctrl+N,Ctrl+M
粗体 (**bold**) 和斜体 (*italic*)Ctrl+B,Ctrl+I
引用 (> Block quotes)Alt+Z
链接 ([text](url))Ctrl+K
表格Alt+X
插入代码块Alt+C
代码块2 Alt+V
Templater模板插件，导入键盘按键Alt+Q

等等…(用的时候会补充2025 8 10)

2. 增强的代码块 (Expressive Code)#

代码块功能非常强大，您可以通过在代码块声明后添加特定标记来启用高级功能。

带标题的窗口样式

1
```js title="my-file.js"
2
console.log('这会显示一个带标题的编辑器窗口');

行高亮与标记：使用 {} 来标记行号。

1
```js {1, 4-5} del={2} ins={3}
2
// 第1行: 会被高亮 (默认标记)
3
// 第2行: 会被标记为 "删除"
4
// 第3行: 会被标记为 "新增"
5
// 第4行和第5行: 会被高亮

行内文本标记：使用 "" 标记普通文本，使用 // 标记正则表达式。

1
```js "console.log" /return/
2
console.log('这里的 "console.log" 会被高亮');
3
return true; // 这里的 "return" 会被高亮

代码折叠

1
```js collapse={1-5}
2
// 这前5行代码默认会被折叠起来
3
import { something } from 'some-library';
4
// ...
5
// ...
6
// ...
7

8
// 这行代码默认是可见的
9
console.log('Hello, World!');

显示行号

1
```js showLineNumbers
2
console.log('这段代码会显示行号');

3. 特色组件#

警告/提示框 (Admonitions) 支持 note, tip, important, warning, caution 五种类型。也支持 GitHub 风格的 > [!NOTE] 语法。

基础语法：
```
1
:::note
2
这是一条需要注意的信息。
3
:::
4

5
:::tip[自定义标题]
6
这是一条带有自定义标题的提示信息。
7
:::
```
GitHub 仓库卡片 可以动态地显示一个 GitHub 仓库的信息卡片。快捷键 Alt+W 语法：
```
1
::github{repo="owner/repo-name"}
```
示例： ::github{repo="saicaca/fuwari"}

4. 嵌入多媒体内容 (YouTube, Bilibili等)#

您可以直接将视频网站提供的 <iframe> 嵌入代码粘贴到您的 Markdown 文件中。

示例 (YouTube):

1
<iframe width="100%" height="468" src="https://www.youtube.com/embed/..." title="YouTube video player" frameborder="0" allowfullscreen></iframe>

示例 (Bilibili):

1
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=..." scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>