開啟一篇排版講究的公眾號文章，你會發現讓它顯得專業的，往往不是文字，而是那些成型的樣式塊：頂部的漸層標題卡、帶一根色條的小欄目頭、結尾那張"關注我們"卡片、圓角的引用框。這些東西很多是用 SVG 做的，而正是 SVG 讓它們不管在哪臺手機上渲染，都能保持一模一樣的形狀和顏色。
讓人頭疼的地方在於：當你看到一個喜歡的、想拿來複用時，直接複製通常會把它搞壞。粘進公眾號編輯器，版式塌了、顏色變平了，或者半塊內容直接不見了。這篇文章講清楚這是為什麼，以及怎麼把這些塊提取出來還能保持完好。
公眾號為什麼偏愛用 SVG 做排版
公眾號編輯器會過濾掉大部分 CSS。你沒法掛一份樣式表，很多內聯樣式也會被清掉。於是設計者找到一條繞路：把裝飾性的部件做成 SVG——形狀、漸層、文字位置全都寫在 SVG 標記內部。公眾號基本不動這段標記，所以這個塊到哪兒渲染都一個樣。
這也正是這些塊理論上極其好複用的原因。一張 SVG 標題卡是自成一體的，它不依賴外部檔案，也不依賴頁面別處定義的某個 class。理論上你可以把它整塊拎出來，放進自己的文章。問題只出在"拎出來"這一步。
為什麼直接複製會把塊搞壞
當你在渲染好的頁面上選中一個樣式塊去複製時，你抓到的通常是瀏覽器渲染後的版本，而不是原始原始碼。於是三件事出岔子：
- 外層包裹丟了。 這個塊常常嵌在好幾層容器裡，定位資訊藏在那些容器上。你只抓可見部分，它就失去了自己的盒子。
- 編碼內容被弄亂。 SVG 裡經常把背景圖或字型存成編碼資料。走錯路徑的複製貼上會把那串字串弄壞。
- 改色改不乾淨。 就算它僥倖活下來，顏色也是散在標記的十幾個地方里。想手動換主題色，就得在原始程式碼裡一處處翻找。
要可靠地複用這些塊，你不想要截圖，也不想要瀏覽器剪貼簿的那份"猜測"。你要的是塊本身的真實標記，作為一個獨立單元被拆出來。
可靠的提取方式
乾淨的做法是把整篇文章的源內容複製下來，交給工具去解析，而不是想在螢幕上手動選中某一個塊。IMG.DIY 的公眾號排版模組提取正是這麼做的：你把內容粘進去，它用瀏覽器自帶的 DOM 解析器讀取標記，把可複用的樣式塊——SVG 字型卡、帶標題的欄目頭、關注卡、樣式引用、分隔線——每一個都單獨隔離成獨立模組。
有一點得說明白：這個工具沒法透過網址去抓文章。瀏覽器會攔截對 mp.weixin.qq.com 的跨站抓取，所以任何瀏覽器端工具都不可能靠一條連結把公眾號頁面拉下來。你複製內容、粘進去就行。這與其說是一個要繞過的限制，不如說本來就是網頁安全模型的運作方式。
由於每個塊都被隔離在各自的 Shadow DOM 沙箱裡預覽，一個模組的樣式不會滲到另一個裡。你在預覽裡看到的，就是這個塊真實的樣子。
不碰程式碼就能改色
塊一旦被提取出來，前面說的改色難題就替你解決了。點模組裡的任意一處顏色改掉它——這個塊裡同一個顏色出現的所有地方都會一起變。於是一張藍色標題卡一步就變成你品牌的綠色，而不用你去 SVG 裡埋著改六個色值。你還能把模組裡的佔點陣圖換成自己的圖。
到這一步，"複用"才不再停留在理論上。一個你從別人文章裡看中的塊，變成了你調色盤裡、你品牌色下、可以直接放進下一篇的塊。
攢起你自己的模組庫
真正的回報，是多做幾次並把提取到的東西留下來。每個你喜歡的模組都能存進一個跑在瀏覽器裡的本地庫（用 localStorage），而且你可以把整個庫匯出成一份 JSON 檔案來備份，或搬到另一臺機器上。什麼都不上傳，也沒有賬號——這個庫是你的，就在你裝置上。
幾周下來你就攢出一套私人工具包：幾張標題卡、一個你信得過的欄目頭、一張頁尾卡、一兩條分隔線。到要給新文章排版時，你從自己這套裡取，而不必再去別人的帖子裡翻。要把一個樣式塊放進編輯器，你把它複製成內聯 HTML 再粘進去——樣式跟著標記一起走，所以塊能保持格式不變。
從一個你一直喜歡的塊開始：乾淨地提取它、改成你的品牌色、存下來。整個迴圈就這麼簡單，而且會越攢越值。