Mở một bài viết WeChat được thiết kế tốt và bạn sẽ nhận ra những phần khiến nó trông chuyên nghiệp không phải là chữ — chúng là các khối được tạo kiểu. Thẻ tiêu đề gradient ở trên cùng, các tiêu đề mục nhỏ với một thanh màu, thẻ "theo dõi chúng tôi" ở cuối, các hộp trích dẫn góc bo tròn. Rất nhiều trong số đó được dựng bằng SVG, và SVG là thứ cho phép chúng giữ đúng hình dạng và màu bất kể điện thoại nào kết xuất.
Đây là phần bực bội: khi bạn tìm được một cái bạn thích và thử tái dùng, sao chép nó thường làm hỏng nó. Bạn dán vào trình chỉnh sửa WeChat và bố cục sụp đổ, màu trở nên bệt, hoặc nửa khối biến mất. Hướng dẫn này giải thích vì sao điều đó xảy ra và cách trích những khối đó ra sao cho chúng giữ nguyên vẹn.
Vì sao WeChat dựa vào SVG cho bố cục
Trình chỉnh sửa của WeChat lột bỏ hầu hết CSS. Bạn không thể gắn một bảng định kiểu, và rất nhiều kiểu nội tuyến bị lọc đi. Nên các nhà thiết kế tìm ra một cách lách: dựng các mảnh trang trí dưới dạng SVG, nơi hình dạng, gradient và vị trí chữ đều nằm bên trong mã đánh dấu SVG. WeChat để mã đánh dấu đó gần như yên, nên khối kết xuất giống nhau ở mọi nơi.
Đó cũng là lý do những khối này về nguyên tắc rất dễ tái dùng. Một thẻ tiêu đề SVG là tự chứa. Nó không phụ thuộc vào một tệp bên ngoài hay một lớp được định nghĩa ở đâu đó khác trên trang. Về lý thuyết bạn có thể nhấc nó ra và thả vào bài viết của riêng mình. Vấn đề chỉ nằm ở việc nhấc ra.
Vì sao sao chép ngây thơ làm hỏng khối
Khi bạn chọn một khối được tạo kiểu trên một trang đã kết xuất và sao chép nó, bạn thường lấy phiên bản đã kết xuất của trình duyệt, không phải nguồn gốc. Ba điều hỏng:
- Mã đánh dấu bao bọc bị mất. Khối thường nằm bên trong các vùng chứa lồng nhau mang thông tin định vị. Lấy chỉ phần thấy được và nó mất cái hộp của mình.
- Các mảnh được mã hóa bị nhào nát. SVG thường chứa ảnh nền hoặc phông dưới dạng dữ liệu mã hóa. Một lần sao-dán qua đường sai có thể làm hỏng chuỗi đó.
- Bạn không thể đổi màu nó sạch sẽ. Ngay cả khi nó sống sót, các màu được nướng vào cả chục chỗ trong mã đánh dấu. Đổi chủ đề bằng tay nghĩa là lần mò qua mã thô.
Để tái dùng những khối này một cách đáng tin, bạn không muốn một ảnh chụp màn hình và không muốn phỏng đoán của bộ nhớ tạm của trình duyệt. Bạn muốn chính mã đánh dấu của khối, được rút ra như một đơn vị độc lập.
Trích các khối theo cách đáng tin
Cách tiếp cận sạch sẽ là sao chép toàn bộ nội dung nguồn của bài viết và để một công cụ phân tích nó, thay vì cố tự tay chọn một khối trên màn hình. Công cụ trích mô-đun bố cục của IMG.DIY làm đúng điều này: bạn dán nội dung vào, nó đọc mã đánh dấu bằng chính bộ phân tích DOM của trình duyệt, và nó cô lập các khối được tạo kiểu tái dùng được — thẻ kiểu chữ SVG, tiêu đề có tựa, thẻ theo-dõi-chúng-tôi, trích dẫn được tạo kiểu, đường phân cách — mỗi cái như một mô-đun độc lập.
Một điều cần lưu ý quan trọng, nói thẳng: công cụ không thể lấy một bài viết qua URL của nó. Trình duyệt chặn các lần lấy chéo trang của mp.weixin.qq.com, nên không công cụ nào chạy trong trình duyệt kéo được một trang WeChat xuống bằng liên kết. Bạn sao chép nội dung và dán nó vào. Đó không phải một hạn chế để lách quanh mà đúng hơn là cách mô hình bảo mật của web hoạt động.
Vì mỗi khối được cô lập và xem trước trong hộp cát Shadow DOM riêng của nó, kiểu của một mô-đun không thể rò rỉ sang mô-đun khác. Cái bạn thấy trong bản xem trước đúng là bản chất của khối đó.
Đổi màu mà không đụng vào mã
Một khi một khối được trích ra, vấn đề màu tôi nhắc ở trên được giải quyết cho bạn. Nhấp bất kỳ màu nào trong một mô-đun và đổi nó — và cùng màu đó cập nhật ở mọi nơi nó xuất hiện trong khối đó. Nên một thẻ tiêu đề xanh dương thành màu xanh lá của thương hiệu bạn trong một nước đi, thay vì bạn phải sửa sáu giá trị hex chôn trong SVG. Bạn cũng có thể thay các ảnh giữ chỗ bên trong một mô-đun bằng ảnh của riêng bạn.
Đây là chỗ "tái dùng" thôi mang tính lý thuyết. Một khối bạn thích từ bài viết của người khác trở thành một khối trong bảng màu của bạn, theo màu của bạn, sẵn sàng để thả vào bài tiếp theo của bạn.
Xây dựng thư viện mô-đun của riêng bạn
Phần thưởng thật sự là làm việc này vài lần và giữ lại những gì bạn trích. Mỗi mô-đun bạn thích có thể được lưu vào một thư viện cục bộ sống trong trình duyệt của bạn (qua localStorage), và bạn có thể xuất cả thư viện ra một tệp JSON để sao lưu hoặc chuyển sang máy khác. Không gì được tải lên và không có tài khoản — thư viện là của bạn, trên thiết bị của bạn.
Qua vài tuần bạn xây được một bộ đồ nghề cá nhân: vài thẻ tiêu đề, một tiêu đề mục bạn tin dùng, một thẻ chân trang, một hai đường phân cách. Khi đến lúc bố cục một bài viết mới, bạn rút từ bộ của riêng mình thay vì lục qua bài của người khác lần nữa. Để đưa một khối được tạo kiểu vào trình chỉnh sửa, bạn sao chép nó dưới dạng HTML nội tuyến và dán vào — khối giữ định dạng của nó vì việc tạo kiểu đi cùng mã đánh dấu.
Bắt đầu với một khối bạn luôn thích, trích nó sạch sẽ, đổi màu nó theo thương hiệu của bạn, và lưu nó. Đó là cả vòng lặp, và nó tích lũy dần.