博客

LandingMore 内置一个基于 Fumadocs MDX 构建的强大博客系统。博客系统支持多语言内容、分类、作者和丰富的内容格式，非常适合 SaaS 产品介绍、公告、教程和知识库文章。

博客系统架构

博客系统使用 Fumadocs MDX 构建，并与国际化集成。

blog-card.tsx

blog-grid.tsx

blog-category-filter.tsx

blog-toc.tsx

source.ts

source.config.ts

数据源配置

博客系统在 source.config.ts 文件中使用 Fumadocs MDX 配置数据源：

source.config.ts

import { defineCollections, frontmatterSchema } from 'fumadocs-mdx/config';
import { z } from 'zod';
 
// 博客文章集合
export const blog = defineCollections({
  type: 'doc',
  dir: 'content/blog',
  schema: frontmatterSchema.extend({
    image: z.string(),
    date: z.string().date(),
    published: z.boolean().default(true),
    categories: z.array(z.string()),
    author: z.string(),
  }),
});
 
// 博客作者集合
export const author = defineCollections({
  type: 'doc',
  dir: 'content/author',
  schema: z.object({
    name: z.string(),
    avatar: z.string(),
    description: z.string().optional(),
  }),
});
 
// 博客分类集合
export const category = defineCollections({
  type: 'doc',
  dir: 'content/category',
  schema: z.object({
    name: z.string(),
    description: z.string().optional(),
  }),
});

然后在 src/lib/source.ts 中使用 Fumadocs 加载器加载博客文章、作者和分类：

src/lib/source.ts

import { type InferPageType, loader } from 'fumadocs-core/source';
import { createMDXSource } from 'fumadocs-mdx';
import { author, blog, category } from '../../../.source';
import { docsI18nConfig } from './i18n';
 
/**
 * 博客文章源
 */
export const blogSource = loader({
  baseUrl: '/blog',
  i18n: docsI18nConfig,
  source: createMDXSource(blog),
});
 
/**
 * 博客作者源
 */
export const authorSource = loader({
  baseUrl: '/author',
  i18n: docsI18nConfig,
  source: createMDXSource(author),
});
 
/**
 * 博客分类源
 */
export const categorySource = loader({
  baseUrl: '/category',
  i18n: docsI18nConfig,
  source: createMDXSource(category),
});
 
// 类型定义
export type BlogType = InferPageType<typeof blogSource>;
export type AuthorType = InferPageType<typeof authorSource>;
export type CategoryType = InferPageType<typeof categorySource>;

创建博客内容

添加新作者

在 content/author 目录中创建新的 MDX 文件：

content/author/john-doe.mdx

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

添加新分类

在 content/category 目录中创建新的 MDX 文件：

content/category/tutorial.mdx

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

添加新博客文章

在 content/blog 目录中创建新的 MDX 文件：

content/blog/my-first-post.mdx

---
title: My First Blog Post
description: This is a brief description of my first blog post.
image: https://cdn.LandingMore.com/LandingMore/images/blog/my-first-post.jpg
date: "2023-12-01"
published: true
categories: ["tutorial", "announcement"]
author: "LandingMore"
---
 
# 介绍
 
这是我的第一篇博客文章。在这里我将谈论一些有趣的事情。
 
## 第一部分
 
这里是一些内容...
 
## 第二部分
 
这里是更多内容...

多语言支持

LandingMore 博客系统完全支持国际化。您可以使用以下文件命名约定创建多语言内容：

默认语言（例如英语）：filename.mdx
其他语言（例如中文）：filename.zh.mdx

多语言作者和分类

对作者和分类遵循相同的模式：

content/author/LandingMore.zh.mdx

---
name: LandingMore 团队
avatar: /images/authors/LandingMore.jpg
---

content/category/announcement.zh.mdx

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

多语言博客文章示例

英语博客文章：

content/blog/welcome-post.mdx

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

同一篇文章的中文版本：

content/blog/welcome-post.zh.mdx

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

付费阅读文章

您可以通过设置 premium 字段为 true 来创建付费阅读文章：

content/blog/premium.mdx

---
title: Premium Post
...
premium: true
---
 
这是付费文章的免费阅读部分的内容。
 
...
 
<PremiumContent>
 
这是付费文章的付费阅读部分的内容。
 
...
 
</PremiumContent>

如果博客文章是付费的，在博客卡片的右上角上会有一个付费标记。

如果用户未登录，他们只能看到付费文章的免费阅读部分的内容，同时提示用户登录查看完整内容。

如果用户已登录，但不是付费用户，他们只能看到付费文章的免费阅读部分的内容，同时提示用户升级到付费计划查看完整内容。

如果用户已登录，并且是付费用户，他们可以查看付费文章的完整的内容。

高级用法

自定义博客文章数据结构

要向博客文章、作者或分类添加新字段：

在 source.config.ts 中修改架构
运行命令 pnpm run content 重新生成 .source 文件夹
更新组件以显示新字段

示例：添加"精选"字段

source.config.ts

export const blog = defineCollections({
  type: 'doc',
  dir: 'content/blog',
  schema: frontmatterSchema.extend({
    image: z.string(),
    date: z.string().date(),
    published: z.boolean().default(true),
    categories: z.array(z.string()),
    author: z.string(),
    // 添加新字段
    featured: z.boolean().default(false),
  }),
});

然后，您可以在博客文章中使用此字段：

content/blog/important-post.mdx

---
title: 重要公告
description: 阅读这个重要公告
image: https://cdn.LandingMore.com/LandingMore/images/blog/announcement.jpg
date: "2023-12-01"
published: true
categories: ["announcement"]
author: "LandingMore"
featured: true
---
 
内容在这里...

然后，运行命令 pnpm run content 重新生成 .source 文件夹。

程序化查询文章

您可以使用 Fumadocs 源程序化查询文章：

import { blogSource, authorSource, categorySource } from '@/lib/docs/source';
 
// 获取所有博客文章
const allPosts = blogSource.getPages();
 
// 获取已发布的文章
const publishedPosts = allPosts.filter(post => post.data.published);
 
// 按分类获取文章
const getPostsByCategory = (categorySlug: string) => {
  return allPosts.filter(post =>
    post.data.categories.includes(categorySlug)
  );
};
 
// 按作者获取文章
const getPostsByAuthor = (authorSlug: string) => {
  return allPosts.filter(post => post.data.author === authorSlug);
};
 
// 获取所有作者
const allAuthors = authorSource.getPages();
 
// 获取所有分类
const allCategories = categorySource.getPages();

更改博客文章卡片布局

在 src/components/blog/blog-card.tsx 中自定义博客卡片组件：

src/components/blog/blog-card.tsx

import type { BlogType } from '@/lib/docs/source';
 
interface BlogCardProps {
  post: BlogType;
}
 
export function BlogCard({ post }: BlogCardProps) {
  return (
    <div className="group flex flex-col border rounded-lg overflow-hidden h-full bg-card shadow-sm hover:shadow-md transition-shadow">
      {/* 通过 post.data 访问文章数据 */}
      <h3>{post.data.title}</h3>
      <p>{post.data.description}</p>
      <time>{post.data.date}</time>
      {/* ... 组件的其余部分 */}
    </div>
  );
}