Blog System
Configure blog publishing and premium-content behavior. Blog now supports Pro-gated content, rich Fumadocs blocks, and SSR-first rendering.
The blog module renders articles from content/posts/*.mdx, compiled by Content Collections.
Compared with the previous version, blog now supports:
- SSR-first article rendering
- Rich Fumadocs block components in blog posts
- GFM tables in Markdown (
remark-gfm)
Quick Start
Toggle blog route access with config.ui.blog.enabled.
// src/config/index.ts
ui: {
blog: { enabled: true },
}Configure blog menu labels in i18n.
// src/config/index.ts
i18n: {
locales: {
zh: { headerMenuMap: { blog: "Blog" } },
en: { headerMenuMap: { blog: "Blog" } },
},
}Create or edit an article under content/posts/*.mdx.
Frontmatter Reference
| Field | Required | Purpose |
|---|---|---|
title | Yes | Post title |
date | Yes | Publish date |
authorName | Yes | Author display name |
tags | Yes | Tag list |
published | Yes | Controls list/sitemap visibility |
content | Derived | Source markdown body (collection input) |
excerpt | No | Summary text |
image | No | Cover image |
authorImage | No | Author avatar |
authorLink | No | Author profile link |
categories | No | Category grouping |
Rendering Architecture
| Layer | File | Responsibility |
|---|---|---|
| Route page | src/app/(landing-page)/[locale]/(cms)/blog/[...path]/page.tsx | Loads post, checks access, passes |
| SSR content | src/modules/landing-page/blog/components/PostContent.tsx | SSR-first blog content rendering |
Rich MDX Block Support
Blog posts now use the same rich Fumadocs block mapping as docs.
Shared mapping entry:
src/modules/landing-page/blog/components/FumadocsRichMdxComponents.tsx
Common supported blocks include:
Callout,CalloutContainerCards,CardTabs,Tab,TabsList,TabsTrigger,TabsContentCodeBlock,CodeBlockTabs,DynamicCodeBlockSteps,StepFiles,Folder,FileAccordions,AccordionBanner,InlineTOC,TypeTable,ImageZoom
Markdown Compatibility
Blog compilation now enables GFM syntax (remark-gfm) in content-collections.ts, so Markdown tables render correctly.
| Col A | Col B |
| --- | --- |
| A1 | B1 |Image Rules
- Standard Markdown image syntax is supported:
ImageZoomsupports responsive usage without explicit width/height:
<ImageZoom
src="/images/blog/cover.png"
alt="Cover"
className="h-auto w-full"
/>