Блог

Обзор

Блог в этом проекте реализован с использованием MDX файлов (Markdown с поддержкой JSX), которые хранятся в папке frontend/app/blog/(posts). Система построена на основе файловой маршрутизации Next.js и позволяет создавать и публиковать статьи с минимальными усилиями.

Основные возможности блога:

• Написание контента в формате Markdown с поддержкой JSX
• Автоматическое создание страниц для каждой статьи
• Поддержка метаданных (заголовок, описание, изображения, теги, категории и т.д.)
• Автоматическое формирование оглавления (TOC) на основе заголовков
• Фильтрация статей по категориям и тегам
• Оптимизация SEO (метаданные, JSON-LD)
• Функции социального шеринга

Структура блога

Блог организован следующим образом:

frontend/app/
├── blog/                     # Корневая папка блога
│   ├── page.tsx              # Главная страница блога (список всех постов)
│   ├── layout.tsx            # Лейаут для всех страниц блога
│   ├── not-found.tsx         # Страница 404 для блога
│   ├── [slug]/               # Динамический маршрут для отдельных постов
│   │   ├── page.tsx          # Шаблон для отдельного поста
│   │   └── _components/      # Компоненты для страницы поста
│   ├── _components/          # Общие компоненты блога
│   ├── (posts)/              # Папка с MDX файлами постов
│   │   ├── post-1.mdx
│   │   ├── post-2.mdx
│   │   └── ...
│   ├── category/             # Страницы для фильтрации по категориям
│   └── tag/                  # Страницы для фильтрации по тегам
│
└── lib/
    └── blog.ts               # Утилиты для работы с блогом

Создание новой статьи

Чтобы создать новую статью для блога, выполните следующие шаги:

1. Создайте MDX файл

Создайте новый файл в формате .mdx в папке frontend/app/blog/(posts)/. Имя файла будет использоваться в качестве URL-слага для вашей статьи, поэтому рекомендуется использовать строчные буквы и дефисы вместо пробелов (например, my-new-blog-post.mdx).

2. Добавьте метаданные

В начале файла добавьте метаданные в формате YAML между ---:

---
title: Название вашей статьи
createdAt: 2023-12-25
readingTime: 10
category: Разработка
tags: [NextJS, React, TypeScript]
description: Краткое описание вашей статьи, которое будет отображаться в списке и метаданных.
image: /images/blog/my-post-image.jpg
imageThumbnail: /images/blog/my-post-image-thumbnail.jpg
---

Описание метаданных:

• title - Заголовок статьи (обязательно)
• createdAt - Дата создания в формате YYYY-MM-DD (обязательно)
• readingTime - Примерное время чтения в минутах
• category - Категория статьи
• tags - Массив тегов
• description - Краткое описание статьи
• image - Путь к основному изображению статьи
• imageThumbnail - Путь к миниатюре (если отсутствует, будет использоваться основное изображение)

3. Напишите содержание

После блока с метаданными напишите содержание вашей статьи, используя Markdown:

# Заголовок первого уровня

Введение к вашей статье.

## Подзаголовок

Основное содержание с **жирным текстом**, *курсивом* и [ссылками](https://example.com).

### Еще один уровень заголовка

```typescript
// Пример кода
function example() {
  console.log("Hello, World!");
}
```

#### Четвертый уровень заголовка

- Список
- Пунктов

> Цитата или примечание

Важно: Заголовки второго уровня (##) и ниже автоматически добавляются в оглавление (TOC).

Добавление изображений

Для использования изображений в блоге:

1. Добавьте ваши изображения в папку public/images/blog/
2. Используйте относительные пути, начинающиеся с /images/blog/ в метаданных и в содержании

Пример использования изображений в тексте:

![Альтернативный текст](/images/blog/my-image.jpg)

Рекомендуемые размеры изображений:

• Основное изображение: 1200x630 пикселей
• Миниатюра: 400x225 пикселей

Использование MDX возможностей

MDX позволяет использовать React компоненты непосредственно в Markdown. Вы можете создавать сложные интерактивные элементы:

## Использование компонентов

<Alert type="info">
  Это пример компонента внутри MDX.
</Alert>

<CodeExample language="javascript">
{`
function helloWorld() {
  console.log("Hello, World!");
}
`}
</CodeExample>

Примечание: Для использования собственных компонентов в MDX, их необходимо добавить в компонент MDXContent в frontend/app/blog/_components/MDXContent.tsx.

Организация категорий и тегов

Статьи можно фильтровать по категориям и тегам. В проекте уже реализованы страницы:

• /blog/category/[category] - Список статей в определенной категории
• /blog/tag/[tag] - Список статей с определенным тегом

Рекомендации:

• Используйте ограниченный набор категорий для основной классификации (например, "Разработка", "UI/UX", "Бизнес")
• Используйте теги для более детальной классификации (технологии, методологии и т.д.)
• Соблюдайте консистентность в именовании категорий и тегов

Техническая реализация

Блог построен на нескольких ключевых компонентах:

Основные функции в lib/blog.ts

// Получение всех постов
getAllPosts(): BlogPost[]

// Получение поста по слагу
getPostBySlug(slug: string): BlogPost | null

// Фильтрация постов по категории и/или тегам
getFilteredPosts({ category, tags }): BlogPost[]

// Получение всех уникальных категорий
getAllCategories(): string[]

// Получение всех уникальных тегов
getAllTags(): string[]

Генерация статических маршрутов

Next.js использует функцию generateStaticParams для создания статических маршрутов для каждой статьи:

// В файле [slug]/page.tsx
export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Кастомизация блога

Изменение стилей

Стили для MDX контента определены в компоненте MDXContent. Вы можете настроить стили для заголовков, списков, ссылок и других элементов.

Добавление новых компонентов

Чтобы добавить новые React компоненты для использования в MDX:

1. Создайте компонент в frontend/app/blog/_components/
2. Импортируйте его в MDXContent.tsx
3. Добавьте компонент в объект components

Изменение разметки страницы поста

Чтобы изменить структуру страницы отдельного поста, отредактируйте файл frontend/app/blog/[slug]/page.tsx.

SEO оптимизация

Блог уже включает базовые элементы SEO:

• Метаданные (title, description) для каждой страницы
• Теги Open Graph для социальных сетей
• Twitter карточки для превью в Twitter
• JSON-LD разметка для поисковых систем
• Канонические URL для предотвращения дублирования контента

Для максимального SEO эффекта убедитесь, что каждая статья имеет:

• Уникальный и информативный заголовок
• Краткое, но содержательное описание (до 160 символов)
• Качественное основное изображение
• Релевантные категории и теги
• Структурированный контент с использованием заголовков разных уровней

Примеры использования

Пример простой статьи

---
title: Использование Docker в разработке
createdAt: 2023-12-10
readingTime: 15
category: DevOps
tags: [Docker, Контейнеризация, Разработка]
description: Узнайте, как Docker может упростить процесс разработки и сделать его более эффективным.
image: /images/blog/docker-development.jpg
---

# Использование Docker в разработке

Docker становится незаменимым инструментом в современной разработке. В этой статье мы рассмотрим основные преимущества использования Docker...

## Что такое Docker?

Docker — это платформа для разработки, доставки и запуска приложений в контейнерах...

## Преимущества использования Docker

### Изоляция окружения

Каждый контейнер имеет свою изолированную среду...

### Портативность

Контейнеры могут быть запущены на любой системе...

## Начало работы с Docker

```bash
# Установка Docker
sudo apt-get install docker-ce docker-ce-cli

# Запуск контейнера
docker run -p 8080:80 nginx
```

## Заключение

Docker предоставляет множество преимуществ для разработчиков...