TIP
Cover ☝️ image source 👉: Source
🤔This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts#

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

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post. 1. Start with `http://` or `https://`: Use web image 2. Start with `/`: For image in `public` dir 3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won’t be displayed.

NOTE
When the article is ready for publication, you can update the “draft” field to false in the Frontmatter. But if you do not want to publish your article, please keep the “draft” state true

Where to Place the Post Files#

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

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

Basic Markdown Syntax#

An h1 header#

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.
They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12—14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺

An h2 header#

Here’s a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here’s a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header#

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here’s a link to a website, to a local doc, and to a section heading in the current doc. Here’s a footnote ¹.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they’re made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it’s not easy being.

A horizontal rule follows.

Here’s a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There’s no “e” in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here’s a “line block”:

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$ . Display math should get its own line and be put in in double-dollarsigns:

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

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Markdown Extended Features#

GitHub Repository Cards#

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Fabrizz

MMM-OnSpotify

Waiting for api.github.com...

00K

Waiting...

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

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

Admonitions#

Following types of admonitions are supported: note tip important warning 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.

Basic Syntax#

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

:::tip
Optional information to help a user be more successful.
:::

Custom Titles#

The title of the admonition can be customized.

MY CUSTOM TITLE
This is a note with a custom title.

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

GitHub Syntax#

TIP
The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Video#

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

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

YouTube#

Bilibili#

Footnote text goes here. ↩

Front-matter of Posts#

Where to Place the Post Files#

Basic Markdown Syntax#

An h1 header#

An h2 header#

An h3 header#

Markdown Extended Features#

GitHub Repository Cards#

Admonitions#

Basic Syntax#

Custom Titles#

GitHub Syntax#

Video#

YouTube#

Bilibili#

Footnotes#