Статьи → Новости сайта → Примеры по оформлению статей
Новости сайта Актуальная

Примеры по оформлению статей

Andrew ⚡ Администратор
(обновлено 03.09.2026)
514 v1.0

Сегодня разберем, как можно украсить статью. Покажу примеры оформления.

Всеми известные alert'ы.

Синий алерт
<div class="alert alert-info">Синий алерт</div>
Желтый алерт
<div class="alert alert-warning">Желтый алерт</div>
Красный алерт
<div class="alert alert-error">Красный алерт</div>
Зеленый алерт
<div class="alert alert-success">Зеленый алерт</div>

Пример оформления таблиц

💽 Разметка для диска 128 ГБ

№ Раздел Объем Точка монтирования Метка Желательно
1 boot 500 MiB /boot (для Legacy)
либо
/boot/efi (для EFI)		 boot минимум 500 MiB
максимум 1000 MiB
2 / (корень) 119,5 GiB / / весь оставшийся объем
3 swap 8 GiB swap swap минимум 4 GiB
максимум 8 GiB		 
<div style="max-width: 800px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #cbd5e1;">
<h3 style="color: #ffffff; border-bottom: 2px solid #3b82f6; padding-bottom: 8px; margin-top: 0;">💽 Разметка для диска 128 ГБ</h3>
<table style="width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; border: 1px solid #334155;">
<thead>
<tr style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;">
<th style="padding: 12px 16px; text-align: center; border: 1px solid #334155; width: 50px;">№</th>
<th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">Раздел</th>
<th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">Объем</th>
<th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">Точка монтирования</th>
<th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">Метка</th>
<th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">Желательно</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #0f172a;">
<td style="padding: 12px 16px; border: 1px solid #334155; text-align: center;"><strong style="color: #fbbf24;">1</strong></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">boot</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">500 MiB</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">/boot (для Legacy)</span><br><span style="color: #94a3b8; font-size: 12px;">либо</span><br><span style="color: #facc15;">/boot/efi (для EFI)</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">boot</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">минимум 500 MiB</span><br><span style="color: #94a3b8; font-size: 12px;">максимум 1000 MiB</span></td>
</tr>
<tr style="background-color: #1e293b;">
<td style="padding: 12px 16px; border: 1px solid #334155; text-align: center;"><strong style="color: #fbbf24;">2</strong></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">/ (корень)</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">119,5 GiB</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">/</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">/</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">весь оставшийся объем</span></td>
</tr>
<tr style="background-color: #0f172a;">
<td style="padding: 12px 16px; border: 1px solid #334155; text-align: center;"><strong style="color: #fbbf24;">3</strong></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">swap</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">8 GiB</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">swap</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">swap</span></td>
<td style="padding: 12px 16px; border: 1px solid #334155;"><span style="color: #facc15;">минимум 4 GiB</span><br><span style="color: #94a3b8; font-size: 12px;">максимум 8 GiB</span></td>
</tr>
</tbody>
</table>
</div>

🔧 Таблица симптомов и решений

⚠️ Симптом 🔧 Решение
502 Bad Gateway Проверьте sudo systemctl status php8.2-fpm и права на /run/php/php8.2-fpm.sock
Redis connection refused Убедитесь, что в конфиге host: 127.0.0.1, port: 6379 (не сокет!)
403 Forbidden на /apps/... Проверьте location / в Nginx: должен быть try_files $uri $uri/ /index.php$request_uri;
Cron не работает Проверьте sudo crontab -u www-data -l и логи: grep CRON /var/log/syslog
Не загружаются картинки Выполните: sudo -u www-data php /var/www/nextcloud/occ preview:generate-all 
<div style="max-width: 800px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #cbd5e1;">

    <h3 style="color: #facc15; margin-bottom: 16px;">🔧 Таблица симптомов и решений</h3>

    <table style="width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; border: 1px solid #334155;">
        <thead>
            <tr style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;">
                <th style="padding: 12px 16px; text-align: left; border: 1px solid #334155; width: 30%;">⚠️ Симптом</th>
                <th style="padding: 12px 16px; text-align: left; border: 1px solid #334155;">🔧 Решение</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: #0f172a;">
                <td style="padding: 12px 16px; border: 1px solid #334155;"><strong style="color: #f87171;">502 Bad Gateway</strong></td>
                <td style="padding: 12px 16px; border: 1px solid #334155; color: #cbd5e1;">Проверьте <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">sudo systemctl status php8.2-fpm</code> и права на <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">/run/php/php8.2-fpm.sock</code></td>
            </tr>
            <tr style="background-color: #1e293b;">
                <td style="padding: 12px 16px; border: 1px solid #334155;"><strong style="color: #f87171;">Redis connection refused</strong></td>
                <td style="padding: 12px 16px; border: 1px solid #334155; color: #cbd5e1;">Убедитесь, что в конфиге <strong style="color: #facc15;">host: 127.0.0.1</strong>, <strong style="color: #facc15;">port: 6379</strong> (не сокет!)</td>
             </tr>
            <tr style="background-color: #0f172a;">
                <td style="padding: 12px 16px; border: 1px solid #334155;"><strong style="color: #f87171;">403 Forbidden на /apps/...</strong></td>
                <td style="padding: 12px 16px; border: 1px solid #334155; color: #cbd5e1;">Проверьте <strong style="color: #facc15;">location /</strong> в Nginx: должен быть <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">try_files $uri $uri/ /index.php$request_uri;</code></td>
             </tr>
            <tr style="background-color: #1e293b;">
                <td style="padding: 12px 16px; border: 1px solid #334155;"><strong style="color: #f87171;">Cron не работает</strong></td>
                <td style="padding: 12px 16px; border: 1px solid #334155; color: #cbd5e1;">Проверьте <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">sudo crontab -u www-data -l</code> и логи: <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">grep CRON /var/log/syslog</code></td>
             </tr>
            <tr style="background-color: #0f172a;">
                <td style="padding: 12px 16px; border: 1px solid #334155;"><strong style="color: #f87171;">Не загружаются картинки</strong></td>
                <td style="padding: 12px 16px; border: 1px solid #334155; color: #cbd5e1;">Выполните: <code style="background: #1e293b; padding: 2px 6px; border-radius: 4px; color: #10b981;">sudo -u www-data php /var/www/nextcloud/occ preview:generate-all</code></td>
             </tr>
        </tbody>
    </table>

</div>

Информационные блоки

Задаем размер для корня (/) в районе 30 ГБ, в реальности необходимо не менее 70 ГБ. Среднее, я ставлю и советую ставить 120 ГБ если позволяет диск, во всех остальных случаях не менее 70 или край 50.

p.s.: будет и на 20 ГБ работать, но тогда в будущем будут проблемы с обновлениями, как на Astra Linux 1.6 было, где объем корня составлял всего 19 ГБ. И выбираем уже тип — Логический.

<blockquote style="background: #1e293b; border-left: 4px solid #8b5cf6; padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; font-size: 13px; color: #cbd5e1; font-style: normal;">
<p style="margin: 0; line-height: 1.5;">Задаем размер для корня (<strong style="color: #facc15;">/</strong>) в районе <strong style="color: #facc15;">30 ГБ</strong>, в реальности необходимо <strong style="color: #ef4444;">не менее 70 ГБ</strong>. Среднее, я ставлю и <strong style="color: #10b981;">советую ставить 120 ГБ</strong> если позволяет диск, во всех остальных случаях <strong style="color: #f97316;">не менее 70 или край 50</strong>.</p>
<p style="margin: 8px 0 0 0; line-height: 1.5; color: #94a3b8;">p.s.: будет и на 20 ГБ работать, но тогда в будущем будут проблемы с обновлениями, как на Astra Linux 1.6 было, где объем корня составлял всего 19 ГБ. И выбираем уже тип &mdash; <strong style="color: #facc15;">Логический</strong>.</p>
</blockquote>
⚠️ Важно: На 20 ГБ корень тоже будет работать, но в будущем возникнут проблемы с обновлениями — как было в Astra Linux 1.6, где объём корневого раздела составлял всего 19 ГБ.
<div style="background: #1e293b; border-left: 4px solid #f59e0b; padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; font-size: 13px; color: #cbd5e1;"><strong style="color: #ffffff;">⚠️ Важно:</strong> На 20 ГБ корень тоже будет работать, но в будущем возникнут проблемы с обновлениями &mdash; как было в Astra Linux 1.6, где объём корневого раздела составлял всего 19 ГБ.</div>
💡 О размере корня (/):
  • Базовый минимальный размер: 30 ГБ (будет работать, но возможны проблемы с обновлениями)
  • Рекомендуемый минимум: 50–70 ГБ
  • Оптимальный размер (если позволяет диск): 120 ГБ
  • Тип раздела: Логический
<div style="background: #1e293b; border-left: 4px solid #10b981; padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; font-size: 13px; color: #cbd5e1;"><strong style="color: #ffffff;">💡 О размере корня (/):</strong>
<ul style="margin: 8px 0 0 0; padding-left: 20px;">
<li>Базовый минимальный размер: <strong style="color: #facc15;">30 ГБ</strong> (будет работать, но возможны проблемы с обновлениями)</li>
<li>Рекомендуемый минимум: <strong style="color: #facc15;">50&ndash;70 ГБ</strong></li>
<li>Оптимальный размер (если позволяет диск): <strong style="color: #10b981;">120 ГБ</strong></li>
<li>Тип раздела: <strong style="color: #facc15;">Логический</strong></li>
</ul>
</div>
💡 Контекст:

Настройка nginx на кастомном порту (например, 8080). Так как порт 80 занят, а ещё параллельно будут работать 3 проекта на сервере, поэтому я переназначу стандартный порт с 80 на 8080.

<div style="max-width: 900px; margin: 16px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #cbd5e1;"><!-- Цитата (синяя, для пояснений) -->
<div style="background: #1e293b; border-left: 4px solid #3b82f6; padding: 14px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; font-size: 14px; color: #cbd5e1; line-height: 1.5;"><strong style="color: #60a5fa;">💡 Контекст:</strong>
<p style="margin: 8px 0 0 0;">Настройка nginx на кастомном порту (например, <strong style="color: #facc15;">8080</strong>). Так как порт <strong style="color: #f87171;">80</strong> занят, а ещё параллельно будут работать <strong style="color: #facc15;">3 проекта</strong> на сервере, поэтому я переназначу стандартный порт с <strong style="color: #f87171;">80</strong> на <strong style="color: #10b981;">8080</strong>.</p>
</div>
</div>
⚠️ Важно:

Настройка nginx на кастомном порту (8080). Порт 80 занят, параллельно работают 3 проекта на сервере, поэтому стандартный порт переназначен с 80 на 8080.

<div style="background: #1e293b; border-left: 4px solid #f59e0b; padding: 14px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; font-size: 14px; color: #cbd5e1; line-height: 1.5;">
    <strong style="color: #fbbf24;">⚠️ Важно:</strong>
    <p style="margin: 8px 0 0 0;">
        Настройка nginx на кастомном порту (<strong style="color: #facc15;">8080</strong>). Порт <strong style="color: #f87171;">80</strong> занят,
        параллельно работают <strong style="color: #facc15;">3 проекта</strong> на сервере, поэтому стандартный порт переназначен с
        <strong style="color: #f87171;">80</strong> на <strong style="color: #10b981;">8080</strong>.
    </p>
</div>
🎯 Рекомендация:

Если порт 80 занят — используйте кастомный порт (8080). Это особенно актуально, когда на сервере параллельно работает несколько проектов.

<div style="background: #1e293b; border-left: 4px solid #8b5cf6; padding: 14px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; font-size: 14px; color: #cbd5e1; line-height: 1.5;">
    <strong style="color: #a78bfa;">🎯 Рекомендация:</strong>
    <p style="margin: 8px 0 0 0;">
        Если порт <strong style="color: #f87171;">80</strong> занят — используйте кастомный порт (<strong style="color: #facc15;">8080</strong>).
        Это особенно актуально, когда на сервере параллельно работает несколько проектов.
    </p>
</div>
✅ Решение:

nginx настроен на порт 8080. Порт 80 освобождён для других задач. На сервере теперь могут работать 3 проекта параллельно.

<div style="background: #1e293b; border-left: 4px solid #10b981; padding: 14px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; font-size: 14px; color: #cbd5e1; line-height: 1.5;">
    <strong style="color: #34d399;">✅ Решение:</strong>
    <p style="margin: 8px 0 0 0;">
        nginx настроен на порт <strong style="color: #10b981;">8080</strong>. Порт <strong style="color: #f87171;">80</strong> освобождён для других задач.
        На сервере теперь могут работать <strong style="color: #facc15;">3 проекта</strong> параллельно.
    </p>
</div>

Навигация

<!-- Оглавление -->
<div style="background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 20px 24px; margin-bottom: 32px;">
<h3 style="color: #ffffff; margin: 0 0 12px 0; font-size: 18px; display: flex; align-items: center; gap: 8px;">📑 Содержание статьи</h3>
<ul style="margin: 0; padding-left: 20px; list-style: none;">
<li style="margin: 8px 0;"><a style="color: #93c5fd; text-decoration: none; font-size: 14px;" href="#rz_disk">1. Разметка диска</a></li>
<li style="margin: 8px 0;"><a style="color: #93c5fd; text-decoration: none; font-size: 14px;" href="#dop_package">2. Дополнительные пакеты</a></li>
<li style="margin: 8px 0;"><a style="color: #93c5fd; text-decoration: none; font-size: 14px;" href="#fix_network">3. Устраняем проблемы с сетью</a></li>
</ul>
</div>
<div style="text-align: center; margin-bottom: 24px;"><a style="background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 8px 24px; color: #94a3b8; text-decoration: none; font-size: 14px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;" href="#">⬆ Наверх (к оглавлению)</a></div>

Блоки 

🖥️ Железо: Intel NUC

В качестве сервера был выбран Intel NUC. Конфигурация и текущие метрики экземпляра на ОС Astra Linux 1.8.4:

⚡
Процессор
Intel Core i3 8100, 4 ядра
Загрузка в простое: 1-9%
TDP: 6.5 Вт (пик до 15 Вт)
Tjmax: 90°C
Техпроцесс: 14 нм
🧠
ОЗУ
16 ГБ
Достаточно
💾
SSD
Foxline 128 ГБ
Температура: 29°C
Износ: 37%
Записано: 6.58 ТБ за 692 дня
~24 ГБ/день
✅
SMART
Статус: норма
Bad blocks: отсутствуют
<div style="max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #cbd5e1;"><!-- Блок "Железо" -->
<h2 id="hardware" style="color: #ffffff; border-bottom: 2px solid #3b82f6; padding-bottom: 10px; margin-top: 32px; margin-bottom: 20px; scroll-margin-top: 20px;">🖥️ Железо: АРМ Kraftway KC56</h2>
<p style="margin-bottom: 16px;">В качестве сервера был выбран <strong style="color: #facc15;">Intel NUC</strong>. Конфигурация и текущие метрики экземпляра на ОС Astra Linux 1.8.4:</p>
<!-- Карточки характеристик -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0;">
<div style="background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 16px;">
<div style="font-size: 28px; margin-bottom: 8px;">⚡</div>
<div style="font-weight: bold; color: #facc15; margin-bottom: 4px;">Процессор</div>
<div style="font-size: 13px; color: #cbd5e1;">Intel Core i3 8100, 4 ядра</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 8px;">Загрузка в простое: <strong style="color: #10b981;">1-9%</strong><br>TDP: <strong>6.5 Вт</strong> (пик до 15 Вт)<br>Tjmax: <strong>90&deg;C</strong><br>Техпроцесс: <strong>14 нм</strong></div>
</div>
<div style="background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 16px;">
<div style="font-size: 28px; margin-bottom: 8px;">🧠</div>
<div style="font-weight: bold; color: #facc15; margin-bottom: 4px;">ОЗУ</div>
<div style="font-size: 13px; color: #cbd5e1;">16 ГБ</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 8px;">Достаточно</div>
</div>
<div style="background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 16px;">
<div style="font-size: 28px; margin-bottom: 8px;">💾</div>
<div style="font-weight: bold; color: #facc15; margin-bottom: 4px;">SSD</div>
<div style="font-size: 13px; color: #cbd5e1;">Foxline 128 ГБ</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 8px;">Температура: <strong style="color: #10b981;">29&deg;C</strong><br>Износ: 3<strong>7%</strong><br>Записано: <strong>6.58 ТБ</strong> за 692 дня<br>~24 ГБ/день</div>
</div>
<div style="background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 16px;">
<div style="font-size: 28px; margin-bottom: 8px;">✅</div>
<div style="font-weight: bold; color: #facc15; margin-bottom: 4px;">SMART</div>
<div style="font-size: 13px; color: #cbd5e1;">Статус: норма</div>
<div style="font-size: 12px; color: #94a3b8; margin-top: 8px;">Bad blocks: <strong style="color: #10b981;">отсутствуют</strong></div>
</div>
</div>
</div>
#оформление#статьи
0
Andrew

DevOps Engineer

1 50 статей
Похожие статьи
Как написать статью 09.04.2026
Комментарии (0)
Войдите, чтобы оставить комментарий

Пока нет комментариев. Будьте первым!