#tw_api_jekyll Всем привет. Продолжаем работу над сайтом-справочником API на базе Jekyll. В прошлый раз мы вывели на сайт эндпоинты, их краткое (summary) и более развернутое (description) описание, добавили меню слева для навигации по странице, а также некоторые стили. В этот раз сделаем следующее: - Выведем на страницу параметры (те, которые в query, path, header или cookie) и отобразим их в виде таблицы. Пока с оговоркой: выведем параметры, которые сразу описаны в объекте в описании эндпоинта. Они еще могут «подтягиваться» по ссылке: рендеринг такого варианта реализуем позже, когда будем рендерить на странице компоненты (Components). - Сделаем фиксацию, раздельный скролл для меню слева и «основного» содержимого сайта. - Добавим больше стилей, чтобы сайт стал выглядеть чуть более привлекательно. Вывод параметров на страницу Для вывода параметров в файл api_reference.liquid был добавлен фрагмент между {% if operation.parameters %} <div class="api-paths__parameters"> и </div>{% endif %}. Внутри фрагмента реализован цикл, который проходится по массиву параметров (если он есть в обрабатываемом эндпоинте) и рендерит их в виде таблицы. Также в файл /assets/css/style.css добавлены стили для таблицы, для классов (ищите по классу .parameters-table). Раздельный скролл для меню слева и «основного» содержимого сайта Чтобы сделать раздельный скролл для меню и «основного» содержимого, в файл /assets/css/style.css были добавлены стили для класса .schema-toc_paths: .schema-toc_paths { / Обеспечивают неподвижность содержимого при скролле основного контента / position: sticky; top: 0; / Отображает меню поверх других элементов / z-index: 10; / Задает цвет фона для меню / background-color: #f5eff5; / Задаёт высоту элемента равной 100% высоты видимой области окна браузера / height: 100vh; / Отключает горизонтальную прокрутку. В будущем, возможно, изменим этот стиль, чтобы избежать «расползания» колонки меню из-за длинных путей в энпоинтах / overflow-x: hidden; / Включает вертикальную при необходимости: если количество элементов в меню не помещается в видимую область окна браузера / overflow-y: auto; } Добавление новых стилей Стилей добавлено не очень много (в файле /assets/css/style.css). Отметить из этого всего можно следующие: 1. Сброс и замена стандартных стилей ссылок по всему документу (подчеркивание, цвета и пр.): a { text-decoration: none; color: rgb(72, 71, 71); } 2. Цвет фона, шрифта и закругление для HTTP-глаголов (POST, GET, PUT, PATCH, DELETE) эндпоинтов в меню и в основном контенте: ... { background-color: <код цвета> color: white; padding: 1px 10px 1px 10px; border-radius: 10px; } Свойства заданы для классов .schema-toc_prefix-get, .schema-toc_prefix-post, .schema-toc_prefix-patch, .schema-toc_prefix-delete, .schema-toc_prefix-put. 3. Чуть более симпатичное отображение путей (название) эндпоинтов в основной секции сайта: .api-paths_path { font-size: 1.5em; font-weight: bold; margin-bottom: 15px; opacity: 90%; } Готово. Если вы все сделали правильно, ЕЩЕ БОЛЬШЕ содержимого спецификации появится на странице сайта по сравнению с предыдущим этапом. И это будет выглядеть уже более симпатично. Свериться с результатом, который должен у вас получиться, можно в ветке iteration_5 репозитория, специально подготовленного под текущую серию постов. И не забываем, про возможность просмотра отрендеренного результата на GitHub Pages.