Blog

MkSaaS includes a blog system built with Fumadocs MDX, supporting multi-language content, categories, authors, and rich content formatting.

Creating Blog Content

Adding a New Author

Create a new MDX file in the content/author directory:

---
name: John Doe
avatar: /images/authors/john-doe.jpg
---

Adding a New Category

Create a new MDX file in the content/category directory:

---
name: Tutorial
description: Step-by-step guides to learn new features
---

Adding a New Blog Post

Create a new MDX file in the content/blog directory:

---
title: My First Blog Post
description: This is a brief description of my first blog post.
image: https://cdn.mksaas.com/mksaas/images/blog/my-first-post.jpg
date: "2023-12-01"
published: true
categories: ["tutorial", "announcement"]
author: "mksaas"
---

# Introduction

This is my first blog post. Here I'll talk about something interesting.

## Section 1

Some content here...

## Section 2

More content here...

Multi-language Support

MkSaaS blog system fully supports internationalization. You can create content in multiple languages using the following file naming convention:

1. Default locale (e.g., English): filename.mdx
2. Other locales (e.g., Chinese): filename.zh.mdx

Multi-language Authors and Categories

Follow the same pattern for authors and categories:

---
name: MkSaaS 团队
avatar: /images/authors/mksaas.jpg
---

---
name: 公告
description: 官方平台公告和更新
---

Multi-language Blog Post Example

For an English blog post:

---
title: Welcome to our Blog
description: Our first official blog post
image: https://cdn.mksaas.com/mksaas/images/blog/welcome.jpg
date: "2023-12-01"
published: true
categories: ["announcement"]
author: "mksaas"
---

Content in English...

For the same post in Chinese:

---
title: 欢迎来到我们的博客
description: 我们的第一篇官方博客文章
image: https://cdn.mksaas.com/mksaas/images/blog/welcome.jpg
date: "2023-12-01"
published: true
categories: ["announcement"]
author: "mksaas"
---

Content in Chinese...

Premium Content

You can create premium content by adding the premium field set to true to the blog post:

---
title: Premium Post
...
premium: true
---

This is the free content part.

...

<PremiumContent>

This is the paid content part.

...

</PremiumContent>

If the blog post is premium, there will be a premium badge in the blog card.

If user is not logged in, they can only see the free content part.

If user is logged in, but they are not a premium user, they can see the free content part.

If user is logged in, and they are a premium user, they can see the paid content part.

Customization

Customizing the Blog Schema

To add new fields to blog posts, authors, or categories:

1. Modify the schema in source.config.ts
2. Run pnpm run content to regenerate the .source folder
3. Update components to display the new fields

Changing Blog Post Card Layout

Customize the blog card component in src/components/blog/blog-card.tsx.

Video Tutorial

Next Steps