⚡

博客文章创建器 blog-creator

博客文章创建器是一款专为开发者和内容创作者设计的工具技能，用于高效生成符合SEO标准的MDX格式博客文章。它通过规范化的Frontmatter元数据管理、Markdown内容编写和图片资源引用，帮助用户快速构建结构清晰、易于搜索引擎收录的技术博客、产品文档或内容营销文章。关键词：MDX博客生成，SEO优化，Frontmatter规范，技术写作，内容创作工具。

前端开发 0 次安装 0 次浏览 更新于 3/1/2026

name: blog-creator description: 使用正确的Frontmatter创建SEO优化的MDX博客文章

博客文章创建技能

此技能可帮助您使用MDX内容引擎创建高质量、SEO优化的博客文章。

目录结构

  • 内容位置: src/content/blog/*.mdx
  • 图片: /public/assets/images/ (引用为 /assets/images/...)
  • 引擎: src/lib/mdx/blogs.ts
  • 前端: src/app/(website-layout)/blog/

文件格式

每篇博客文章必须是一个包含特定Frontmatter的.mdx文件：

---
title: "您引人入胜的标题"
tags: ["标签1", "标签2", "seo关键词"]
featuredImage: "/assets/images/您的图片.png"
createdDate: "YYYY-MM-DD"
description: "用于SEO的引人注目的元描述（建议150-160个字符）"
---

# 您的标题 H1

引言段落...

## 章节 H2

内容...

最佳实践

  1. Slug生成: 文件名成为slug（例如，my-post.mdx -> /blog/my-post）。请使用kebab-case（短横线分隔）。
  2. 图片: 将图片放置在 public/assets/images 中，并使用绝对路径引用它们。
  3. 标签: 用于“相关文章”逻辑。包含3-5个相关标签。
  4. 组件: 您可以在MDX文件中导入和使用React组件（如果在 mdx-components.tsx 中配置）。
  5. SEO: - title: 用于 <title> 和 og:title。 - description: 用于 <meta name="description"> 和 og:description。 - featuredImage: 用于 og:image。 请勿在Frontmatter中使用单引号。请使用双引号。

工作流程

  1. 创建新文件：src/content/blog/您的-slug.mdx。
  2. 添加Frontmatter。
  3. 使用Markdown语法编写内容。
  4. （可选）将图片添加到 public/assets/images/。

示例

文件：src/content/blog/getting-started.mdx

---
title: "Indie Kit入门指南"
tags: ["指南", "教程", "indie-kit"]
featuredImage: "/assets/images/og.png"
createdDate: "2024-03-20"
description: "在10分钟内使用Indie Kit设置新SaaS项目的完整指南。"
---

# 入门指南

欢迎来到SaaS开发的未来...

更多详情请参阅 reference.md。