Buka artikel WeChat yang direka baik dan anda akan perasan bahagian yang membuatkannya nampak profesional bukanlah perkataan — ia blok bergaya. Kad tajuk berkecerunan di atas, pengepala seksyen kecil dengan bar berwarna, kad "ikuti kami" di akhir, kotak petikan dengan bucu bulat. Banyak daripadanya dibina sebagai SVG, dan SVG yang membolehkannya mengekalkan bentuk dan warna tepatnya tak kira telefon apa yang menterjemahnya.
Inilah bahagian yang mengecewakan: bila anda jumpa satu yang anda suka dan cuba guna semula, menyalinnya biasanya merosakkannya. Anda tampal ke dalam penyunting WeChat dan susun atur runtuh, warna menjadi rata, atau separuh blok hilang. Panduan ini menjelaskan kenapa itu berlaku dan cara mengekstrak blok itu supaya ia kekal utuh.
Kenapa WeChat bergantung pada SVG untuk susun atur
Penyunting WeChat membuang kebanyakan CSS. Anda tak boleh melampirkan helaian gaya, dan banyak gaya sebaris ditapis. Jadi pereka menemui penyelesaian sampingan: bina kepingan hiasan sebagai SVG, di mana bentuk, kecerunan, dan kedudukan teks semuanya tinggal di dalam penanda SVG. WeChat membiarkan penanda itu kebanyakannya sendirian, jadi blok menterjemah sama di mana-mana.
Itu juga sebab blok ini begitu boleh diguna semula secara prinsip. Kad tajuk SVG adalah lengkap sendiri. Ia tak bergantung pada fail luar atau kelas yang ditakrif di tempat lain pada halaman. Secara teori anda boleh mengangkatnya keluar dan menjatuhkannya ke dalam artikel anda sendiri. Masalahnya hanya dalam mengangkat.
Kenapa menyalin secara naif merosakkan blok
Bila anda memilih blok bergaya pada halaman yang diterjemah dan menyalinnya, anda biasanya mengambil versi terjemah pelayar, bukan sumber asal. Tiga perkara jadi salah:
- Penanda pembalut hilang. Blok selalunya duduk di dalam bekas bersarang yang membawa kedudukan. Ambil hanya bahagian yang kelihatan dan ia kehilangan kotaknya.
- Kepingan berkod tercarik. SVG kerap memegang imej latar atau fon sebagai data berkod. Salin-tampal melalui laluan yang salah boleh merosakkan rentetan itu.
- Anda tak boleh mewarnakannya semula dengan bersih. Walaupun kalau ia bertahan, warna dibakar ke dalam sedozen tempat dalam penanda. Menukar tema dengan tangan bermakna memburu melalui kod mentah.
Untuk mengguna semula blok ini dengan boleh dipercayai anda tak mahu tangkapan skrin dan anda tak mahu tekaan papan keratan pelayar. Anda mahu penanda blok sebenar, ditarik keluar sebagai unit berdiri sendiri.
Mengekstrak blok dengan cara yang boleh dipercayai
Pendekatan bersih ialah menyalin keseluruhan kandungan sumber artikel dan membiarkan alat menghuraikannya, bukan cuba memilih satu blok dengan tangan di skrin. Pengekstrak Modul Susun Atur IMG.DIY membuat tepat ini: anda tampal kandungan, ia membaca penanda dengan penghurai DOM pelayar sendiri, dan ia mengasingkan blok bergaya yang boleh diguna semula — kad tipografi SVG, pengepala bertajuk, kad ikuti-kami, petikan bergaya, pembahagi — setiap satu sebagai modul bebas.
Satu amaran penting, dinyatakan dengan jelas: alat tak boleh mengambil artikel mengikut URL-nya. Pelayar menyekat pengambilan silang-laman mp.weixin.qq.com, jadi tiada alat dalam-pelayar boleh menarik halaman WeChat melalui pautan. Anda salin kandungan dan tampalnya. Itu bukan had untuk diatasi melainkan cara model keselamatan web berfungsi.
Kerana setiap blok diasingkan dan dipratonton dalam kotak pasir Shadow DOM-nya sendiri, gaya satu modul tak boleh bocor ke yang lain. Apa yang anda nampak dalam pratonton ialah apa yang blok itu sebenarnya.
Mewarnakan semula tanpa menyentuh kod
Sebaik blok diekstrak, masalah warna yang saya sebut tadi diselesaikan untuk anda. Klik mana-mana warna dalam modul dan tukarnya — dan warna sama dikemas kini di mana sahaja ia muncul dalam blok itu. Jadi kad tajuk biru menjadi hijau jenama anda dalam satu langkah, bukannya anda menyunting enam nilai heks yang terkubur dalam SVG. Anda juga boleh menukar imej pemegang tempat di dalam modul dengan milik anda sendiri.
Inilah tempat "guna semula" berhenti menjadi teori. Blok yang anda suka daripada artikel orang lain menjadi blok dalam palet anda, dalam warna anda, sedia untuk dijatuhkan ke dalam karya seterusnya anda.
Membina pustaka modul anda sendiri
Pulangan sebenar ialah membuat ini beberapa kali dan menyimpan apa yang anda ekstrak. Setiap modul yang anda suka boleh disimpan ke pustaka setempat yang tinggal dalam pelayar anda (melalui localStorage), dan anda boleh mengeksport keseluruhan pustaka ke fail JSON untuk membuat sandaran atau memindahkannya ke mesin lain. Tiada apa-apa dimuat naik dan tiada akaun — pustaka milik anda, di peranti anda.
Selama beberapa minggu anda membina kit peribadi: sepasang kad tajuk, pengepala seksyen yang anda percaya, kad pengaki, satu dua pembahagi. Bila tiba masa untuk menyusun atur artikel baru, anda menarik daripada set anda sendiri bukannya memburu melalui catatan orang lain lagi. Untuk memasukkan blok bergaya ke dalam penyunting, anda menyalinnya sebagai HTML sebaris dan menampalnya — blok mengekalkan pemformatannya kerana penggayaan mengembara bersama penanda.
Mulakan dengan satu blok yang anda sentiasa suka, ekstraknya dengan bersih, warnakan semula kepada jenama anda, dan simpannya. Itulah keseluruhan gelung, dan ia berganda.