Adding New Posts

This post explains how to create new posts in the Astro AntfuStyle Theme and provides guidelines, tips, and tricks for writing posts.

Creating a New Post#

To create a new post, add a new .md or .mdx file in src/content/blog/ (see when to use MDX for enhanced Markdown features). Use a consistent naming scheme (lower-case, dashes instead of spaces), as the filename will be used as the path.

You can organize posts directly under src/content/blog/ or in nested subdirectories (see Astro Routing Docs for more):

src/content/blog
├── post-1.md
└── post-2
    └── index.mdx
└── subdirectory
    └── post-3.md

<!-- `post-1.md` generates the page path `/blog/post-1` -->
<!-- `post-2/index.mdx` generates the page path `/blog/post-2` -->
<!-- `post-3.md` in a subdirectory generates the page path `/blog/subdirectory/post-3` -->

Choosing Between Markdown and MDX#

Use Markdown for simple posts with minimal interaction. You can also embed HTML and UnoCSS directly in Markdown, e.g.:

Visit the theme's <a class="inline-block ml-1.5 op-75 hover:op-100" href="https://github.com/lin-stephanie/astro-antfustyle-theme"><span i-simple-icons-github></span> GitHub repo</a>

Use MDX if:

• You need to embed components.
• The content requires conditional rendering or dynamic data.
• You need interactive code examples or other highly interactive content.

Editing Frontmatter#

All .md and .mdx files in the src/content/blog/ belong to the blog collection.

Each post requires YAML frontmatter, which adds metadata at the top of Markdown/MDX files. The frontmatter fields for blog posts are defined by schema: postSchema in src/schema.ts as follows:

The theme includes a VS Code snippet for auto-generating this frontmatter (located in .vscode/astro-antfustyle-theme.code-snippets). Type postFrontmatter and press tab to insert it (tab completion is enabled in .vscode/settings.json).

Writing the Post#

Once frontmatter is set, start writing your post!

To see how basic Markdown renders, refer to the Markdown Syntax Guide. To explore how to use MDX to enhance your flexibility in writing posts, check the MDX Docs and MDX in Astro.

Regardless of whether you’re using Markdown or MDX, don’t miss out on the Markdown/MDX extended features supported by this theme, including callouts (admonitions/alerts), fully-featured code blocks, image captions and links, video embeddings, styled links, and more.

Additionally, the title (set by the title property in the YAML frontmatter) is automatically rendered as an h1. You don’t need to include the title again in the post, and it’s recommended to start with h2 headings.

Wrapping Up#

Here’s how to create a new post in the theme. Once completed, you can preview your post in real-time at /blog/if-stored-in-subdirectory/your-post-name in your browser.

Happy writing, and may your content reach a wide and engaged audience! 🌎