# 内容管理斐流艺创项目的内容管理系统负责处理博客文章、技术文档、链接数据等各类内容的存储、处理和渲染。 ## 内容组织结构 ### 1. 内容存储目录项目内容按照类型存储在 [src/content/](file://c:\project\official\src\content) 目录下： ``` src/content/ ├── docs/ - 技术文档内容 └── links/ - 链接数据 ``` ### 2. 文档内容结构技术文档使用MDX格式存储，按功能模块分类： ``` src/content/docs/ ├── _meta.json - 文档结构配置 ├── getting-started/ - 快速开始指南 ├── project/ - 项目介绍文档 ├── features/ - 功能模块文档 └── development/ - 开发指南文档 ``` 文档目录通过_meta.json文件定义结构： ```json { "getting-started": { "title": "快速开始", "description": "从这里开始了解和使用斐流艺创项目" }, "project": { "title": "项目介绍", "description": "斐流艺创的网站项目介绍" } } ``` ### 4. 链接数据结构链接数据使用JSON格式存储： ``` src/content/links/ ├── category/ - 分类配置 ├── friends.json - 友情链接数据 └── profile.json - 个人资料数据 ``` ## 内容处理流程 ### 1. 内容读取项目使用以下方式读取内容文件： ```typescript // src/lib/content-reader.ts import fs from 'fs/promises'; import path from 'path'; import matter from 'gray-matter'; interface ContentFile { slug: string[]; content: string; data: Record; } export async function readContentFile(filePath: string): Promise { const fileContent = await fs.readFile(filePath, 'utf-8'); const { content, data } = matter(fileContent); // 从文件路径生成slug const slug = filePath .replace(/\\/g, '/') .replace(/^.*\/content\//, '') .replace(/\.(mdx?)$/, '') .split('/'); return { slug, content, data }; } ``` ### 2. 元数据解析使用gray-matter库解析Frontmatter元数据： ```typescript // src/lib/metadata-parser.ts import matter from 'gray-matter'; export interface ContentMetadata { title: string; description: string; date: string; tags?: string[]; category?: string; [key: string]: any; } export function parseMetadata(content: string): ContentMetadata { const { data } = matter(content); return data as ContentMetadata; } ``` ### 3. 内容转换将Markdown内容转换为HTML： ```typescript // src/lib/content-transformer.ts import { compileMDX } from '@mdx-js/mdx'; import remarkGfm from 'remark-gfm'; import rehypePrettyCode from 'rehype-pretty-code'; export async function transformContent(content: string): Promise { const compiled = await compileMDX(content, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypePrettyCode], }); return compiled.value; } ``` ## 内容渲染机制 ### 1. MDX渲染项目使用MDX渲染内容，支持React组件嵌入： ``tsx // src/components/content-display.tsx import { useMDXComponent } from 'next-contentlayer/hooks'; import { mdxComponents } from '@/components/mdx/mdx-components'; interface ContentDisplayProps { content: string; } export function ContentDisplay({ content }: ContentDisplayProps) { const MDXContent = useMDXComponent(content); return (

); } ``` ### 2. 代码高亮使用PrismJS实现代码语法高亮： ``tsx // src/components/mdx/mdx-pre.tsx import { highlight, languages } from 'prismjs'; import 'prismjs/components/prism-typescript'; import 'prismjs/components/prism-jsx'; interface PreProps { children: string; className?: string; } export function Pre({ children, className }: PreProps) { const language = className?.replace(/language-/, '') || 'text'; const highlighted = languages[language] ? highlight(children, languages[language], language) : children; return (


  );
}
```

### 3. 目录生成

自动生成内容目录结构：

``typescript
// src/lib/table-of-contents.ts
interface TocItem {
  id: string;
  text: string;
  level: number;
}

export function generateTableOfContents(content: string): TocItem[] {
  const headings = content.match(/^(#{1,6})\s+(.+)$/gm) || [];
  
  return headings.map(heading => {
    const [, hashes, text] = heading.match(/^(#{1,6})\s+(.+)$/) || [];
    const level = hashes.length;
    const id = text.toLowerCase().replace(/\s+/g, '-');
    
    return { id, text, level };
  });
}
```

## 内容缓存策略

### 1. 内存缓存

使用内存缓存提高内容访问速度：

``typescript
// src/lib/content-cache.ts
class ContentCache {
  private cache: Map = new Map();
  private ttl: number;
  
  constructor(ttl: number = 5 * 60 * 1000) { // 5分钟默认TTL
    this.ttl = ttl;
  }
  
  get(key: string): any {
    const item = this.cache.get(key);
    if (!item) return null;
    
    if (Date.now() > item.expires) {
      this.cache.delete(key);
      return null;
    }
    
    return item.value;
  }
  
  set(key: string, value: any): void {
    this.cache.set(key, {
      value,
      expires: Date.now() + this.ttl
    });
  }
  
  clear(): void {
    this.cache.clear();
  }
}

export const contentCache = new ContentCache();
```

### 2. 增量静态再生

使用Next.js ISR功能实现内容更新：

```
// src/app/docs/[...slug]/page.tsx
export const revalidate = 3600; // 1小时重新验证

export async function generateStaticParams() {
  // 预生成所有文档路径
  const docs = await getAllDocs();
  return docs.map(doc => ({ slug: doc.slug }));
}
```

## 内容API设计

### 1. 内容获取钩子

提供React钩子简化内容获取：

``typescript
// src/hooks/use-content-data.ts
import { useState, useEffect } from 'react';
import { contentCache } from '@/lib/content-cache';

interface UseContentDataOptions {
  revalidate?: boolean;
  cache?: boolean;
}

export function useContentData(
  key: string, 
  fetcher: () => Promise,
  options: UseContentDataOptions = {}
) {
  const { revalidate = false, cache = true } = options;
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        
        // 检查缓存
        if (cache) {
          const cached = contentCache.get(key);
          if (cached && !revalidate) {
            setData(cached);
            setLoading(false);
            return;
          }
        }
        
        // 获取新数据
        const result = await fetcher();
        
        // 缓存数据
        if (cache) {
          contentCache.set(key, result);
        }
        
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
  }, [key, revalidate, cache]);
  
  return { data, loading, error };
}
```

### 2. 内容服务层

封装内容处理逻辑：

``typescript
// src/lib/content-service.ts
import { readContentFile } from '@/lib/content-reader';
import { parseMetadata } from '@/lib/metadata-parser';
import { transformContent } from '@/lib/content-transformer';

export class ContentService {
  static async getDocContent(slug: string[]) {
    const filePath = path.join(process.cwd(), 'src/content/docs', ...slug) + '.mdx';
    const { content, data } = await readContentFile(filePath);
    
    const metadata = parseMetadata(content);
    const transformedContent = await transformContent(content);
    
    return {
      slug,
      content: transformedContent,
      ...metadata,
      ...data
    };
  }
}
```

## 内容安全处理

### 1. XSS防护

防止跨站脚本攻击：

``typescript
// src/lib/content-sanitizer.ts
import sanitizeHtml from 'sanitize-html';

export function sanitizeContent(content: string): string {
  return sanitizeHtml(content, {
    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'code', 'pre']),
    allowedAttributes: {
      ...sanitizeHtml.defaults.allowedAttributes,
      'img': ['src', 'alt', 'width', 'height'],
      'code': ['className'],
      'pre': ['className']
    }
  });
}
```

### 2. 外部链接处理

安全处理外部链接：

``typescript
// src/lib/link-handler.ts
export function processExternalLinks(html: string): string {
  return html.replace(
    /]*?\s+)?href=(["'])(.*?)\1/g,
    (match, quote, href) => {
      if (href.startsWith('http')) {
        return match.replace('>', ' target="_blank" rel="noopener noreferrer">');
      }
      return match;
    }
  );
}
```

## 内容版本控制

### 1. Git集成

使用Git管理内容版本：

``bash
# 提交内容变更
git add src/content/
git commit -m "docs: update documentation"
git push origin main
```

### 2. 变更历史

记录内容变更历史：

``typescript
// src/lib/content-history.ts
interface ContentHistory {
  version: string;
  date: string;
  author: string;
  changes: string[];
}

export function getContentHistory(filePath: string): ContentHistory[] {
  // 通过Git命令获取文件变更历史
  // 实现细节省略
  return [];
}
```

## 内容搜索索引

### 1. 搜索数据生成

为搜索功能生成索引数据：

``typescript
// src/lib/search-indexer.ts
interface SearchableContent {
  id: string;
  title: string;
  description: string;
  content: string;
  type: 'doc' | 'link';
  path: string;
  tags?: string[];
}

export async function generateSearchIndex(): Promise {
  const docs = await getAllDocs();
  const links = await getAllLinks();
  
  return [
    ...docs.map(post => ({
      id: `doc-${post.slug.join('-')}`,
      title: post.title,
      description: post.description,
      content: post.content,
      type: 'doc' as const,
      path: `/docs/${post.slug.join('/')}`,
      tags: post.tags
    })),
    // 其他内容类型类似处理
  ];
}
```

通过这套内容管理系统，项目能够高效地处理、缓存和渲染各类内容，为用户提供优质的阅读体验。