Skip to content

MARKDOWN_GUIDE.md

Latest commit

 

History

History
178 lines (126 loc) · 5.94 KB

MARKDOWN_GUIDE.md

File metadata and controls

178 lines (126 loc) · 5.94 KB
Raw

Руководство по использованию Markdown в постах

Теперь вы можете использовать Markdown для форматирования постов! Это позволяет добавлять изображения, заголовки, списки, ссылки и многое другое.

Основной синтаксис

Заголовки

## Заголовок 2 уровня
### Заголовок 3 уровня
#### Заголовок 4 уровня

Текстовое форматирование

**Жирный текст**
*Курсив*
~~Зачеркнутый текст~~

Списки

Маркированный список:

- Первый пункт
- Второй пункт
- Третий пункт

Нумерованный список:

1. Первый пункт
2. Второй пункт
3. Третий пункт

Ссылки

[Текст ссылки](https://example.com)

Цитаты

> Это цитата
> Можно писать на нескольких строках

Код

Инлайн-код:

Используйте `код` внутри текста

Блок кода:

```
function example() {
  console.log("Hello, World!");
}
```

Изображения

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

  1. Поместите изображение в папку public/images/<slug>/ (одна папка на статью, где <slug> совпадает с именем .md-файла без расширения)

    Например: для статьи content/articles/my-post.md фото лежит в public/images/my-post/my-photo.jpg

  2. Используйте Markdown синтаксис:

    ![Описание изображения](/images/<slug>/my-photo.jpg)

Примеры

Простое изображение:

![Скриншот проекта](/images/screenshot.png)

Изображение с подробным описанием:

![Диаграмма архитектуры системы, показывающая взаимодействие компонентов](/images/architecture.png)

Изображение с подписью:

<figure class="article-figure">
  <img src="/images/my-post/photo.jpg" alt="Описание изображения" />
  <figcaption>Подпись к изображению</figcaption>
</figure>

Рекомендации по изображениям

  • Формат: Используйте JPG для фотографий, PNG для скриншотов и графики
  • Размер: Оптимизируйте изображения перед загрузкой (рекомендуется до 1MB)
  • Названия файлов: Используйте понятные имена на английском, без пробелов (например: project-screenshot.jpg)
  • Alt-текст: Всегда указывайте описание в квадратных скобках для доступности

Пример полного поста

Это вводный параграф. Здесь можно описать основную идею поста.

## Основная часть

Давно хотел поделиться этим проектом. Вот что получилось:

![Главный экран приложения](/images/main-screen.png)

### Ключевые особенности

- **Быстрая работа** - оптимизация производительности
- **Красивый дизайн** - современный UI/UX
- **Удобство** - интуитивный интерфейс

Можно посмотреть [исходный код на GitHub](https://github.com/username/repo).

## Технические детали

Для реализации использовал:

```javascript
const config = {
  framework: 'React',
  language: 'TypeScript'
};

Важно: Не забудьте установить все зависимости перед запуском!

Результат

Финальный результат

Как по мне, получилось отлично!


## Структура поста в коде

```typescript
{
  id: 2,
  date: "2025-01-15",
  title: "Название поста",
  preview: "Краткое описание для превью",
  content: `Здесь весь Markdown контент...
  
![Изображение](/images/photo.jpg)

## Заголовок

Текст поста...
  `,
  tags: ["React", "TypeScript", "Web"]
}

Полезные советы

  1. Форматирование: Оставляйте пустую строку между параграфами для правильного отображения
  2. Изображения: Проверяйте пути к изображениям - они должны начинаться с /images/
  3. Предпросмотр: После добавления поста, проверьте как он отображается на сайте
  4. Резервные копии: Храните изображения в отдельной папке на случай необходимости восстановления

Дополнительная информация

Для рендеринга Markdown используется библиотека react-markdown. Все стандартные возможности Markdown поддерживаются из коробки.

Если нужны дополнительные возможности (таблицы, сноски и т.д.), можно расширить функциональность через плагины.