Home Page - iT-Kazakov.ru

ТЕСТОВЫЙ МАТЕРИАЛ №1 — Проверка классов

Это 😊 не авторский пост, а проверка системы классов и рендеринга. Здесь собраны все предусмотренные конвенцией элементы: абзацы, код, цитаты, списки, изображения, плеер и смайлики 🚀✨.

Ниже — блок кода на C#. Язык указан в атрибуте data-lang для отображения ярлыка.

public class TestRenderer
{
    /// <summary>
    /// Тестовый метод — проверка отображения кода.
    /// </summary>
    public async Task RenderAsync()
    {
        var posts = new[] { "_PostTest1", "_PostTest2" };
        foreach (var post in posts)
        {
            await Html.PartialAsync(post);
            Console.WriteLine($"Rendered: {post}");
        }
    }
}

Это цитата (callout). Здесь может быть важное замечание, ссылка на источник или просто тестовый текст, проверяющий, как нейронка сможет переопределять внешний вид этого блока.

Маркированный список (типы блоков):

Абзац — .post-paragraph
Код — .post-code с data-lang
Цитата — .post-callout
Изображение — .post-figure
Плеер — .post-player
Смайлики — .post-emoji 🔥

Нумерованный список (порядок действий при тестировании):

Открыть главную страницу
Убедиться, что оба материала отрендерились
Проверить подключение post-base.css
Переключить тему / сгенерировать пользовательский CSS
Убедиться, что стили переопределяются

Рис. 1 — Тестовое изображение.

Аудиоплеер (тестовый):

Видеоплеер (тестовый):

Финальный аккорд — смайлики 🎉✅🧪🔧. Конец тестового материала №1.

ТЕСТОВЫЙ МАТЕРИАЛ №2 — Дублирующая проверка

🧪 Это второй тестовый материал. Он проверяет, что система рендеринга работает с разными partial и что стили применяются единообразно ко всем материалам 📋✅.

Пример блока кода на JavaScript (другой язык для разнообразия):

// Тестовый скрипт — проверка data-lang="javascript"
function initTestPosts() {
    const posts = document.querySelectorAll('.post-body');
    console.log(`Найдено материалов: ${posts.length}`);

    posts.forEach((post, index) => {
        const title = post.querySelector('h2')?.textContent
            ?? 'Без заголовка';
        console.log(`Материал #${index + 1}: ${title}`);
    });
}

initTestPosts();

💡 Вторая цитата. Обратите внимание: блок .post-callout может содержать не только цитаты, но и заметки, предупреждения, tip'ы. Конвенция классов позволяет нейронке переопределять их единым стилем.

Маркированный список (проверяемые элементы):

Заголовок материала (h2 внутри .post-body)
Абзац .post-paragraph
Блок кода .post-code с data-lang="javascript"
Цитата .post-callout
Списки .post-list--unordered и .post-list--ordered

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

CSS-переменные применяются
Классы соответствуют конвенции
Нет конфликтов с bootstrap
Разделитель между материалами отображается
Сборка проекта успешна

Рис. 2 — Ещё одно тестовое изображение.

Тестовый аудиоплеер:

Тестовый видеоплеер:

Завершаем тест №2 смайликами 👍🧪💻🔚. Оба материала отрендерены. Система классов работает.

<it:Kazakov/>

ТЕСТОВЫЙ МАТЕРИАЛ №1 — Проверка классов

ТЕСТОВЫЙ МАТЕРИАЛ №2 — Дублирующая проверка