เปิดบทความ WeChat ที่ออกแบบดี ๆ แล้วคุณจะสังเกตว่าส่วนที่ทำให้มันดูเป็นมืออาชีพไม่ใช่คำ แต่คือบล็อกที่จัดสไตล์แล้ว การ์ดชื่อไล่เฉดที่ด้านบน หัวข้อส่วนเล็ก ๆ ที่มีแถบสี การ์ด "ติดตามเรา" ตอนท้าย กล่องคำพูดมุมมน หลายอันสร้างเป็น SVG และ SVG คือสิ่งที่ทำให้มันคงรูปทรงและสีเป๊ะไม่ว่าโทรศัพท์เครื่องไหนจะเรนเดอร์มัน
นี่คือส่วนที่น่าหงุดหงิด เมื่อคุณเจออันที่ชอบและพยายามนำกลับมาใช้ซ้ำ การคัดลอกมันมักทำมันพัง คุณวางลงในตัวแก้ไข WeChat แล้วเลย์เอาต์ยุบ สีแบนลง หรือครึ่งบล็อกหายไป คู่มือนี้อธิบายว่าทำไมมันเกิดขึ้นและวิธีดึงบล็อกเหล่านั้นออกมาให้ยังครบ
ทำไม WeChat ถึงพึ่ง SVG สำหรับเลย์เอาต์
ตัวแก้ไขของ WeChat ลอก CSS ส่วนใหญ่ออก คุณแนบสไตล์ชีตไม่ได้ และสไตล์อินไลน์จำนวนมากถูกกรองออก นักออกแบบจึงหาทางเลี่ยง สร้างชิ้นส่วนตกแต่งเป็น SVG ที่ซึ่งรูปทรง การไล่เฉด และการวางตำแหน่งข้อความทั้งหมดอยู่ ภายใน มาร์กอัป SVG WeChat ปล่อยมาร์กอัปนั้นไว้เฉย ๆ เป็นส่วนใหญ่ บล็อกจึงเรนเดอร์เหมือนกันทุกที่
นั่นก็เป็นเหตุผลที่บล็อกเหล่านี้นำกลับมาใช้ซ้ำได้มากในหลักการ การ์ดชื่อ SVG อยู่ในตัวมันเอง มันไม่ขึ้นกับไฟล์ภายนอกหรือคลาสที่นิยามไว้ที่อื่นบนหน้า ในทางทฤษฎีคุณยกมันออกและวางลงในบทความของคุณเองได้ ปัญหาอยู่ที่การยกออกเท่านั้น
ทำไมการคัดลอกแบบไร้เดียงสาถึงทำบล็อกพัง
เมื่อคุณเลือกบล็อกที่จัดสไตล์บนหน้าที่เรนเดอร์แล้วและคัดลอกมัน คุณมักคว้าเวอร์ชัน ที่เรนเดอร์แล้ว ของเบราว์เซอร์ ไม่ใช่ต้นฉบับ สามสิ่งผิดพลาด
- มาร์กอัปห่อหุ้มหายไป บล็อกมักนั่งอยู่ในคอนเทนเนอร์ซ้อนที่พกการวางตำแหน่ง คว้าแค่ส่วนที่มองเห็นแล้วมันเสียกล่องของมัน
- ชิ้นส่วนที่เข้ารหัสถูกทำเสีย SVG มักถือภาพพื้นหลังหรือฟอนต์เป็นข้อมูลที่เข้ารหัส การคัดลอก-วางผ่านเส้นทางที่ผิดทำสตริงนั้นเสียหายได้
- คุณลงสีใหม่อย่างสะอาดไม่ได้ แม้มันรอด สีถูกอบไว้ในหลายจุดในมาร์กอัป การเปลี่ยนธีมด้วยมือหมายถึงการค้นหาผ่านโค้ดดิบ
เพื่อนำบล็อกเหล่านี้กลับมาใช้ซ้ำได้อย่างเชื่อถือได้ คุณไม่ต้องการภาพหน้าจอและไม่ต้องการการเดาคลิปบอร์ดของเบราว์เซอร์ คุณต้องการมาร์กอัปบล็อกจริง ดึงออกมาเป็นหน่วยเดี่ยว
ดึงบล็อกออกอย่างเชื่อถือได้
แนวทางที่สะอาดคือคัดลอกเนื้อหาต้นฉบับทั้งบทความและปล่อยให้เครื่องมือแยกวิเคราะห์ แทนที่จะพยายามเลือกบล็อกเดียวด้วยมือบนหน้าจอ เครื่องมือดึงโมดูลเลย์เอาต์ ของ IMG.DIY ทำอย่างนี้เป๊ะ คุณวางเนื้อหาเข้าไป มันอ่านมาร์กอัปด้วยตัวแยกวิเคราะห์ DOM ของเบราว์เซอร์เอง และแยกบล็อกที่จัดสไตล์ที่นำกลับมาใช้ซ้ำได้ การ์ดตัวอักษร SVG หัวข้อที่มีชื่อ การ์ดติดตามเรา คำพูดที่จัดสไตล์ เส้นคั่น แต่ละอันเป็นโมดูลอิสระ
ข้อควรระวังสำคัญหนึ่ง กล่าวตรง ๆ เครื่องมือดึงบทความจาก URL ไม่ได้ เบราว์เซอร์บล็อกการดึงข้ามไซต์ของ mp.weixin.qq.com ไม่มีเครื่องมือในเบราว์เซอร์ใดดึงหน้า WeChat ลงมาด้วยลิงก์ได้ คุณคัดลอกเนื้อหาและวางเข้าไป นั่นไม่ใช่ข้อจำกัดที่ต้องหาทางเลี่ยงมากเท่ากับเป็นวิธีที่แบบจำลองความปลอดภัยของเว็บทำงาน
เพราะแต่ละบล็อกถูกแยกและดูตัวอย่างในแซนด์บ็อกซ์ Shadow DOM ของตัวเอง สไตล์ของโมดูลหนึ่งจึงรั่วเข้าอีกอันไม่ได้ สิ่งที่คุณเห็นในตัวอย่างคือสิ่งที่บล็อกนั้นเป็นจริง ๆ
ลงสีใหม่โดยไม่แตะโค้ด
เมื่อบล็อกถูกดึงออกแล้ว ปัญหาเรื่องสีที่ผมกล่าวถึงก่อนหน้าถูกแก้ให้คุณ คลิกสีใด ๆ ในโมดูลและเปลี่ยนมัน แล้วสีเดียวกันอัปเดตทุกที่ที่มันปรากฏในบล็อกนั้น การ์ดชื่อสีน้ำเงินจึงกลายเป็นสีเขียวของแบรนด์คุณในการเคลื่อนไหวเดียว แทนที่คุณจะแก้ค่า hex หกค่าที่ฝังใน SVG คุณยังสลับภาพตัวอย่างในโมดูลเป็นของคุณเองได้ด้วย
นี่คือจุดที่ "การใช้ซ้ำ" เลิกเป็นทฤษฎี บล็อกที่คุณชอบจากบทความของคนอื่นกลายเป็นบล็อกในพาเลตต์ ของคุณ ในสี ของคุณ พร้อมวางลงในชิ้นงานถัดไป
สร้างคลังโมดูลของคุณเอง
ผลตอบแทนที่แท้จริงคือการทำแบบนี้สองสามครั้งและเก็บสิ่งที่คุณดึงออกมา แต่ละโมดูลที่คุณชอบบันทึกลงคลังในเครื่องที่อยู่ในเบราว์เซอร์ของคุณได้ (ผ่าน localStorage) และคุณส่งออกทั้งคลังเป็นไฟล์ JSON เพื่อสำรองหรือย้ายไปเครื่องอื่นได้ ไม่มีอะไรถูกอัปโหลดและไม่มีบัญชี คลังเป็นของคุณ บนอุปกรณ์ของคุณ
ในไม่กี่สัปดาห์คุณสร้างชุดส่วนตัว การ์ดชื่อสองสามอัน หัวข้อส่วนที่คุณไว้ใจ การ์ดท้าย เส้นคั่นหนึ่งสองอัน เมื่อถึงเวลาจัดหน้าบทความใหม่ คุณดึงจากชุดของคุณเองแทนที่จะค้นหาผ่านโพสต์ของคนอื่นอีก เพื่อใส่บล็อกที่จัดสไตล์ลงในตัวแก้ไข คุณคัดลอกมันเป็น HTML อินไลน์และวางเข้าไป บล็อกคงการจัดรูปแบบเพราะการจัดสไตล์เดินทางไปกับมาร์กอัป
เริ่มด้วยบล็อกหนึ่งที่คุณชอบมาตลอด ดึงมันออกอย่างสะอาด ลงสีใหม่ให้เป็นแบรนด์ของคุณ แล้วบันทึกมัน นั่นคือทั้งวงจร และมันทบต้น