Post Frontmatter

1
---
2
title: My First Blog Post
3
published: 2023-09-09
4
description: This is the first post of my new Astro blog.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

Where to Place Post Files

Post files belong in src/content/posts/. You can also create subdirectories to organize posts and assets more clearly:

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

Markdown Examples

1
| Size | Material | Color |
2
|---|---|---|
3
| 9 | Leather | Brown |
4
| 10 | Linen | Natural |
5
| 11 | Glass | Transparent |

1
---

1
Inline math: $\omega = d\phi / dt$

1
$$
2
I = \int \rho R^{2} dV
3
$$

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories. Repository information is fetched from the GitHub API when the page loads.

Use ::github{repo="<owner>/<repo>"} to create a GitHub repository card.

1
::github{repo="saicaca/fuwari"}

Admonitions

The following admonition types are supported: note, tip, important, warning, and caution.

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4
:::tip
5
Optional information to help a user be more successful.
6
:::

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

1
> [!NOTE]
2
> GitHub syntax is also supported.
3

4
> [!TIP]
5
> GitHub syntax is also supported.

Expressive Code

Expressive Code provides syntax highlighting, terminal frames, line markers, diff comparisons, word wrapping, collapsible code, line numbers, and more. See the official Expressive Code documentation for complete usage.

Embed Videos in Posts

Copy the embed code from YouTube or another platform and paste it directly into a Markdown file.

1
---
2
title: Include Video in the Post
3
published: 2023-10-19
4
// ...
5
---
6
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>