{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что именно можно менять в коде и как не бояться чужих модификаций.","type":"unstyled","key":"j0e"},{"data":{"image":{"id":"6a869d1ef5ddbf284d0e9bdc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bqgro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модификации для Tilda часто выглядят страшнее, чем устроены на самом деле. Вы открываете блок с кодом и видите десятки или даже сотни строк: фигурные скобки, точки, решетки, const, querySelector, background, padding, . Например: const button = document.querySelector('.my-button'); button.addEventListener('click', function () { ... });","type":"unstyled","key":"fi8mn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":138,"offset":64,"style":"BOLD"}],"text":"Для человека без знания JavaScript безопасная стратегия проста: если автор не вынес конкретный параметр в настройки и не написал, что именно нужно заменить, рабочую часть . Это границы разных типов кода. Если случайно удалить закрывающий или , браузер может неправильно интерпретировать то, что идет дальше. Поэтому сами эти теги без необходимости лучше не трогать.","type":"unstyled","key":"7l65j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Что такое @media","type":"header-two","key":"6dljf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В CSS часто встречаются блоки вида @media (max-width: 640px) { .my-card { padding: 16px; } }. Это правило, которое применяется только при выполнении указанного условия — в данном примере при ширине области просмотра не более 640 пикселей. Такие конструкции часто используются для адаптации под небольшие экраны.","type":"unstyled","key":"eru3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если удалить @media целиком только потому, что внутри повторяется уже знакомый .my-card, можно сломать мобильную версию.","type":"unstyled","key":"ajov5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Почему !important не исправляет любой CSS","type":"header-two","key":"316ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно встретить color: red !important;. !important повышает приоритет конкретного CSS-объявления, но не исправляет неправильный селектор, отсутствующий элемент, синтаксическую ошибку или неправильный ID блока.","type":"unstyled","key":"6qk5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому добавлять !important ко всем стилям, если «что-то не работает», не стоит. Сначала нужно понять причину.","type":"unstyled","key":"7vi9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"}],"text":"Почему код для одного блока Tilda не обязан работать с другим","type":"header-two","key":"5sjgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модификация может быть написана под конкретный стандартный блок. Например, скрипт ищет элемент через document.querySelector('.some-tilda-class'). У другого, внешне похожего блока внутренние классы и структура могут отличаться.","type":"unstyled","key":"atk9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому если автор пишет, что код предназначен для определенного блока ST..., это нужно воспринимать буквально. Внешнее сходство двух блоков не означает одинаковую HTML-структуру.","type":"unstyled","key":"60bc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Код может перестать работать после изменений Tilda","type":"header-two","key":"bfobd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользовательская модификация работает поверх HTML-структуры и поведения, которые генерирует сама Tilda. Если код зависит от внутренних классов или устройства конкретного блока, изменения этой структуры в будущем могут потребовать доработки модификации.","type":"unstyled","key":"439qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это не повод отказываться от пользовательского кода. Просто его нужно воспринимать как дополнительный слой сайта, который иногда требует обслуживания, особенно если он зависит не от ваших собственных классов, а от внутренней разметки стандартных блоков Tilda.","type":"unstyled","key":"51bik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Где используется код для HEAD","type":"header-two","key":"11dmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код можно добавлять не только через блок T123, но и в страницы или проекта через настройки Tilda. Это может быть необходимо, например, при подключении внешних ресурсов или если конкретная инструкция требует определенного порядка загрузки.","type":"unstyled","key":"d90p1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но переносить код между T123 и HEAD самостоятельно не стоит. Если автор модификации написал «эту часть вставьте в HEAD», а другую часть — «в T123», лучше сохранить эту структуру. Точно так же не нужно переносить весь код в глобальный HEAD проекта просто для удобства. Если модификация рассчитана только на одну страницу, глобальное подключение может привести к тому, что CSS или JavaScript начнет работать и там, где этого не планировалось.","type":"unstyled","key":"em095"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Будьте особенно осторожны с внешними скриптами","type":"header-two","key":"58mag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в чужом коде есть подключения сторонних файлов или сервисов, важно понимать их назначение. Не стоит без проверки вставлять код, если вы не понимаете, откуда он получен, зачем подключается сторонний домен, какие данные туда передаются, что делает внешний JavaScript или зачем используется API.","type":"unstyled","key":"436og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Особенно внимательно нужно относиться к модификациям, связанным с формами, персональными данными, платежами, авторизацией, аналитикой, cookies и внешними API. Здесь ошибка может влиять уже не только на внешний вид страницы.","type":"unstyled","key":"45i69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"BOLD"}],"text":"API-ключ нельзя автоматически считать безопасным для вставки в T123","type":"header-two","key":"b2kdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы видите const API_KEY = '...';, это еще не означает, что такой ключ можно размещать в браузерном коде. Значения, которые попадают в HTML или JavaScript опубликованной страницы, нельзя считать секретными: посетитель может увидеть клиентский код и сетевые запросы через инструменты браузера.","type":"unstyled","key":"e9la3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При этом существуют публичные или publishable keys, которые конкретный сервис специально разрешает использовать на клиентской стороне. Поэтому ориентироваться только на название переменной нельзя. Нужно смотреть документацию конкретного сервиса и понимать, какой тип ключа используется.","type":"unstyled","key":"4g6fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Как читать незнакомую модификацию","type":"header-two","key":"61omj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если перед вами 200 строк кода, не нужно читать их сверху вниз. Есть намного более практичный порядок.","type":"unstyled","key":"3f05k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала прочитайте инструкцию. Из нее должно быть понятно, куда вставлять код, с каким блоком он работает, нужно ли менять ID, какие параметры доступны для настройки, что нужно опубликовать и есть ли отдельная часть для HEAD. Если ничего из этого не объяснено, использовать модификацию становится сложнее и рискованнее.","type":"unstyled","key":"2pqb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем найдите настройки. Ищите НАСТРОЙКИ, SETTINGS, CONFIG, CSS-переменные --... или очевидно вынесенные параметры JavaScript.","type":"unstyled","key":"1r7kl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого найдите #rec... и проверьте, привязан ли код к конкретному блоку и нужно ли заменить его ID. Затем можно поискать https://, чтобы увидеть используемые ссылки, но не нужно автоматически заменять все найденные URL: один адрес может быть ссылкой кнопки, второй — изображением, а третий — подключаемой библиотекой, без которой код перестанет работать.","type":"unstyled","key":"bijgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в модификации есть