Откройте хорошо оформленную статью WeChat — и заметите, что части, делающие её профессиональной, — не слова, а стилизованные блоки. Градиентная карточка заголовка сверху, маленькие заголовки разделов с цветной полосой, карточка «подпишитесь на нас» в конце, боксы цитат со скруглёнными углами. Многие из них построены как SVG, и именно SVG позволяет им держать точную форму и цвет, каким бы телефоном они ни рендерились.
Вот досадная часть: когда вы находите понравившийся и пытаетесь переиспользовать, копирование обычно его ломает. Вы вставляете в редактор WeChat, и вёрстка рушится, цвета уплощаются или половина блока исчезает. Это руководство объясняет, почему так происходит и как извлечь эти блоки, чтобы они остались целыми.
Почему WeChat опирается на SVG для вёрстки
Редактор WeChat вырезает большую часть CSS. Нельзя прикрепить таблицу стилей, и множество инлайн-стилей фильтруется. Так что дизайнеры нашли обходной путь: строить декоративные части как SVG, где форма, градиент и позиционирование текста живут внутри разметки SVG. WeChat оставляет эту разметку в основном в покое, так что блок рендерится одинаково везде.
Именно поэтому эти блоки в принципе так переиспользуемы. SVG-карточка заголовка самодостаточна. Она не зависит от внешнего файла или класса, определённого где-то ещё на странице. В теории можно вынуть её и бросить в свою статью. Проблема только в вынимании.
Почему наивное копирование ломает блок
Когда вы выделяете стилизованный блок на отрендеренной странице и копируете, вы обычно захватываете отрендеренную браузером версию, а не исходник. Три вещи идут не так:
- Обёрточная разметка теряется. Блок часто сидит внутри вложенных контейнеров, несущих позиционирование. Возьмите только видимую часть — и она теряет свой бокс.
- Закодированные части искажаются. SVG часто держит фоновые картинки или шрифты как закодированные данные. Копирование-вставка через неверный путь может испортить эту строку.
- Нельзя чисто перекрасить. Даже если он выживет, цвета впечены в дюжину мест разметки. Смена темы вручную означает рыться в сыром коде.
Чтобы надёжно переиспользовать эти блоки, вам не нужен скриншот и не нужна догадка буфера обмена браузера. Вам нужна настоящая разметка блока, вытащенная как самостоятельная единица.
Извлечение блоков надёжным способом
Чистый подход — скопировать исходное содержимое всей статьи и дать инструменту его разобрать, а не пытаться вручную выделить один блок на экране. Извлечение модулей вёрстки от IMG.DIY делает ровно это: вы вставляете содержимое, оно читает разметку собственным DOM-парсером браузера и вычленяет переиспользуемые стилизованные блоки — SVG-карточки типографики, заголовки, карточки «подпишитесь», стилизованные цитаты, разделители — каждый как независимый модуль.
Одна важная оговорка, названная прямо: инструмент не может получить статью по её URL. Браузеры блокируют кросс-сайтовые запросы к mp.weixin.qq.com, так что никакой браузерный инструмент не может стянуть страницу WeChat по ссылке. Вы копируете содержимое и вставляете его. Это не ограничение, которое надо обходить, а то, как работает модель безопасности веба.
Поскольку каждый блок изолирован и предпросматривается в своей песочнице Shadow DOM, стили одного модуля не могут просочиться в другой. Что вы видите в превью — то этот блок и есть на самом деле.
Перекраска без прикосновения к коду
Как только блок извлечён, проблема цвета, упомянутая ранее, решается за вас. Кликните любой цвет в модуле и смените его — и тот же цвет обновится везде, где появляется в этом блоке. Так синяя карточка заголовка становится зелёной вашего бренда одним ходом вместо редактирования шести hex-значений, зарытых в SVG. Можно также заменить картинки-заглушки внутри модуля своими.
Вот где «переиспользование» перестаёт быть теоретическим. Блок, понравившийся из чужой статьи, становится блоком в вашей палитре, в ваших цветах, готовым бросить в вашу следующую работу.
Сборка собственной библиотеки модулей
Настоящая отдача — сделать это несколько раз и сохранить извлечённое. Каждый понравившийся модуль можно сохранить в локальную библиотеку, живущую в вашем браузере (через localStorage), и можно экспортировать всю библиотеку в файл JSON, чтобы сделать резервную копию или перенести на другую машину. Ничего не загружается и нет аккаунта — библиотека ваша, на вашем устройстве.
За несколько недель вы собираете личный набор: пару карточек заголовков, заголовок раздела, которому доверяете, футер-карточку, разделитель-другой. Когда пора верстать новую статью, вы берёте из своего набора вместо того, чтобы снова рыться в чужих постах. Чтобы вставить стилизованный блок в редактор, вы копируете его как инлайн-HTML и вставляете — блок держит форматирование, потому что стили едут с разметкой.
Начните с одного блока, который всегда нравился, извлеките его чисто, перекрасьте под свой бренд и сохраните. Это весь цикл, и он накапливается.