ถ้าคุณดูแล WeChat Official Account (หรือสิ่งพิมพ์เนื้อหาเข้มใด ๆ) คุณคงเคยเห็นเลย์เอาต์ที่อยากนำกลับมาใช้ — การ์ดส่วนหัวเรื่อง บล็อกกดติดตาม คำพูดจัดสไตล์ เส้นคั่น การคัดลอกด้วยมือหมายถึงต้องขุด HTML ที่ซ้อนกัน และแก้ผิดจุดเดียวก็พัง SVG ทั้งอัน เครื่องมือนี้ทำส่วนที่น่าเบื่อให้คุณ: วางบทความ แล้วมันจะดึงบล็อกจัดสไตล์แต่ละอันออกมาเป็นโมดูลอิสระที่นำกลับมาใช้ได้
จากตรงนั้นคุณสลับภาพในบล็อกได้ (อัปโหลดใหม่หรือวาง URL) เปลี่ยนสีโดยคลิกสีใด ๆ ที่มันใช้ คัดลอกบล็อกเป็น HTML แบบอินไลน์พร้อมวางลงในเอดิเตอร์ WeChat, CMS หรือกล่องเนื้อหาเข้มใด ๆ — และบันทึกอันที่ชอบลงคลังในเครื่องที่อยู่ในเบราว์เซอร์นี้ ไม่มีการอัปโหลด วัสดุของคุณเป็นของคุณ
เพราะทุกอย่างทำงานฝั่งไคลเอนต์ด้วย Clipboard และ localStorage API จึงไม่มีบัญชี ไม่มีคลาวด์ และไม่มีแบ็กเอนด์ — แนวคิด local-first เดียวกันกับส่วนที่เหลือของ tools.faxianai.com
วิธีใช้งาน
- วางบทความคัดลอกบทความ WeChat (หรือคอนเทนต์เนื้อหาเข้มใด ๆ) แล้ววางลงในกล่อง หรือวางซอร์ส HTML ดิบก็ได้
- ดึงโมดูลคลิกดึง — บล็อกจัดสไตล์แต่ละอันปรากฏเป็นการ์ดตัวอย่างของตัวเอง แยกอิสระเพื่อไม่ให้สไตล์ของหน้ามารบกวน
- แก้ไขและนำกลับมาใช้สลับภาพ เปลี่ยนสี แล้วคัดลอก HTML เพื่อวางที่อื่น หรือบันทึกลงคลังในเครื่องไว้ใช้คราวหน้า
ทำไมถึงควรดึงโมดูลเลย์เอาต์มาใช้ แทนที่จะสร้างใหม่
บล็อกสวย ๆ ในบทความ WeChat — การ์ดหัวข้อ ปุ่มชวนกดติดตาม กล่องคำพูดตกแต่ง เส้นคั่น SVG — เกือบทั้งหมดคือ HTML และ SVG แบบ inline ที่ประกอบขึ้นด้วยมือ การสร้างใหม่ตั้งแต่ศูนย์หมายถึงต้องจับคู่ padding สี gradient และ span ที่ซ้อนกันให้เป๊ะทุกจุด และแก้ผิดเพียงจุดเดียว SVG ก็พังทั้งอัน การดึงบล็อกสำเร็จออกมาแทนจะรักษาทุกรายละเอียดไว้ครบ และเปลี่ยนให้เป็นสิ่งที่นำกลับมาใช้ซ้ำได้ในไม่กี่วินาที
เครื่องมือนี้แยกวิเคราะห์บทความที่คุณวางลงไป แล้วยกแต่ละบล็อกที่ตกแต่งไว้ออกมาเป็นโมดูลอิสระ คุณไม่ได้ scrape ทั้งหน้ามาเป็นก้อนเดียว แต่ได้รายการชิ้นส่วนแยกที่นำไปใช้ซ้ำได้อย่างเป็นระเบียบ — สิ่งที่คุณต้องการเป๊ะ ๆ ตอนเห็นเลย์เอาต์สวย ๆ ในโพสต์ของคนอื่น
Local-first เพื่อให้ทรัพยากรเป็นของคุณจริง ๆ
โปรแกรมแก้ไขบนคลาวด์เก็บบล็อกที่คุณบันทึกไว้บนเซิร์ฟเวอร์ของเขา หลังบัญชีของเขา แต่ที่นี่คลังของคุณอยู่ในเบราว์เซอร์ของคุณเองผ่าน localStorage และส่งออกเป็นไฟล์ JSON เพื่อสำรองหรือย้ายระหว่างเครื่องได้ ไม่มีอะไรถูกอัปโหลด ไม่ต้องสมัครสมาชิก และการแยกวิเคราะห์ สลับรูป และเปลี่ยนสีทั้งหมดทำงานบนอุปกรณ์ของคุณด้วย DOM และ Clipboard API ของเบราว์เซอร์เอง
ผลลัพธ์ที่จับต้องได้คือคลังโมดูลส่วนตัวที่พกพาได้ ซึ่งเติบโตไปพร้อมกับงานของคุณ: วางบทความ เก็บบล็อกสองสามอันที่ควรค่าแก่การใช้ซ้ำ แล้วครั้งหน้าก็ลากออกมาเป็น inline HTML ได้ทันที
ผู้คนใช้ทำอะไรบ้าง
ใช้เลย์เอาต์ที่ถูกใจซ้ำ — เจอการ์ดหัวข้อหรือเส้นคั่นสวย ๆ ในบทความคนอื่น — ดึงออกมา เปลี่ยนสีให้เข้าแบรนด์ แล้วคัดลอกลงร่างบทความของคุณ
สร้างชุดสไตล์ประจำสำนัก — รวบรวมหัวข้อประจำคอลัมน์ สไตล์คำพูด และการ์ดชวนติดตามที่ใช้ทุกฉบับ ไว้ในคลังโลคัลเดียว
สลับรูปในบล็อกเทมเพลต — เก็บเลย์เอาต์การ์ดรูปภาพที่ชอบไว้ แล้วแค่เปลี่ยนรูปเป็นรูปที่อัปโหลดเองในแต่ละครั้ง
เปลี่ยนสีให้เข้าแบรนด์ — เปลี่ยนสีหลักของบล็อกทั้งหมดในคราวเดียว แทนที่จะไล่หาใน inline style ทีละจุด
ย้ายบล็อกระหว่างโปรแกรมแก้ไข — คัดลอก inline HTML ที่วางแล้วสไตล์ยังครบ ลงในโปรแกรมแก้ไข WeChat, CMS หรือกล่อง rich-text ใดก็ได้
เก็บคลังส่วนตัวที่พกพาได้ — ส่งออกคลังเป็น JSON เพื่อสำรองหรือย้ายไปเบราว์เซอร์อื่น — ไม่ต้องมีบัญชี ไม่ต้องพึ่งคลาวด์
บล็อกเลย์เอาต์ดี ๆ ถูกขังอยู่ในบทความของคนอื่น
ใครก็ตามที่ดูแลบัญชีทางการ WeChat ล้วนสะสมบล็อกเลย์เอาต์ด้วยวิธีที่ช้า คุณอ่านบทความที่มีการ์ดหัวเรื่อง SVG สวยงาม แผง "ติดตามเรา" ที่เป็นระเบียบ หัวข้อเซกชันที่มีแท็บสีอยู่ด้านข้าง แล้วคุณคิดว่า ฉันอยากได้โครงสร้างนั้น คุณจึงคัดลอกทั้งบทความลงในตัวแก้ไขของคุณ แล้วใช้เวลายี่สิบนาทีลบทุกอย่างยกเว้นบล็อกเดียวที่คุณอยากได้ ภาวนาว่าจะไม่บังเอิญตัด <span> หลงเหลือที่ทำให้ SVG ยุบ การจัดตัวอักษร SVG ของ WeChat เปราะบางฉาวโฉ่ แอตทริบิวต์ผิดที่เดียว ภาพที่คุณปรับขนาดผิดจุดเดียว การ์ดก็เรนเดอร์เป็นกล่องพังบนมือถือของผู้อ่านครึ่งหนึ่ง บล็อกที่คุณอยากได้มีจริง ใช้ซ้ำได้ และนั่งอยู่ตรงนั้นใน HTML แต่ไม่มีวิธีสะอาด ๆ ที่จะยกออกมาหนึ่งอันแล้วเก็บไว้
ความเจ็บปวดอีกครึ่งคือความเป็นเจ้าของ คำตอบที่เห็นชัดคือตัวแก้ไขเทมเพลตอย่าง 秀米 หรือ 135编辑器 คลังมหาศาล ลากวาง ทรงพลังจริง แต่แอสเซตอยู่ในคลาวด์ของเขา หลังบัญชี และมักหลังระดับสมาชิก ชุดสไตล์ที่คุณประกอบมาอย่างพิถีพิถันไม่ใช่โฟลเดอร์ที่คุณเป็นเจ้าของ มันคือล็อกอินที่คุณเช่า หากคุณอยากส่งบล็อกให้เพื่อนร่วมทีม ปรับสีข้ามการ์ดทุกใบพร้อมกัน หรือแค่เก็บคลังส่วนตัวของห้าหัวเรื่องที่คุณใช้ซ้ำจริง คุณกำลังทำงานอยู่ในผลิตภัณฑ์ของคนอื่นบนเงื่อนไขของคนอื่น
เครื่องมือนี้ใช้แนวทางตรงข้าม คุณวางบทความ (หรือเนื้อหารูปแบบใด ๆ หรือ HTML ดิบ) แล้วมันแยกวิเคราะห์มาร์กอัปในเบราว์เซอร์ของคุณ ดึงบล็อกที่มีสไตล์ซึ่งใช้ซ้ำได้แต่ละอันออกมา ทั้งการ์ดตัวอักษร SVG หัวข้อเซกชันที่มีชื่อ การ์ดติดตามเรา คำอ้างอิงที่จัดสไตล์ เส้นคั่น เป็นโมดูลอิสระของตัวเอง จากตรงนั้นคุณแก้ไขแต่ละอันได้โดยตรง คือสลับภาพในการ์ด เปลี่ยนสี คัดลอกเป็น HTML แบบ inline สะอาดพร้อมวางลงตัวแก้ไข WeChat หรือช่องข้อความรูปแบบใด ๆ และบันทึกลงคลังในเครื่องที่คุณ export เป็น JSON ได้ ไม่มีการอัปโหลด ไม่มีบัญชี และเมื่อหน้าเว็บโหลดแล้ว มันทำงานต่อได้ออฟไลน์ มีข้อจำกัดตรงไปตรงมาหนึ่งข้อ คือมันดึงบทความจาก URL ไม่ได้ เบราว์เซอร์บล็อกคำขอข้ามไซต์ไปยัง mp.weixin.qq.com อินพุตจึงเป็นคัดลอกวางเสมอ
สิ่งที่ทำให้แตกต่าง
- ในเครื่องเป็นหลัก ไม่มีการอัปโหลด การแยกวิเคราะห์เกิดขึ้นในเบราว์เซอร์ด้วย
DOMParserบทความที่คุณวางไม่เคยออกจากเครื่อง ไม่มีเซิร์ฟเวอร์ ไม่มีบัญชี ไม่มีแบ็กเอนด์ - แยกออกทีละโมดูล บล็อกที่มีสไตล์แต่ละอันออกมาเป็นโมดูลแยกที่สมบูรณ์ในตัว แทนที่จะเป็นกำแพงมาร์กอัปพันกันที่คุณต้องตัดแต่งด้วยมือ
- สลับภาพในที่ แทนที่ภาพในการ์ดด้วยการอัปโหลดภาพใหม่หรือวาง URL ภาพ โดยไม่แตะโครงสร้าง SVG โดยรอบที่ทำให้มันเปราะ
- เปลี่ยนสีทั่วทั้งบล็อกพร้อมกัน คลิกสีไหนก็ได้ที่โมดูลใช้และเปลี่ยนมันทั่วทั้งบล็อกในครั้งเดียว การ์ดจึงตรงกับแบรนด์ของคุณโดยไม่ต้องล่าหารหัส hex
- คัดลอก HTML แบบ inline สะอาด คลิกเดียวใส่โมดูลลงคลิปบอร์ดของคุณเป็น HTML แบบ inline (ผ่าน Clipboard API) พร้อมวางลงตัวแก้ไข WeChat, CMS หรือช่องข้อความรูปแบบใด ๆ ได้เลย
- คลังที่คุณเป็นเจ้าของ บันทึกโมดูลลง local storage และ export หรือ import ทั้งคอลเลกชันเป็น JSON เป็นชุดแอสเซตที่พกพาได้จริง ไม่ใช่ล็อกอินที่คุณเช่า
- พรีวิวที่แยกจากกัน แต่ละโมดูลเรนเดอร์ภายใน Shadow DOM สไตล์ของบล็อกหนึ่งจึงไม่รั่วไปยังอีกบล็อก และพรีวิวแสดงให้คุณเห็นเป๊ะว่าจะวางอะไร
- ทำงานออฟไลน์เมื่อโหลดแล้ว หลังหน้าเว็บโหลด ไม่ต้องมีการเชื่อมต่อเพื่อแยก แก้ไข หรือคัดลอก
tools.faxianai.com เทียบกับเครื่องมือเลย์เอาต์อื่น ๆ
| tools.faxianai.com ตัวแยกโมดูล | 秀米 (xiumi.us) | 135编辑器 | i排版 | คัดลอก HTML ด้วยมือ | |
|---|---|---|---|---|---|
| จุดประสงค์หลัก | แยกและเป็นเจ้าของบล็อกที่ใช้ซ้ำได้ | ตัวแก้ไขเทมเพลตเต็ม | ตัวแก้ไขเทมเพลตเต็ม | ตัวแก้ไขเทมเพลตเต็ม | — |
| คลังเทมเพลต | ไม่มี (คุณสร้างจากที่วาง) | มหาศาล | มหาศาล | ใหญ่ | ไม่มี |
| ต้องมีบัญชี | ไม่ต้อง | ต้อง | ต้อง | ต้อง | ไม่ต้อง |
| อัปโหลดอะไรไหม | ไม่ | ใช่ (คลาวด์) | ใช่ (คลาวด์) | ใช่ (คลาวด์) | ไม่ |
| เป็นเจ้าของแอสเซต | ใช่ (JSON ในเครื่อง) | เช่า / คลาวด์ | เช่า / คลาวด์ | เช่า / คลาวด์ | ใช่ แต่ทำเอง |
| สลับภาพต่อบล็อก | ได้ | ได้ (ในตัวแก้ไข) | ได้ (ในตัวแก้ไข) | ได้ (ในตัวแก้ไข) | ทำเอง |
| เปลี่ยนสีทั้งบล็อก | ได้ คลิกเดียว | ได้ (ในตัวแก้ไข) | ได้ (ในตัวแก้ไข) | ได้ (ในตัวแก้ไข) | ทำเอง |
| ทำงานออฟไลน์ | ได้ เมื่อโหลดแล้ว | ไม่ได้ | ไม่ได้ | ไม่ได้ | ได้ |
| ราคา | ฟรี | ฟรีจำกัด + จ่ายเงิน | ฟรีจำกัด + จ่ายเงิน | ฟรีจำกัด + จ่ายเงิน | ฟรี |
พูดตรง ๆ นี่ไม่ใช่ตัวแทนของตัวแก้ไขเทมเพลต และมันไม่ได้แสร้งเป็น 秀米, 135编辑器 และ i排版 เป็นผลิตภัณฑ์ที่เติบโตเต็มที่ด้วยคลังเทมเพลตมหาศาล เลย์เอาต์ลากวางแบบสด และการขัดเกลามาหลายปี หากคุณกำลังสร้างบทความรูปแบบสมบูรณ์จากศูนย์ นั่นคือที่ที่คุณไป และมันสมกับชื่อเสียง สิ่งที่มันไม่ให้คุณคือโฟลเดอร์ส่วนตัวที่พกพาได้ของบล็อกเฉพาะที่คุณใช้ซ้ำ แก้ไขได้โดยไม่ต้องล็อกอินและปลอดจากการที่อะไรออกจากเครื่อง เครื่องมือนี้เป็นตัวแยกและจัดระเบียบ ไม่ใช่ตัวแก้ไข มันเปลี่ยนบล็อกที่คุณชื่นชมในโลกกว้างให้เป็นโมดูลที่คุณเป็นเจ้าของ เปลี่ยนสี เปลี่ยนภาพ และวางที่ไหนก็ได้ ใช้ตัวแก้ไขใหญ่ ๆ เพื่อประกอบ ใช้ตัวนี้เพื่อเก็บชิ้นส่วน
ทำไมต้อง tools.faxianai.com
ดึงบล็อก
ดึงการ์ด SVG หัวเรื่อง คำพูดและเส้นคั่นออกมาเป็นโมดูลอิสระ
สลับภาพแบบอินไลน์
แทนที่ภาพใด ๆ ในบล็อกด้วยของคุณเอง — อัปโหลดหรือ URL
เปลี่ยนสีคลิกเดียว
คลิกสีใด ๆ ที่บล็อกใช้แล้วเปลี่ยนมันทั้งหมดพร้อมกัน
คัดลอก HTML อินไลน์
วางลงในเอดิเตอร์ WeChat, CMS หรือกล่องเนื้อหาเข้มใด ๆ ได้เลย
คลังในเครื่อง
บันทึกโมดูลลงเบราว์เซอร์นี้แล้วส่งออก/นำเข้าเป็น JSON
ไม่มีการอัปโหลด
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — วัสดุของคุณไม่ออกจากอุปกรณ์