← Вернуться на главную

📋 Руководство по шаблонам

Как создавать и добавлять собственные HTML-шаблоны для генерации сайтов

🎨 Доступные шаблоны

В системе уже есть 5 готовых профессиональных шаблонов:

📁 Структура шаблона

Расположение: Все шаблоны находятся в папке templates/website_templates/

Каждый шаблон — это отдельный HTML-файл с именем {template_id}.html

Файлы шаблонов

templates/website_templates/
├── modern.html      # Главный шаблон страницы
├── business.html    # Корпоративный стиль
├── tech.html        # Темная тема для разработчиков
├── creative.html    # Яркий креативный дизайн
├── minimal.html     # Минималистичный дизайн
└── article.html     # Шаблон для страниц статей

Обязательные требования

  • ✅ Полностью самодостаточный HTML (стили inline в <style>)
  • ✅ Использование плейсхолдеров
  • ✅ Адаптивный дизайн (media queries)
  • ✅ Семантическая HTML5 разметка
  • ✅ JavaScript фильтрации (функция filterArticles)

🔧 Плейсхолдеры

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

Плейсхолдер Описание Пример
Название сайта Мой Блог
Описание сайта для SEO Блог о программировании...
Краткий слоган Программирование просто
Ключевые слова через запятую python, javascript, web
URL сайта https://myblog.com
Текущий год 2025
Количество статей 15
HTML блок услуг/тем <div class="service-card">...</div>
HTML блок статей <article class="article-card">...</article>
Кнопки фильтрации категорий <button class="filter-btn">...</button>
Текст о сайте/компании Мы профессиональная команда...
HTML блок преимуществ <li>Преимущество 1</li>
- Значения статистики (4 шт) 100+, 50, 5 лет, 24/7
- Подписи статистики (4 шт) Проектов, Клиентов, Опыта
Адрес Москва, Россия
Телефон +7 (999) 123-45-67
Email [email protected]
Часы работы Пн-Пт: 9:00-18:00
Ссылки в футере <li><a href="#">...</a></li>

➕ Как добавить свой шаблон

1
Создайте HTML-файл

Создайте файл my_template.html в папке templates/website_templates/

2
Используйте базовую структуру 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - </title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    
    <style>
        /* Ваши стили здесь */
    </style>
</head>
<body>
    <!-- Ваша разметка -->
    
    <section class="articles">
        
    </section>
    
    <script>
        // Функция фильтрации (обязательно!)
        function filterArticles(cat) {
            let c = 0;
            document.querySelectorAll('.article-card').forEach(a => {
                const show = cat === 'all' || a.dataset.category === cat;
                a.style.display = show ? 'flex' : 'none';
                if (show) c++;
            });
            document.getElementById('visible-count').textContent = c;
            document.querySelectorAll('.filter-btn').forEach(b => 
                b.classList.toggle('active', b.dataset.category === cat));
        }
    </script>
</body>
</html>
3
Добавьте обязательные секции

Шаблон должен содержать:

  • 📦 Секция услуг/тем с
  • 📝 Секция статей с
  • 🏷️ Фильтры категорий с
  • 📊 Секция статистики (4 блока)
  • 📍 Секция контактов
  • 📄 Футер с
4
Протестируйте шаблон

Используйте API для просмотра превью:

GET /api/templates/my_template/preview
5
(Опционально) Добавьте метаданные

Чтобы шаблон отображался с описанием, добавьте его в TEMPLATE_METADATA в файле app_simple.py

🎯 Обязательные CSS классы

Для корректной работы фильтрации и отображения статей, используйте эти классы:

Карточка статьи

<article class="article-card" data-category="category_slug">
    <span class="article-badge">🏷️ Категория</span>
    <h3><a href="article.html" class="article-link">Заголовок</a></h3>
    <p class="article-excerpt">Краткое описание...</p>
    <a href="article.html" class="read-more">Читать далее →</a>
</article>

Кнопка фильтра

<button class="filter-btn" data-category="all" onclick="filterArticles('all')">
    📋 Все статьи
</button>
<button class="filter-btn" data-category="category_slug" onclick="filterArticles('category_slug')">
    📚 Название категории
</button>

Карточка услуги

<div class="service-card">
    <div class="service-icon">🚀</div>
    <h3>Название услуги</h3>
    <p>Описание услуги</p>
</div>

💡 Советы

  • 🎨
    Используйте CSS-переменные для цветов — это упростит кастомизацию
  • 📱
    Всегда добавляйте media queries для мобильных устройств
  • ⚡
    Не подключайте внешние CSS/JS — всё должно быть inline
  • 🔤
    Используйте системные шрифты для быстрой загрузки
  • ♿
    Добавляйте aria-label и alt для доступности
  • 🔍
    Не забывайте про мета-теги для SEO

📡 API Reference

Получить все шаблоны

GET /api/templates

Response:
{
    "templates": [
        {
            "id": "modern",
            "name": "Modern",
            "name_ru": "Современный",
            "description": "...",
            "colors": ["#2563eb", "#10b981"],
            "icon": "🎨",
            "available": true
        }
    ],
    "total": 5
}

Получить конкретный шаблон

GET /api/templates/{template_id}

Response:
{
    "id": "modern",
    "meta": {...},
    "content": "<!DOCTYPE html>...",
    "placeholders": ["SITE_TITLE", "ARTICLES_HTML", ...],
    "size": 45000
}

Превью шаблона

GET /api/templates/{template_id}/preview

Response: HTML страница с заполненными демо-данными
← На главную 📡 API Templates