Расширение Хрома · справка
Заливщик Вайб-блоков
Кладёт готовые HTML-секции из папки проекта в Вайб-блоки открытой страницы
Тильды. Заодно грузит картинки в файловую, ставит куски кода в HEAD и заполняет заголовки,
описания и адреса страниц.
Внутри расширения не лежит ничего: ни проектов, ни секций, ни настроек.
Всё, что ему нужно знать, лежит в папке, которую ты укажешь.
С чего начать
Пять шагов, дальше всё повторяется одной кнопкой.
01
Поставить расширение
Из магазина
Chrome по прямой ссылке: в поиске магазина расширения нет, оно выложено
«по ссылке». После установки — значок в панели Хрома.
02
Открыть страницу в редакторе Тильды
Обычный адрес вида tilda.ru/page/?pageid=…. Страницу лучше брать
пустую: расширение блоки только добавляет и никогда ничего не удаляет.
03
Нажать иконку — откроется отдельное окно
Именно окно, а не выпадашка: выпадашка закрывается в тот момент, когда система
показывает диалог выбора папки, и папка пропадает вместе с ней.
В шапке — две кнопки вида: Панель швартует заливщик
к боковой панели Хрома рядом с редактором, Вкладка открывает его обычной
вкладкой. Вкладка выручает на маленьком экране: панель отжимает у редактора треть
ширины, окно ложится поверх него, а между двумя вкладками ходят по Cmd+1
и Cmd+2. Выбранный вид расширение помнит.
04
«Выбрать…» и указать папку проекта
Можно указать и корень проекта: если внутри есть sections/
с README.txt, расширение спустится туда само. Последние шесть папок помнит списком.
05
Выбрать страницу и нажать «Залить»
Список страниц — из 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.
Страница медленная — виноваты картинки
Замеренный случай: лендинг с безупречным кодом — нулевой сдвиг макета,
10 мс блокировки, 66 КБ разметки — и 33,7 секунды до отрисовки главного на мобильном.
Причина одна: восемь фотографий по 1,2 МБ, все грузятся разом, ни одной отложенной. Браузер
тянул десять мегабайт, и первый экран стоял в очереди за тем, что ниже сгиба.
Лечится двумя действиями, и оба дают примерно поровну:
- Пережать. Фото 1024×1024 в PNG весит 1,24 МБ; тот же кадр
в JPEG шириной 800 px — 114 КБ. Одиннадцатикратно, а на глаз неотличимо. PNG нужен
только там, где есть прозрачность.
- Отложить. Всем картинкам, кроме одной самой крупной на первом
экране, нужен
loading="lazy". Это расширение делает само при починке — но
только внутри секции: какая секция первая на странице, ему не видно.
Отдельно: картинки, которые нейросеть сгенерировала и оставила у себя,
живут по ссылке без обещанного срока. Показать на них лендинг можно, сдать — нет. Кнопка
«Залить картинки» их не заберёт: она берёт файлы из папки проекта. Сохраните их в папку,
пережмите — и тогда нажимайте.
Попап в блоке работает одним способом
Самодельное окно «во весь экран» на position: fixed в Вайб-блоке
не разворачивается. Стоит включить блоку появление при прокрутке, как Тильда вешает
на него transform, а трансформация на предке заводит новую систему
отсчёта: «весь экран» начинает считаться от коробки блока. Замер: подложка получила
191 px высоты вместо 1108 и легла под шапку сайта.
С :target и <details> выходит то же самое.
Рабочий способ один — тег <dialog>. Открытое модально,
окно лежит в верхнем слое браузера: его не режет overflow,
не смещает transform и не перекрывает чужой
z-index — своего ему не нужно вовсе.
В файле пишется только разметка: кнопке —
data-vibe-open="имя", окну — data-vibe-popup="имя" тем же
словом. Строку, которая окно открывает, дописывает починялка при заливке; если выхода
из окна в разметке нет, она добавит и крестик — с телефона
Esc нажать нечем.
Форму заявки при этом стоит держать и отдельной секцией: попап
экономит прокрутку, и если он однажды не откроется, это должно стоить удобства,
а не заявки.
Два начала якоря заняты Тильдой
Плавную прокрутку Тильда вешает не на все якоря: у неё
один общий обработчик со списком исключений, и сверяет он начало имени,
а не имя целиком. Занято начало price, начало order
и ещё несколько служебных. Обойти это со стороны секции нечем — скрипт чужой
и грузится раньше нашего.
Поэтому дописать «s» не выход: #prices
и #orders выпадают из прокрутки так же. С order
вдобавок хуже: корзина Тильды ловит все ссылки, начинающиеся на #order,
и клик по такой ссылке открывает корзину.
А просятся эти два слова сами: раздел с тарифами
и блок заказа. Поэтому починялка переименовывает такие якоря при заливке —
и id раздела, и ссылку на него, и упоминание
в <style>: выходит #tariffs и #request.
Имя файла и класс секции при этом не меняются.
Язык сайта задаётся в Тильде, а не в секции
Тег <html> пишет сама Тильда при публикации, а язык берёт
из настроек проекта. Не задали — выйдет <html> без lang,
и это замечание сразу в двух местах: в поисковой оптимизации и в доступности, потому что
программа чтения вслух не знает, на каком языке читать.
Ставится один раз: Настройки сайта → Основное → Язык сайта. Расширение сюда
не достаёт: оно правит настройки страницы, а язык живёт у проекта.
Картинки грузим до секций
Адреса на CDN расширение подставляет в секцию в момент заливки. Залил секции
раньше картинок — на сайте эти места будут битыми, и об этом будет сказано отдельной строкой.
Второй раз одно и то же не грузится: рядом с адресом карта помнит хеш файла.
Подменил файл в папке — уедет новый. Больше 10 МБ Тильда не принимает.
После HEAD страницу надо переопубликовать
Код в HEAD попадает на сайт только после публикации — это правило Тильды,
расширение тут ни при чём. Картинки внутри кусков HEAD подменяются так же, как в секциях,
а пути к ним пишутся от папки секций, а не от папки head/.
Окно расширения должно оставаться открытым
Доступ к папке живёт в этом окне и в фоновый процесс Хрома не уезжает.
Закрыл окно — слежение кончилось; файлы целы, карта на месте, включай снова.
Свёрнутому окну Хром режет таймеры, поэтому слежение в нём еле шевелится.
Разверни — расширение сразу проверит папку заново.
Чего оно не делает
Намеренно — чтобы нельзя было испортить страницу одной кнопкой.
- Не удаляет и не чистит блоки. Только добавляет и обновляет.
- Не публикует страницу — «Опубликовать» жмёшь сам.
- Не следит за папкой
head/: куски для HEAD заливаются только кнопкой.
- Не переносит видео и файлы — только картинки, и только те, что стоят в секции
относительным путём.
- Не убирает с Тильды уже загруженное: перезалил картинку — прежняя осталась
в файловой.
- Не ходит никуда, кроме того аккаунта, в котором ты залогинен, и той вкладки
редактора, которую выбрал в списке.