Расширение Хрома · справка

Заливщик Вайб-блоков

Кладёт готовые HTML-секции из папки проекта в Вайб-блоки открытой страницы Тильды. Заодно грузит картинки в файловую, ставит куски кода в HEAD и заполняет заголовки, описания и адреса страниц.

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

С чего начать

Пять шагов, дальше всё повторяется одной кнопкой.

Поставить расширение

Из магазина Chrome по прямой ссылке: в поиске магазина расширения нет, оно выложено «по ссылке». После установки — значок в панели Хрома.

Открыть страницу в редакторе Тильды

Обычный адрес вида tilda.ru/page/?pageid=…. Страницу лучше брать пустую: расширение блоки только добавляет и никогда ничего не удаляет.

Нажать иконку — откроется отдельное окно

Именно окно, а не выпадашка: выпадашка закрывается в тот момент, когда система показывает диалог выбора папки, и папка пропадает вместе с ней.

В шапке — две кнопки вида: Панель швартует заливщик к боковой панели Хрома рядом с редактором, Вкладка открывает его обычной вкладкой. Вкладка выручает на маленьком экране: панель отжимает у редактора треть ширины, окно ложится поверх него, а между двумя вкладками ходят по Cmd+1 и Cmd+2. Выбранный вид расширение помнит.

«Выбрать…» и указать папку проекта

Можно указать и корень проекта: если внутри есть sections/ с README.txt, расширение спустится туда само. Последние шесть папок помнит списком.

Выбрать страницу и нажать «Залить»

Список страниц — из README.txt. Копировать в расширение ничего не надо, файлы оно читает прямо из папки.

Что должно лежать в папке

Один файл — одна секция — один Вайб-блок. Порядок задаёт README.txt.

sections/ README.txt порядок блоков по страницам styles.json цвета, шрифты, кнопки проекта (необязательно) .tilda-map.json что куда легло — пишет расширение, не трогать 00-header.html 01-hero.html … images/ картинки секций head/ куски кода для HEAD (необязательно) favicon.html preloader.html

Формат README.txt простой: строка со слэша открывает страницу и её первое слово — это адрес; имена блоков идут под ней с отступом ровно в два пробела; пустая строка страницу закрывает. Скобки после имени блока — пояснение для человека, они отбрасываются.

/privacy (политика — на неё ссылается футер) заголовок: Политика конфиденциальности описание: Как мы обрабатываем персональные данные посетителей. бейдж: images/share-privacy.webp 00-header 06-footer

Эти же строки заполняют настройки страницы в Тильде. Адрес отдельной строкой нужен редко: путь страницы в README и есть её адрес. Бейдж — картинка, которую видно, когда страницу кидают ссылкой; она уезжает в Тильду вместе с остальными картинками, а в настройки попадает уже адресом на CDN.

Что оно умеет

Шесть кнопок, каждая делает ровно одно.

Секции

Заводит блоки и кладёт в них код

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

Картинки

Грузит файлы в файловую Тильды

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

HEAD

Ставит куски кода в HEAD сайта и страницы

Фавиконка, прелоадер, разметка, счётчики. Чужой код не трогается: свои куски лежат между маркерами.

Настройки

Заполняет заголовок, описание, адрес, бейдж

Через ту же панель, что и руками. Главную не трогает, живой адрес не подменяет.

Стили

Собирает файл .tildastyles

Палитра, типографика и кнопки проекта — импортируются в Настройках сайта, в разделе «Шрифты и цвета». Действует на родные блоки Тильды, чтобы корзина и каталог стояли в той же палитре, что секции.

Палитра

Меняет цвет разом во всех секциях

Все цвета проекта одним списком. Правите один — он расходится по файлам: и в токенах, и в выведенных из них прозрачных, и в заливках значков. styles.json правится заодно, чтобы не разъехался с секциями.

Слежение

Следит за папкой и льёт на лету

Сохранил файл — через пару секунд Тильда такая же. Есть галка «обновлять вкладку», чтобы сразу видеть результат.

Со второго раза обновляет, а не плодит

После каждой удачной заливки рядом с секциями появляется .tilda-map.json — что куда легло и с каким содержимым. По ней вторая заливка находит те же блоки, а не создаёт новые.

У каждой секции в карте лежит хеш её текста. Совпал — блок уже такой в Тильде, и он пропускается: в списке у него зелёный ободок и подпись без изменений, запросов по нему не уходит вовсе. Правка одной секции из девятнадцати стоит один запрос, а не тридцать восемь.

Карта — файл проекта, а не браузера. Она видна гиту, уезжает вместе с папкой к другому дизайнеру, и заливка с чужой машины попадёт в те же блоки. Надо залить всё заново — удали её.

Папка — единственный источник правды. Правки, сделанные в панели СТИЛЬ Вайб-блока — текст, цвета, отступы, — живут в коде того же блока и при следующей заливке затрутся файлом. Правим в файлах.

Исключение одно: фотографии. Картинку, поставленную руками в панели, расширение переносит в новый код и не затирает — оно читает нынешний код блока перед тем, как его переписать.

Тонкости

То, обо что чаще всего спотыкаются.

Секция не влезла в блок

У Тильды есть потолок на размер кода блока. Точного числа она не называет, но по опыту: секция в 131 000 символов проходит, 158 000 — уже нет. Строка станет красной: секция велика для Тильды

Заливка при этом не останавливается — остальные секции уедут как обычно. Почти всегда причина одна: картинки, зашитые в HTML через base64 вместо ссылок. Лечится кнопкой «Залить картинки» или переводом в WebP.

Картинки грузим до секций

Адреса на CDN расширение подставляет в секцию в момент заливки. Залил секции раньше картинок — на сайте эти места будут битыми, и об этом будет сказано отдельной строкой.

Второй раз одно и то же не грузится: рядом с адресом карта помнит хеш файла. Подменил файл в папке — уедет новый. Больше 10 МБ Тильда не принимает.

После HEAD страницу надо переопубликовать

Код в HEAD попадает на сайт только после публикации — это правило Тильды, расширение тут ни при чём. Картинки внутри кусков HEAD подменяются так же, как в секциях, а пути к ним пишутся от папки секций, а не от папки head/.

Окно расширения должно оставаться открытым

Доступ к папке живёт в этом окне и в фоновый процесс Хрома не уезжает. Закрыл окно — слежение кончилось; файлы целы, карта на месте, включай снова.

Свёрнутому окну Хром режет таймеры, поэтому слежение в нём еле шевелится. Разверни — расширение сразу проверит папку заново.

Чего оно не делает

Намеренно — чтобы нельзя было испортить страницу одной кнопкой.

Не удаляет и не чистит блоки. Только добавляет и обновляет.
Не публикует страницу — «Опубликовать» жмёшь сам.
Не следит за папкой head/: куски для HEAD заливаются только кнопкой.
Не переносит видео и файлы — только картинки, и только те, что стоят в секции относительным путём.
Не убирает с Тильды уже загруженное: перезалил картинку — прежняя осталась в файловой.
Не ходит никуда, кроме того аккаунта, в котором ты залогинен, и той вкладки редактора, которую выбрал в списке.

Это автоматизация интерфейса Тильды, а не поддерживаемый ею API: расширение повторяет те же запросы, что редактор делает сам, с куками твоей сессии. Работает, пока Тильда не переделает свой редактор. Запасной путь на этот случай в расширении предусмотрен — код можно писать прямо в редактор блока.

Короткая памятка для того, кто заливает впервые, — по этому адресу.