İyi tasarlanmış bir WeChat makalesini açın ve onu profesyonel gösteren kısımların kelimeler olmadığını fark edeceksiniz — stillendirilmiş bloklardır. Üstteki degrade başlık kartı, renkli bir çubuklu küçük bölüm başlıkları, sondaki "bizi takip edin" kartı, yuvarlatılmış köşeli alıntı kutuları. Bunların çoğu SVG olarak yapılır ve SVG, hangi telefon işlerse işlesin tam şekillerini ve renklerini korumalarını sağlayan şeydir.
İşte sinir bozucu kısım: beğendiğiniz birini bulup yeniden kullanmaya çalıştığınızda, onu kopyalamak genellikle bozar. WeChat düzenleyicisine yapıştırırsınız ve düzen çöker, renkler düzleşir ya da bloğun yarısı kaybolur. Bu rehber, bunun neden olduğunu ve o blokları sağlam kalacak şekilde nasıl çıkaracağınızı açıklar.
WeChat düzen için neden SVG'ye yaslanır
WeChat'in düzenleyicisi CSS'in çoğunu çıkarır. Bir stil sayfası ekleyemezsiniz ve çok sayıda satır içi stil filtrelenir. Dolayısıyla tasarımcılar bir çözüm buldu: dekoratif parçaları, şeklin, degradenin ve metin konumlandırmanın hepsinin SVG işaretlemesinin içinde yaşadığı SVG olarak yapmak. WeChat o işaretlemeyi çoğunlukla olduğu gibi bırakır, böylece blok her yerde aynı işlenir.
Bu aynı zamanda bu blokların prensipte neden bu kadar yeniden kullanılabilir olduğudur. Bir SVG başlık kartı kendi kendine yeterlidir. Harici bir dosyaya ya da sayfada başka bir yerde tanımlanmış bir sınıfa bağlı değildir. Teoride onu çıkarıp kendi makalenize bırakabilirsiniz. Sorun yalnızca çıkarmadadır.
Naif kopyalama bloğu neden bozar
İşlenmiş bir sayfada stillendirilmiş bir bloğu seçip kopyaladığınızda, genellikle orijinal kaynağı değil tarayıcının işlenmiş versiyonunu alıyorsunuz. Üç şey ters gider:
- Sarmalayan işaretleme kaybolur. Blok çoğu zaman konumlandırma taşıyan iç içe geçmiş kapların içinde oturur. Yalnızca görünür kısmı alın, kutusunu kaybetsin.
- Kodlanmış parçalar bozulur. SVG sık sık arka plan görsellerini ya da yazı tiplerini kodlanmış veri olarak tutar. Yanlış yoldan bir kopyala-yapıştır o dizeyi bozabilir.
- Onu temizce yeniden renklendiremezsiniz. Hayatta kalsa bile, renkler işaretlemenin bir düzine yerine işlenmiştir. Temayı elle değiştirmek, ham kodun içinde avlanmak demektir.
Bu blokları güvenilir şekilde yeniden kullanmak için bir ekran görüntüsü istemezsiniz ve tarayıcının pano tahminini istemezsiniz. Bağımsız bir birim olarak çıkarılmış gerçek blok işaretlemesini istersiniz.
Blokları güvenilir yolla çıkarma
Temiz yaklaşım, ekranda bir bloğu elle seçmeye çalışmak yerine tüm makalenin kaynak içeriğini kopyalamak ve bir aracın onu ayrıştırmasına izin vermektir. IMG.DIY'nin Düzen Modülü Çıkarıcı aracı tam da bunu yapar: içeriği yapıştırırsınız, işaretlemeyi tarayıcının kendi DOM ayrıştırıcısıyla okur ve yeniden kullanılabilir stillendirilmiş blokları — SVG tipografi kartları, başlıklı başlıklar, takip-et kartları, stillendirilmiş alıntılar, ayırıcılar — her birini bağımsız bir modül olarak izole eder.
Açıkça belirtilen önemli bir uyarı: araç bir makaleyi URL'siyle getiremez. Tarayıcılar mp.weixin.qq.com'un siteler arası getirmelerini engeller, dolayısıyla hiçbir tarayıcı içi araç bir WeChat sayfasını bağlantıyla çekemez. İçeriği kopyalayıp yapıştırırsınız. Bu, etrafından dolaşılacak bir sınırlamadan çok, web'in güvenlik modelinin işleyiş şeklidir.
Her blok izole edildiğinden ve kendi Shadow DOM sanal alanında önizlendiğinden, bir modülün stilleri diğerine sızamaz. Önizlemede gördüğünüz, o bloğun gerçekte ne olduğudur.
Koda dokunmadan yeniden renklendirme
Bir blok çıkarıldığında, daha önce bahsettiğim renk sorunu sizin için çözülür. Bir modüldeki herhangi bir renge tıklayın ve değiştirin — ve aynı renk, o blokta göründüğü her yerde güncellenir. Böylece mavi bir başlık kartı, SVG'ye gömülü altı onaltılık değeri düzenlemeniz yerine tek hamlede markanızın yeşili olur. Bir modülün içindeki yer tutucu görselleri de kendinizinkilerle değiştirebilirsiniz.
"Yeniden kullanım"ın teorik olmaktan çıktığı yer burasıdır. Başkasının makalesinden beğendiğiniz bir blok, sizin paletinizde, sizin renklerinizde, bir sonraki parçanıza bırakılmaya hazır bir blok olur.
Kendi modül kitaplığınızı kurma
Asıl ödül, bunu birkaç kez yapmak ve çıkardıklarınızı saklamaktır. Beğendiğiniz her modül, tarayıcınızda yaşayan yerel bir kitaplığa (localStorage aracılığıyla) kaydedilebilir ve tüm kitaplığı yedeklemek ya da başka bir makineye taşımak için bir JSON dosyasına dışa aktarabilirsiniz. Hiçbir şey yüklenmez ve hesap yok — kitaplık sizindir, cihazınızda.
Birkaç hafta içinde kişisel bir takım kurarsınız: birkaç başlık kartı, güvendiğiniz bir bölüm başlığı, bir alt bilgi kartı, bir iki ayırıcı. Yeni bir makale düzenleme zamanı geldiğinde, başkalarının gönderilerinde tekrar avlanmak yerine kendi setinizden çekersiniz. Stillendirilmiş bir bloğu düzenleyiciye almak için, onu satır içi HTML olarak kopyalayıp yapıştırırsınız — blok biçimlendirmesini korur çünkü stil işaretlemeyle birlikte seyahat eder.
Her zaman beğendiğiniz bir blokla başlayın, onu temizce çıkarın, markanıza yeniden renklendirin ve kaydedin. Bütün döngü budur ve katlanarak büyür.