Abra um artigo bem projetado do WeChat e você vai notar que as partes que o fazem parecer profissional não são as palavras — são os blocos estilizados. O cartão de título em gradiente no topo, os pequenos cabeçalhos de seção com uma barra colorida, o cartão de "siga-nos" no final, as caixas de citação com cantos arredondados. Muitos desses são feitos como SVG, e é o SVG que permite que eles mantenham sua forma e cor exatas, não importa qual celular os renderize.
Aqui está a parte frustrante: quando você encontra um de que gosta e tenta reutilizá-lo, copiá-lo geralmente o quebra. Você cola no editor do WeChat e o layout desmorona, as cores ficam chapadas, ou metade do bloco desaparece. Este guia explica por que isso acontece e como extrair esses blocos para que fiquem intactos.
Por que o WeChat se apoia em SVG para layout
O editor do WeChat remove a maior parte do CSS. Você não pode anexar uma folha de estilos, e muitos estilos inline são filtrados. Então os designers acharam uma saída: construir as peças decorativas como SVG, onde a forma, o gradiente e o posicionamento do texto ficam todos dentro da marcação SVG. O WeChat deixa essa marcação praticamente em paz, então o bloco renderiza igual em todo lugar.
É também por isso que esses blocos são tão reutilizáveis em princípio. Um cartão de título SVG é autocontido. Ele não depende de um arquivo externo nem de uma classe definida em outro lugar da página. Em teoria você pode retirá-lo e soltá-lo no seu próprio artigo. O problema está só na retirada.
Por que copiar de forma ingênua quebra o bloco
Quando você seleciona um bloco estilizado em uma página renderizada e o copia, geralmente está pegando a versão renderizada pelo navegador, não a fonte original. Três coisas dão errado:
- A marcação de envolvimento se perde. O bloco muitas vezes fica dentro de contêineres aninhados que carregam o posicionamento. Pegue só a parte visível e ele perde sua caixa.
- Peças codificadas ficam corrompidas. SVG frequentemente guarda imagens de fundo ou fontes como dados codificados. Um copiar-colar pelo caminho errado pode corromper essa string.
- Você não consegue recolori-lo com limpeza. Mesmo que sobreviva, as cores estão gravadas em uma dúzia de lugares na marcação. Mudar o tema à mão significa caçar pelo código bruto.
Para reutilizar esses blocos de forma confiável, você não quer uma captura de tela e não quer o palpite da área de transferência do navegador. Você quer a marcação real do bloco, retirada como uma unidade independente.
Extraindo blocos do jeito confiável
A abordagem limpa é copiar o conteúdo-fonte inteiro do artigo e deixar uma ferramenta interpretá-lo, em vez de tentar selecionar um bloco à mão na tela. O Extrator de Módulos de Layout do IMG.DIY faz exatamente isso: você cola o conteúdo, ele lê a marcação com o próprio interpretador DOM do navegador, e isola os blocos estilizados reutilizáveis — cartões tipográficos SVG, cabeçalhos com título, cartões de siga-nos, citações estilizadas, divisores — cada um como um módulo independente.
Uma ressalva importante, dita com clareza: a ferramenta não consegue buscar um artigo pela sua URL. Os navegadores bloqueiam buscas entre sites de mp.weixin.qq.com, então nenhuma ferramenta no navegador consegue puxar uma página do WeChat por link. Você copia o conteúdo e o cola. Isso não é tanto uma limitação a contornar, mas como o modelo de segurança da web funciona.
Como cada bloco é isolado e pré-visualizado em sua própria caixa de areia Shadow DOM, os estilos de um módulo não podem vazar para outro. O que você vê na prévia é o que aquele bloco realmente é.
Recolorindo sem tocar em código
Uma vez que um bloco é extraído, o problema de cor que mencionei antes é resolvido para você. Clique em qualquer cor em um módulo e mude-a — e a mesma cor se atualiza em todo lugar onde aparece naquele bloco. Assim um cartão de título azul vira o verde da sua marca em um movimento, em vez de você editar seis valores hex enterrados no SVG. Você também pode trocar as imagens de espaço reservado dentro de um módulo pelas suas.
É aqui que "reutilizar" deixa de ser teórico. Um bloco de que você gostou no artigo de outra pessoa vira um bloco na sua paleta, nas suas cores, pronto para soltar na sua próxima peça.
Montando sua própria biblioteca de módulos
O verdadeiro retorno é fazer isso algumas vezes e guardar o que você extrai. Cada módulo de que você gosta pode ser salvo em uma biblioteca local que vive no seu navegador (via localStorage), e você pode exportar a biblioteca inteira para um arquivo JSON para fazer backup ou movê-la para outra máquina. Nada é enviado e não há conta — a biblioteca é sua, no seu dispositivo.
Ao longo de algumas semanas você monta um kit pessoal: um par de cartões de título, um cabeçalho de seção em que você confia, um cartão de rodapé, um divisor ou dois. Quando é hora de diagramar um novo artigo, você puxa do seu próprio conjunto em vez de vasculhar os posts de outras pessoas de novo. Para colocar um bloco estilizado no editor, você o copia como HTML inline e o cola — o bloco mantém sua formatação porque o estilo viaja com a marcação.
Comece com um bloco de que você sempre gostou, extraia-o com limpeza, recolora-o para sua marca e salve-o. Esse é o ciclo todo, e ele acumula.