打开一篇排版讲究的公众号文章，你会发现让它显得专业的，往往不是文字，而是那些成型的样式块：顶部的渐变标题卡、带一根色条的小栏目头、结尾那张"关注我们"卡片、圆角的引用框。这些东西很多是用 SVG 做的，而正是 SVG 让它们不管在哪台手机上渲染，都能保持一模一样的形状和颜色。
让人头疼的地方在于：当你看到一个喜欢的、想拿来复用时，直接复制通常会把它搞坏。粘进公众号编辑器，版式塌了、颜色变平了，或者半块内容直接不见了。这篇文章讲清楚这是为什么，以及怎么把这些块提取出来还能保持完好。
公众号为什么偏爱用 SVG 做排版
公众号编辑器会过滤掉大部分 CSS。你没法挂一份样式表，很多内联样式也会被清掉。于是设计者找到一条绕路：把装饰性的部件做成 SVG——形状、渐变、文字位置全都写在 SVG 标记内部。公众号基本不动这段标记，所以这个块到哪儿渲染都一个样。
这也正是这些块理论上极其好复用的原因。一张 SVG 标题卡是自成一体的，它不依赖外部文件，也不依赖页面别处定义的某个 class。理论上你可以把它整块拎出来，放进自己的文章。问题只出在"拎出来"这一步。
为什么直接复制会把块搞坏
当你在渲染好的页面上选中一个样式块去复制时，你抓到的通常是浏览器渲染后的版本，而不是原始源码。于是三件事出岔子：
- 外层包裹丢了。 这个块常常嵌在好几层容器里，定位信息藏在那些容器上。你只抓可见部分，它就失去了自己的盒子。
- 编码内容被弄乱。 SVG 里经常把背景图或字体存成编码数据。走错路径的复制粘贴会把那串字符串弄坏。
- 改色改不干净。 就算它侥幸活下来，颜色也是散在标记的十几个地方里。想手动换主题色，就得在原始代码里一处处翻找。
要可靠地复用这些块，你不想要截图，也不想要浏览器剪贴板的那份"猜测"。你要的是块本身的真实标记，作为一个独立单元被拆出来。
可靠的提取方式
干净的做法是把整篇文章的源内容复制下来，交给工具去解析，而不是想在屏幕上手动选中某一个块。IMG.DIY 的公众号排版模块提取正是这么做的：你把内容粘进去，它用浏览器自带的 DOM 解析器读取标记，把可复用的样式块——SVG 字体卡、带标题的栏目头、关注卡、样式引用、分隔线——每一个都单独隔离成独立模块。
有一点得说明白：这个工具没法通过网址去抓文章。浏览器会拦截对 mp.weixin.qq.com 的跨站抓取，所以任何浏览器端工具都不可能靠一条链接把公众号页面拉下来。你复制内容、粘进去就行。这与其说是一个要绕过的限制，不如说本来就是网页安全模型的运作方式。
由于每个块都被隔离在各自的 Shadow DOM 沙箱里预览，一个模块的样式不会渗到另一个里。你在预览里看到的，就是这个块真实的样子。
不碰代码就能改色
块一旦被提取出来，前面说的改色难题就替你解决了。点模块里的任意一处颜色改掉它——这个块里同一个颜色出现的所有地方都会一起变。于是一张蓝色标题卡一步就变成你品牌的绿色，而不用你去 SVG 里埋着改六个色值。你还能把模块里的占位图换成自己的图。
到这一步，"复用"才不再停留在理论上。一个你从别人文章里看中的块，变成了你调色板里、你品牌色下、可以直接放进下一篇的块。
攒起你自己的模块库
真正的回报，是多做几次并把提取到的东西留下来。每个你喜欢的模块都能存进一个跑在浏览器里的本地库（用 localStorage），而且你可以把整个库导出成一份 JSON 文件来备份，或搬到另一台机器上。什么都不上传，也没有账号——这个库是你的，就在你设备上。
几周下来你就攒出一套私人工具包：几张标题卡、一个你信得过的栏目头、一张页脚卡、一两条分隔线。到要给新文章排版时，你从自己这套里取，而不必再去别人的帖子里翻。要把一个样式块放进编辑器，你把它复制成内联 HTML 再粘进去——样式跟着标记一起走，所以块能保持格式不变。
从一个你一直喜欢的块开始：干净地提取它、改成你的品牌色、存下来。整个循环就这么简单，而且会越攒越值。