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

Этот документ содержит примеры всех доступных компонентов для создания документации. Доступен только для администраторов.

Заголовки

# H1 - Главный заголовок
## H2 - Раздел
### H3 - Подраздел
#### H4 - Подподраздел
##### H5 - Мелкий заголовок
###### H6 - Самый мелкий

H1 - Главный заголовок

H2 - Раздел

H3 - Подраздел

H4 - Подподраздел

H5 - Мелкий заголовок

H6 - Самый мелкий

Автоматические якоря

К каждому заголовку автоматически применяется якорь, который очищает недопустимые символы, такие как пробелы.

Пример: Hello World → hello-world

# Привет `Мир`

Теперь можно ссылаться на этот заголовок: /knowledge/components-demo#привет-мир

Настройки оглавления (TOC)

Оглавление (TOC) генерируется автоматически на основе заголовков. Вы можете настроить отображение заголовков в оглавлении:

Скрыть из оглавления

# Секретный заголовок [!toc]

Этот заголовок будет скрыт из оглавления, но останется на странице.

Пример:

Этот заголовок скрыт из TOC

Вы видите его на странице, но он не отображается в боковом меню.

Показать только в оглавлении

# Виртуальный заголовок [toc]

Этот заголовок будет только в оглавлении. Полезно для добавления дополнительных пунктов TOC.

Применение: Для React-компонентов, которые рендерят собственные заголовки:

# Компоненты React [toc]

<MyComponent />

Пользовательские якоря

Вы можете добавить [#slug] для настройки якорей заголовков.

# Важный раздел [#my-custom-id]

Пример:

Кастомный якорь

Теперь на этот заголовок можно ссылаться: /knowledge/components-demo#мой-особый-якорь

Комбинирование настроек

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

# Комбо заголовок [toc] [#custom-anchor]

Пример:

Ссылки на заголовки

Чтобы отправить пользователя к конкретному заголовку, добавьте id заголовка к hash-фрагменту:

[Перейти к разделу](#my-custom-id)

Рабочий пример:

Перейти к кастомному якорю

Форматирование текста

**Жирный текст**

*Курсив*

***Жирный курсив***

~~Зачеркнутый текст~~

`Инлайн код`

Жирный текст

Курсив

Жирный курсив

~~Зачеркнутый текст~~

Инлайн код

Списки

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

- Первый элемент
- Второй элемент
  - Вложенный элемент 1
  - Вложенный элемент 2
    - Глубоко вложенный элемент
- Третий элемент

Первый элемент
Второй элемент
- Вложенный элемент 1
- Вложенный элемент 2
  - Глубоко вложенный элемент
Третий элемент

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

1. Первый пункт
2. Второй пункт
   1. Вложенный пункт
   2. Еще один вложенный
3. Третий пункт

Первый пункт
Второй пункт
1. Вложенный пункт
2. Еще один вложенный
Третий пункт

Список задач

- [x] Выполненная задача
- [ ] Невыполненная задача
- [ ] Еще одна задача

Выполненная задача
Невыполненная задача
Еще одна задача

Цитаты

> Это обычная цитата.
> Может быть многострочной.

> ### Цитата с заголовком
>
> Цитата может содержать **форматирование** и `код`.

Это обычная цитата. Может быть многострочной.

Цитата с заголовком

Цитата может содержать форматирование и код.

Блоки кода

JavaScript

```javascript
function greet(name) {
  console.log(`Привет, ${name}!`);
  return true;
}
```

function greet(name) {
  console.log(`Привет, ${name}!`);
  return true;
}

TypeScript

```typescript
interface User {
  id: string;
  name: string;
  role: 'ADMIN' | 'USER';
}
```

interface User {
  id: string;
  name: string;
  role: 'ADMIN' | 'USER';
}

Python

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

Bash

```bash
npm install
npm run dev
npm run build
```

npm install
npm run dev
npm run build

Ссылки

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

[Ссылка с подсказкой](https://example.com "Наведите курсор")

[Внутренняя ссылка](/knowledge/getting-started)

[Якорная ссылка](#заголовки)

Изображения

![Logo Safe and Sound](/images/logo/logo.webp)

Logo Safe and Sound

Таблицы

| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|-------------|-------------|-------------|
| Ячейка 1    | Ячейка 2    | Ячейка 3    |
| Ячейка 4    | Ячейка 5    | Ячейка 6    |

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

С выравниванием

| По левому | По центру | По правому |
|:----------|:---------:|-----------:|
| Текст     | Текст     | Текст      |

По левому	По центру	По правому
Текст	Текст	Текст

Горизонтальный разделитель

---

HTML теги

<details>
<summary>Кликните чтобы развернуть</summary>

Скрытый контент внутри

</details>

Кликните чтобы развернуть

Скрытый контент внутри

Компоненты Fumadocs

Callout

<Callout title="Информация" type="info">
  Информационное сообщение
</Callout>

<Callout title="Предупреждение" type="warn">
  Будьте осторожны
</Callout>

<Callout title="Ошибка" type="error">
  Критическое предупреждение
</Callout>

Информация

Информационное сообщение

Предупреждение

Будьте осторожны

Ошибка

Критическое предупреждение

Accordion

<Accordions>
<Accordion title="Что такое Safe and Sound?">
  Safe and Sound - это игровой сервер FiveM с уникальной атмосферой и дружным комьюнити.
</Accordion>

<Accordion title="Как начать играть?">
  Скачайте FiveM, подключитесь к серверу и ознакомьтесь с правилами
</Accordion>
</Accordions>

Tabs

<Tabs items={['JavaScript', 'TypeScript', 'Python']}>
<Tab value="JavaScript">
  Код на JavaScript
</Tab>

<Tab value="TypeScript">
  Код на TypeScript
</Tab>

<Tab value="Python">
  Код на Python
</Tab>
</Tabs>

console.log("Hello World");

console.log("Hello World");

print("Hello World")

Steps

<Steps>
<Step>
### Шаг 1[!toc]

Описание первого шага
</Step>

<Step>
### Шаг 2[!toc]

Описание второго шага
</Step>
</Steps>

<Files>
<Folder name="app" defaultOpen>
  <File name="layout.tsx" />
  <File name="page.tsx" />
</Folder>
</Files>

layout.tsx

page.tsx

ImageZoom

<ImageZoom src="/images/logo/logo.webp" alt="Logo" width={300} height={300} />

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

Что такое Safe and Sound?

Как начать играть?

Содержание