新的篇章
返回文章列表

新的篇章

#欢迎使用新的文章系统

示例图片

这是一个全新的文章管理系统，支持 MDX 和 Slate 两种格式的文章。

#主要特性

#1. 统一的文章目录

所有 MDX 文章现在都存放在 articles/ 目录中：

  • 支持子文件夹组织
  • 图片资源可以放在同一目录
  • 使用 YAML frontmatter 中的 slug 字段标识文章

#2. 支持多种内容类型

  • MDX 文章：使用 next-mdx-remote 渲染，支持 React 组件
  • Slate 文章：从数据库读取，使用 Slate 渲染器显示
  • Slate Memo：动态内容，只在列表中展示，不可点击进入

#3. 灵活的图片处理

MDX
# 本地图片（相对路径）
![本地图片](/image.jpg)

# 网络图片
![网络图片](https://example.com/image.jpg)

#4. 代码高亮

支持多种语言的代码高亮：

TypeScript
interface Article {
  type: 'mdx' | 'slate-article' | 'slate-memo'
  title: string
  slug: string
  date: Dayjs
  tags: string[]
}
Python
def hello_world():
    print("Hello, World!")

#5. Markdown 扩展

支持 GitHub Flavored Markdown (GFM)：

FeatureStatusDescription
Tables✅表格支持
Strikethrough✅删除线
Task lists✅- [ ] 任务列表
Autolinks✅自动链接

#使用方法

#创建新文章

  1. 在 articles/ 目录下创建 .mdx 文件
  2. 添加 frontmatter：
YAML
---
title: 文章标题
slug: article-slug
date: 2024-10-09
banner: ./banner.jpg  # 可选
isDev: false         # 开发模式
tags:
  - Tag1
  - Tag2
---
  1. 编写 Markdown 内容

#子文件夹组织

articles/
  ├── welcome.mdx
  ├── tech/
  │   ├── typescript-tips.mdx
  │   └── react-hooks.mdx
  └── life/
      └── travel.mdx

#下一步

后续还会集成数据库中的 Slate 文章，所有内容将按日期统一排序展示。