Nếu bạn vận hành một Tài khoản Chính thức WeChat (hay bất kỳ ấn phẩm rich-text nào), bạn đã từng thấy những bố cục mình ước có thể dùng lại — một thẻ mục có tiêu đề, một khối kêu gọi theo dõi, một trích dẫn được tạo kiểu, một đường phân cách. Sao chép thủ công đồng nghĩa với việc đào bới trong HTML lồng nhau, và một chỉnh sửa sai làm hỏng cả SVG. Công cụ này làm phần việc tẻ nhạt đó thay bạn: dán một bài viết, và nó rút từng khối được tạo kiểu ra thành một mô-đun độc lập, tái sử dụng được.
Từ đó bạn có thể đổi ảnh bên trong một khối (tải ảnh mới lên hoặc dán một URL), đổi màu bằng cách bấm vào bất kỳ màu nào khối đang dùng, sao chép khối dưới dạng HTML nội tuyến sẵn để dán vào trình biên tập WeChat, một CMS, hay bất kỳ ô rich-text nào — và lưu những khối bạn thích vào một thư viện cục bộ nằm trong trình duyệt này. Không có gì được tải lên; tài liệu của bạn là của bạn.
Vì mọi thứ chạy phía máy khách với Clipboard API và localStorage, nên không có tài khoản, không đám mây, không backend — cùng tư tưởng ưu tiên cục bộ đứng sau phần còn lại của IMG.DIY.
Cách sử dụng
- Dán một bài viếtSao chép một bài viết WeChat (hoặc bất kỳ nội dung định dạng nào) và dán vào ô. Bạn cũng có thể dán mã nguồn HTML thô.
- Trích các mô-đunBấm Trích — mỗi khối được tạo kiểu hiện ra thành một thẻ xem trước riêng, được cô lập để kiểu của trang không can thiệp được.
- Chỉnh sửa và dùng lạiĐổi ảnh, đổi màu, rồi Sao chép HTML để dán nơi khác, hoặc Lưu vào thư viện cục bộ cho lần sau.
Vì sao nên trích xuất các mô-đun bố cục thay vì dựng lại chúng
Những khối đẹp mắt trong các bài viết WeChat — thẻ mục có tiêu đề, lời mời theo dõi, trích dẫn có phong cách, đường phân cách SVG — hầu như luôn là HTML và SVG nội tuyến được ráp bằng tay. Dựng lại một khối từ đầu nghĩa là phải khớp chính xác phần đệm, màu, chuyển màu và các span lồng nhau, và chỉ một chỉnh sửa sai là làm sập SVG. Trích xuất khối hoàn thiện thay vào đó giữ nguyên mọi chi tiết và biến nó thành thứ bạn có thể tái sử dụng trong vài giây.
Công cụ này phân tích bài viết bạn dán vào và bóc từng khối có phong cách ra thành một mô-đun độc lập. Bạn không phải cạo cả một trang thành một khối lớn; bạn nhận được một danh sách gọn gàng gồm các mảnh riêng lẻ, tái sử dụng được — đúng thứ bạn muốn khi thấy một bố cục đẹp trong bài của người khác.
Cục bộ trước tiên, nên các tài nguyên thực sự là của bạn
Các trình chỉnh sửa đám mây giữ những khối bạn lưu trên máy chủ của họ sau một tài khoản. Ở đây thư viện sống trong chính trình duyệt của bạn qua localStorage, và bạn có thể xuất nó ra một tệp JSON để sao lưu hoặc chuyển giữa các máy. Không có gì được tải lên, không có đăng ký, và việc phân tích, thay ảnh và đổi màu đều chạy trên thiết bị của bạn bằng chính DOM và Clipboard API của trình duyệt.
Lợi ích thực tế là một thư viện mô-đun cá nhân, di động lớn lên theo công việc của bạn: dán một bài viết, giữ lại hai ba khối đáng tái sử dụng, và lần sau kéo chúng ra thẳng dưới dạng HTML nội tuyến.
Mọi người dùng để làm gì
Tái sử dụng một bố cục bạn thích — Thấy một thẻ có tiêu đề hay đường phân cách đẹp trong bài viết khác — trích xuất nó, đổi màu theo thương hiệu của bạn, và sao chép vào bản nháp của mình.
Dựng một bộ phong cách riêng — Gom các tiêu đề mục, kiểu trích dẫn và thẻ mời theo dõi bạn dùng mỗi số vào một thư viện cục bộ.
Thay ảnh trong một khối mẫu — Giữ một bố cục thẻ ảnh yêu thích và chỉ thay bức ảnh mỗi lần bằng ảnh bạn tự tải lên.
Đổi màu theo thương hiệu — Đổi màu nhấn của một khối ở mọi nơi cùng lúc thay vì lục tìm qua các kiểu nội tuyến.
Chuyển khối giữa các trình chỉnh sửa — Sao chép HTML nội tuyến dán được vào trình soạn WeChat, một CMS hay bất kỳ ô văn bản định dạng nào mà vẫn giữ nguyên phong cách.
Giữ một kho riêng tư, di động — Xuất thư viện của bạn ra JSON để sao lưu hoặc mang sang một trình duyệt khác — không tài khoản, không đám mây.
Những khối bố cục hay ho bị nhốt bên trong bài viết của người khác
Ai vận hành một Tài khoản Chính thức WeChat đều gom góp các khối bố cục theo cách chậm chạp. Bạn đọc một bài viết có một thẻ tiêu đề SVG đẹp đẽ, một bảng "theo dõi chúng tôi" gọn gàng, một tiêu đề mục với một dải màu chạy dọc bên cạnh, và bạn nghĩ: mình muốn cái cấu trúc đó. Thế là bạn sao chép cả bài viết vào trình biên tập của mình, rồi bỏ ra hai mươi phút xóa mọi thứ trừ đúng cái khối bạn muốn, cầu mong đừng cắt nhầm một thẻ <span> lạc lối làm SVG sụp đổ. Bố cục chữ SVG của WeChat nổi tiếng mong manh — một thuộc tính đặt sai chỗ, một tấm ảnh bạn đổi kích thước nhầm chỗ, và thẻ đó kết xuất thành một hộp vỡ trên điện thoại của một nửa số người đọc. Những khối bạn muốn là thật, dùng lại được, và nằm ngay đó trong HTML, nhưng không có cách nào sạch sẽ để nhấc một cái ra và giữ lại.
Nửa còn lại của nỗi đau là quyền sở hữu. Câu trả lời hiển nhiên là một trình biên tập mẫu như 秀米 hay 135编辑器: thư viện khổng lồ, kéo-và-thả, thực sự mạnh mẽ. Nhưng các tài nguyên sống trong đám mây của họ, sau một tài khoản, và thường sau một hạng thành viên. Bộ phong cách bạn dày công lắp ráp không phải là một thư mục bạn sở hữu — nó là một lần đăng nhập bạn thuê. Nếu bạn muốn trao một khối cho đồng đội, chỉnh một màu trên tất cả các thẻ cùng lúc, hay chỉ đơn giản giữ một thư viện cá nhân gồm năm cái tiêu đề bạn thực sự dùng lại, thì bạn đang làm việc bên trong sản phẩm của người khác theo điều kiện của người khác.
Công cụ này đi theo hướng ngược lại. Bạn dán một bài viết (hoặc bất kỳ nội dung định dạng phong phú nào, hoặc HTML thô) và nó phân tích cú pháp đánh dấu ngay trong trình duyệt của bạn, rút ra từng khối được tạo phong cách dùng lại được — thẻ chữ SVG, tiêu đề mục có tựa, thẻ theo dõi-chúng-tôi, trích dẫn được tạo phong cách, đường phân cách — thành mô-đun độc lập của riêng nó. Từ đó bạn chỉnh sửa từng cái trực tiếp: thay tấm ảnh bên trong một thẻ, đổi màu nó, sao chép nó dưới dạng HTML nội tuyến sạch sẵn sàng dán vào trình biên tập WeChat hay bất kỳ ô văn bản phong phú nào, và lưu nó vào một thư viện cục bộ mà bạn có thể xuất ra dạng JSON. Không có gì được tải lên, không có tài khoản, và một khi trang đã tải thì nó vẫn chạy ngoại tuyến. Một giới hạn cần nói thẳng ngay từ đầu: nó không thể lấy một bài viết bằng URL của nó — trình duyệt chặn các yêu cầu chéo trang tới mp.weixin.qq.com, nên đầu vào luôn là sao-chép-dán.
Điều làm nên khác biệt
- Ưu tiên tại chỗ, không tải gì lên. Việc phân tích cú pháp diễn ra trong trình duyệt bằng
DOMParser. Bài viết bạn dán không bao giờ rời khỏi máy — không máy chủ, không tài khoản, không hệ thống hậu trường. - Trích xuất theo từng mô-đun. Mỗi khối được tạo phong cách xuất ra như một mô-đun riêng, tự chứa thay vì một bức tường đánh dấu rối rắm mà bạn phải cắt tỉa bằng tay.
- Thay ảnh, tại chỗ. Thay tấm ảnh bên trong một thẻ bằng cách tải lên một ảnh mới hoặc dán một URL ảnh — mà không đụng tới cấu trúc SVG bao quanh vốn khiến nó mong manh.
- Đổi màu khắp nơi cùng lúc. Nhấp bất kỳ màu nào một mô-đun dùng và đổi nó trên cả khối trong một động tác, để một thẻ khớp với thương hiệu của bạn mà không phải săn lùng qua các mã hex.
- Sao chép HTML nội tuyến sạch. Một cú nhấp đưa mô-đun vào bảng nhớ tạm của bạn dưới dạng HTML nội tuyến (qua Clipboard API), sẵn sàng dán thẳng vào trình biên tập WeChat, một CMS, hay bất kỳ ô văn bản phong phú nào.
- Một thư viện bạn sở hữu. Lưu các mô-đun vào bộ nhớ cục bộ và xuất hoặc nhập cả bộ sưu tập dưới dạng JSON — một bộ tài nguyên thực thụ, mang đi được, không phải một lần đăng nhập bạn thuê.
- Xem trước biệt lập. Mỗi mô-đun kết xuất bên trong Shadow DOM, nên phong cách của một khối không thể rò rỉ sang khối khác và bản xem trước cho bạn thấy chính xác thứ bạn sẽ dán.
- Hoạt động ngoại tuyến một khi đã tải. Sau khi trang tải, không cần kết nối nào để trích xuất, chỉnh sửa hay sao chép.
IMG.DIY so với các công cụ bố cục khác
| IMG.DIY Module Extractor | 秀米 (xiumi.us) | 135编辑器 | i排版 | Sao chép HTML bằng tay | |
|---|---|---|---|---|---|
| Mục đích cốt lõi | Trích xuất & sở hữu các khối dùng lại | Trình biên tập mẫu đầy đủ | Trình biên tập mẫu đầy đủ | Trình biên tập mẫu đầy đủ | — |
| Thư viện mẫu | Không (bạn dựng từ cái bạn dán) | Khổng lồ | Khổng lồ | Lớn | Không |
| Yêu cầu tài khoản | Không | Có | Có | Có | Không |
| Có gì được tải lên | Không | Có (đám mây) | Có (đám mây) | Có (đám mây) | Không |
| Sở hữu tài nguyên | Có (JSON cục bộ) | Thuê / đám mây | Thuê / đám mây | Thuê / đám mây | Có, nhưng thủ công |
| Thay ảnh theo từng khối | Có | Có (trong trình biên tập) | Có (trong trình biên tập) | Có (trong trình biên tập) | Thủ công |
| Đổi màu cả một khối | Có, một cú nhấp | Có (trong trình biên tập) | Có (trong trình biên tập) | Có (trong trình biên tập) | Thủ công |
| Hoạt động ngoại tuyến | Có, một khi đã tải | Không | Không | Không | Có |
| Giá | Miễn phí | Gói miễn phí + trả phí | Gói miễn phí + trả phí | Gói miễn phí + trả phí | Miễn phí |
Công bằng mà nói, đây không phải là vật thay thế cho một trình biên tập mẫu, và nó không giả vờ như vậy. 秀米, 135编辑器 và i排版 là những sản phẩm trưởng thành với thư viện mẫu khổng lồ, bố cục kéo-thả trực tiếp, và nhiều năm trau chuốt — nếu bạn đang dựng một bài viết phong phú từ đầu, thì đó là nơi bạn đến, và chúng xứng với danh tiếng của mình. Cái chúng không cho bạn là một thư mục riêng tư, mang đi được gồm những khối cụ thể bạn dùng lại, chỉnh sửa được mà không đăng nhập và không có gì rời khỏi máy của bạn. Công cụ này là một trình trích xuất và sắp xếp, không phải một trình biên tập: nó biến những khối bạn ngưỡng mộ ngoài kia thành các mô-đun bạn sở hữu, đổi màu, thay ảnh, và dán bất cứ đâu. Dùng các trình biên tập lớn để soạn thảo; dùng cái này để giữ lại các mảnh.
Vì sao chọn IMG.DIY
Trích khối
Rút các thẻ SVG, tiêu đề, trích dẫn và đường phân cách ra thành các mô-đun độc lập.
Đổi ảnh nội tuyến
Thay bất kỳ ảnh nào trong một khối bằng ảnh của bạn — tải lên hoặc URL.
Đổi màu một bấm
Bấm bất kỳ màu nào một khối dùng và đổi nó khắp nơi cùng lúc.
Sao chép HTML nội tuyến
Dán thẳng vào trình biên tập WeChat, một CMS, hay bất kỳ ô rich-text nào.
Thư viện cục bộ
Lưu các mô-đun vào trình duyệt này và xuất/nhập chúng dưới dạng JSON.
Không tải lên
Chạy hoàn toàn trong trình duyệt của bạn — tài liệu không bao giờ rời khỏi thiết bị.