Старый лендинг не надо верстать заново: как Трекер №024 разбирает страницу на блоки

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

Большинство конструкторов делают одно и то же: вы заполняете поля, а они собирают из этого страницу. Трекер №024 решает обратную задачу. Он берёт уже готовую страницу и разбирает её на блоки, которые потом удобно править.

Вёрстка — это код страницы: HTML отвечает за содержание, CSS за внешний вид, JS за поведение. Блок, или секция, — один смысловой кусок страницы: первый экран, тарифы, отзывы, вопросы и ответы.

На выходе получается JSON. Это просто аккуратно размеченный текст: какие в блоке поля, что в них сейчас написано и как всё собрать обратно. Такой формат понимают блочные конструкторы.

Это один HTML-файл. Он открывается в браузере, ничего устанавливать не нужно, интернет не нужен, и всё, что вы вставляете, остаётся на вашем устройстве. На Android и Windows файл открывается в браузере, на iPhone его сначала нужно загрузить на сайт.

Работа идёт на четырёх вкладках:

На первой вкладке вы даёте секции имя и короткий ID, латиницей через дефис, например «pricing». Указываете порядковый номер, то есть каким по счёту блок будет на странице. Если хочется, задаёте свой префикс, иначе им станет ID.

Дальше вставляете код в три поля: HTML, CSS и, если есть, JS.

Остаются настройки:

Нажимаете конвертацию и получаете JSON, сводку и предупреждения, если что-то не сошлось.

Сначала он находит всё, что обычно меняют: заголовки, абзацы, тексты кнопок, ссылки, картинки, пункты списков. Каждое такое место заменяется меткой вида {{имя}}, а текущий текст уходит в отдельный список полей. Теперь заголовок можно поменять, не трогая код. У ссылок отдельно сохраняется адрес и текст, у картинок — файл и подпись.

Потом стили. Если вставить на одну страницу блоки из разных мест, их оформление может мешать друг другу: одинаковые названия классов, разный вид. Конвертер добавляет к каждому классу свой префикс, и конфликт пропадает. Делает он это аккуратно: класс «card» не испортит соседний «card-large».

Третье — повторы. Карточки отзывов, тарифы, вопросы и ответы, элементы галереи: если таких блоков два и больше, конвертер помечает их как группу. В JSON появляется шаблон одной карточки и границы, сколько их может быть. Новый отзыв добавляется копией шаблона, а не правкой кода.

Напоследок проверка. Если метка есть в коде, а поля для неё нет, или наоборот, вы увидите понятное предупреждение.

Вторая вкладка нужна, когда на руках весь документ. Вставляете его целиком и задаёте префикс сайта, например «site1».

Конвертер режет страницу на секции сам. Сначала ищет комментарии-разделители в коде, потом смысловые части: шапку, разделы, подвал, меню. Отдельно подбирает всплывающие окна и бегущие строки. К каждой секции он подтягивает именно её стили и скрипты, а внешние подключения выносит в отдельный список, чтобы блок был самостоятельным.

Все разобранные секции попадают в реестр на третьей вкладке. Там видно, сколько в каждой полей и какой у неё порядок. JSON любой секции можно открыть, весь реестр — скопировать разом или очистить. Скопированный результат стоит сразу сохранить в файл или вставить туда, где вы собираете сайт.

Четвёртая вкладка выдаёт готовое задание для нейросети: полное описание формата и правила сборки. Его копируют вместе со своей просьбой, например «сделай блок тарифов для стоматологии». Нейросеть возвращает JSON в том же формате, и его можно вставить в свой конструктор рядом с остальными секциями.

Возьмём вымышленную Арину. Она верстальщица, и у неё есть несколько старых лендингов, сделанных вручную в разные годы. Каждый раз, когда клиент просит поменять цену или добавить отзыв, Арина лезет в код и ищет нужную строчку.

Утром она открывает файл и вставляет на вторую вкладку первый лендинг целиком. Через секунду в реестре лежат шапка, первый экран, услуги, отзывы и подвал. Отзывы конвертер сам распознал как группу.

Днём она проходит предупреждения проверки, поправляет пару мест и копирует реестр в файл. Теперь цены и отзывы — это поля, а не строчки, спрятанные в коде.

Вечером просит нейросеть сделать для этого же сайта новый блок с вопросами и ответами. Отдаёт ей задание с четвёртой вкладки и получает секцию, которая ложится к остальным без переделок.

Конвертер пригодится веб-студиям и верстальщикам с парком старых страниц, тем, кто делает свой блочный конструктор, и тем, кто хочет переделывать тексты с помощью нейросети, не трогая вёрстку.

Важно понимать, что это инструмент для разбора, а не для показа. Он превращает страницу в блоки, но не рисует её. Смотреть, как всё выглядит, вы будете уже в конструкторе.

А у вас бывало, что маленькую правку на старом сайте приходилось искать в коде дольше, чем делать саму правку?