Теги и категории

MDX сочетает возможности Markdown и JSX, позволяя интегрировать компоненты прямо в контент документа. Теги и категории представляют собой метаданные документа, которые обычно используют для организации, фильтрации и отображения содержимого на сайтах и в блогах.

Frontmatter

MDX поддерживает frontmatter — специальный блок YAML в начале файла, где задаются ключевые метаданные. Пример структуры для тегов и категорий:

---
title: "Понимание тегов и категорий в MDX"
date: "2026-03-23"
tags:
  - javascript
  - mdx
  - tutorial
categories:
  - programming
  - web-development
---
  • tags — список ключевых слов, отражающих тематику документа. Используются для быстрого поиска и фильтрации контента.
  • categories — более широкие группы, позволяющие классифицировать статьи по направлениям.

Frontmatter автоматически доступен в процессе сборки сайта, например, через Next.js, Gatsby или другие статические генераторы, поддерживающие MDX.

Использование тегов и категорий в компонентах

MDX позволяет импортировать React-компоненты и использовать метаданные прямо внутри документа. Например, для отображения тегов можно создать компонент Tags:

import { Tags } from '../components/Tags';

export const meta = {
  tags: ["javascript", "mdx", "tutorial"],
  categories: ["programming", "web-development"]
};

<Tags items={meta.tags} />

Преимущества такого подхода:

  • Мгновенное связывание контента с визуальными компонентами.
  • Возможность динамически генерировать списки статей по тегам.
  • Легкость интеграции с фильтрацией и поиском.

Динамическая генерация страниц по тегам

С помощью Next.js или Gatsby можно создавать страницы, которые автоматически группируют статьи по тегам:

  1. Сбор всех тегов:
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getAllTags() {
  const filenames = fs.readdirSync(postsDirectory);
  const tags = new Set();

  filenames.forEach((filename) => {
    const filePath = path.join(postsDirectory, filename);
    const fileContents = fs.readFileSync(filePath, 'utf8');
    const { data } = matter(fileContents);

    if (data.tags) {
      data.tags.forEach(tag => tags.add(tag));
    }
  });

  return Array.from(tags);
}
  1. Фильтрация постов по тегу:
export function getPostsByTag(tag) {
  const filenames = fs.readdirSync(postsDirectory);
  return filenames
    .map(filename => {
      const filePath = path.join(postsDirectory, filename);
      const fileContents = fs.readFileSync(filePath, 'utf8');
      const { data, content } = matter(fileContents);
      return { ...data, content };
    })
    .filter(post => post.tags && post.tags.includes(tag));
}

Категории и иерархия

В отличие от тегов, категории часто имеют иерархическую структуру, например:

categories:
  - programming
  - programming/javascript
  - programming/javascript/mdx

Такой подход позволяет создавать многоуровневую навигацию, где пользователи могут просматривать сначала общую категорию, а затем переходить к более узким темам.

Визуализация и стилизация

Теги и категории можно выводить различными способами:

  • Списки с ссылками: каждый тег ведет на страницу с фильтром.
  • Теги в виде чипов: для компактного отображения рядом с заголовком статьи.
  • Фильтруемые панели: на странице блога можно создавать динамические панели с категориями и тегами, что повышает удобство навигации.

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

export function Tags({ items }) {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      {items.map(tag => (
        <a
          key={tag}
          href={`/tags/${tag}`}
          style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: '#f0f0f0',
            textDecoration: 'none',
            color: '#333'
          }}
        >
          {tag}
        </a>
      ))}
    </div>
  );
}

Практические рекомендации

  • Уникальность тегов: избегать дублирования, использовать унифицированный стиль (например, все строчные буквы, без пробелов).
  • Разумная глубина категорий: слишком глубокие иерархии затрудняют навигацию.
  • Согласованность метаданных: использовать одинаковые ключи (tags и categories) во всех MDX-файлах для удобной автоматизации.

Теги и категории в MDX являются мощным инструментом организации контента, их правильное использование облегчает навигацию, поиск и интеграцию с компонентами интерфейса.

Оглавление