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 Postpublished: 2023-09-09description: This is the first post of my new Astro blog.image: ./cover.jpgtags: [Foo, Bar]category: Front-enddraft: false---| Attribute | Description |
|---|---|
title | The title of the post. |
published | The date the post was published. |
updated | The date the post was last updated. |
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 image2. Start with /: For image in public dir3. 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. |
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.mdBasic Markdown Syntax
Headers
H1 Header
H2 Header
H3 Header
H4 Header
H5 Header
H6 Header
Text Formatting
- Italic text
- Bold text
- Bold and italic text
StrikethroughInline code- Link to example
(Example image path)
Lists
Unordered list:
- Item 1
- Item 2
- Subitem 1
- Subitem 2
Ordered list:
- First item
- Second item
- Subitem 1
- Subitem 2
Blockquotes
This is a blockquote.
It can span multiple lines.
Code Blocks
// This is a code block with syntax highlighting#[instrument(skip_all, name = "trace_start_server")]fn main() -> Result<(), ServerError> { let rt = match compio::runtime::Runtime::new() { Ok(rt) => rt, Err(e) => { match e.kind() { std::io::ErrorKind::OutOfMemory => print_locked_memory_limit_info(), std::io::ErrorKind::PermissionDenied => print_io_uring_permission_info(), _ => {} } panic!("Cannot create runtime: {e}"); } };}// Code block without syntax highlightingconsole.log("Hello, world!");Tables
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Horizontal Rule
Footnotes
This is a footnote reference1.
Extended Markdown 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.
Create a GitHub repository card with the code ::github{repo="<owner>/<repository>"}.
Admonitions
Following types of admonitions are supported: note tip important warning caution
NOTEHighlights information that users should take into account, even when skimming.
TIPOptional information to help a user be more successful.
IMPORTANTCrucial information necessary for users to succeed.
WARNINGCritical content demanding immediate user attention due to potential risks.
CAUTIONNegative potential consequences of an action.
Custom Titles
The title of the admonition can be customized.
MY CUSTOM TITLEThis is a note with a custom title.
Basic syntax:
:::noteHighlights information that users should take into account, even when skimming.:::
:::tip[Custom Title]This is a tip with a custom title.:::GitHub Syntax
NOTEThe GitHub syntax is also supported.
> [!NOTE]> The GitHub syntax is also supported.
> [!TIP]> The GitHub syntax is also supported.Spoilers
You can add spoilers to your text. The text also supports Markdown syntax.
The content
The content :spoiler[is hidden **ayyy**]!Embedding Media
Videos
You can embed videos from various platforms like YouTube or Bilibili by copying and pasting the embed code:
YouTube
Draft Posts
You can mark posts as drafts by setting draft: true in the frontmatter. Draft posts will not be visible to visitors but can be previewed during development.
When the article is ready for publication, update the “draft” field to “false” in the Frontmatter:
---title: Draft Examplepublished: 2024-01-11T04:40:26.381Ztags: [Markdown, Blogging, Demo]category: Examplesdraft: false---Footnotes
-
This is the footnote content. ↩