ฉันสร้างเครื่องมือจัดรูปแบบบทความสำหรับ WeChat Official Account: คัดลอกและวางจาก Markdown ได้ในคลิกเดียว

214K
411
90
66
804

TL;DR

Punk Weipai คือเครื่องมือจัดรูปแบบเฉพาะสำหรับผู้สร้างคอนเทนต์บน WeChat Official Account ที่ช่วยแปลง Markdown/TXT ให้เป็น Rich Text พร้อมการปรับแต่งแบรนด์ IP และรองรับการแก้ไขบนมือถือ

เมื่อเร็วๆ นี้ ตอนที่กำลังนำโพสต์ X ยาวๆ ไปลงใน Official Account ของฉัน ฉันหาตัวจัดรูปแบบที่ถูกใจไม่ได้เลย พอดีเพิ่งสร้าง Skills เกี่ยวกับ IP ไปหลายอัน เลยคิดว่า: ทำไมไม่สร้างตัวจัดรูปแบบให้ตัวเองสักตัว ที่ให้ความรู้สึกเป็น IP โดยเฉพาะล่ะ?

ตอนแรกแค่อยากแก้ปัญหาการจัดรูปแบบของตัวเอง แต่พอลงมือทำจริงๆ ก็มีไอเดียเพิ่มขึ้นเรื่อยๆ: จะให้โทนสีตาม IP ได้ไหม? จะใส่ตัวละครลงในบทความได้ไหม? จะจัดการ Markdown, TXT, บล็อกโค้ด และตารางได้ในคราวเดียวเลยไหม? แล้วใช้บนมือถือได้โดยตรงเลยหรือเปล่า?

พอมาถึงขนาดนี้แล้ว ก็ไม่ควรเก็บไว้คนเดียว ควรให้ทุกคนมีอีกทางเลือกสำหรับการจัดรูปแบบ Official Account ดังนั้น Punk Weipai จึงถือกำเนิดขึ้น

เอฟเฟกต์ที่ฉันต้องการคือตรงไปตรงมา: วาง Markdown ต้นฉบับที่ค่อนข้างรกทางด้านซ้าย กดปุ่มเดียว ทางด้านขวาก็จะได้บทความ WeChat ที่มีหัวข้อ คำพูด บล็อกโค้ด และจังหวะของภาพที่เป็นระเบียบเรียบร้อย

Adrian Punk - inline image

เว็บไซต์พร้อมใช้งานได้ทันที:

https://weipai.iamadrianpunk.com

เมื่อเปิดเว็บไซต์ครั้งแรก คุณจะเห็น "จดหมาย" ที่ Punk ส่งมา บทช่วยสอนสำหรับมือใหม่จะแนะนำโทนสี การนำเข้าต้นฉบับ การคัดลอกตัวอย่าง และตอนจบที่กำหนดไว้ตามลำดับ; ถ้าคุณคุ้นเคยกับกระบวนการนี้แล้ว ก็ข้ามไปได้เลย

Adrian Punk - inline image
Adrian Punk - inline image

1. มันแก้ปัญหาที่น่ารำคาญที่สุดก่อน

ขั้นตอนการทำงานของ Punk Weipai ตรงไปตรงมามาก: วางต้นฉบับ Markdown หรือ TXT ทางซ้าย แล้วการจัดรูปแบบ WeChat จะถูกสร้างขึ้นแบบเรียลไทม์ทางด้านขวา เมื่อยืนยันเอฟเฟกต์แล้ว คลิก "คัดลอกไปยัง Official Account" แล้ววางลงในโปรแกรมแก้ไขเว็บของ WeChat Official Account

เนื้อหาที่ฉันใช้เวลาจัดการ—ส่วนที่มักมีปัญหาในบทความยาวๆ—ได้แก่:

  • ชื่อบทความ หัวข้อบท และหัวข้อย่อย;
  • รายการแบบมีลำดับ รายการแบบไม่มีลำดับ และรายการซ้อนหลายระดับ;
  • คำพูด ตัวแบ่ง ข้อความตัวหนา และโค้ดแบบอินไลน์;
  • รูปภาพในเครื่อง ตาราง และบล็อกโค้ดที่ต่อเนื่องกันหลายอัน;
  • ระยะห่างระหว่างย่อหน้า ระยะห่างระหว่างบรรทัด และแบบอักษรที่เหมาะกับการอ่านบน Official Account

ถ้าต้นฉบับมีระดับหัวข้อที่ชัดเจน มันจะตัดสินบทตามขนาดหัวข้อ Markdown หัวข้อย่อยที่มีตัวเลขจะคงตัวเลขไว้ ส่วนที่ไม่มีจะใช้เส้นแนวตั้งหนา; ประเด็นทั่วไปจะใช้จุดทึบที่เปลี่ยนไปตามสีธีม

บล็อกโค้ดจะคงแถบหน้าต่าง macOS ไว้ และตารางจะใช้ตารางสามเส้น

2. กระบวนการทั้งหมดใช้แค่สามขั้นตอน

1. ใส่ต้นฉบับ

คุณสามารถวาง Markdown โดยตรง หรือนำเข้าไฟล์ .md, .txt หรือแพ็กเกจบทความที่มีรูปภาพในเครื่องก็ได้ หน้าเว็บจะเปิดมาพร้อมกับตัวอย่างที่มีฟีเจอร์ครบถ้วน รวมถึงหัวข้อ คำพูด รายการ รูปภาพ ตาราง และบล็อกโค้ด เพื่อให้คุณเห็นว่าวากยสัมพันธ์แต่ละแบบมีลักษณะอย่างไรได้ในพริบตา

2. เลือกโทนสีและสไตล์บท

เครื่องมือมาพร้อมกับชุดสีที่ตั้งไว้ล่วงหน้า เช่น Punk Color, Retro Trend, Red-Blue CP และ Vitality Orange แต่ละชุดประกอบด้วยสีธีม สีเน้น และสีอ่อนเกือบขาว; พื้นหลังเนื้อหาเริ่มต้นเป็นสีขาว

คุณยังสามารถอัปโหลดรูปภาพ IP ของคุณเองได้ ระบบจะแยกสีที่เป็นตัวแทนจากรูปภาพและสร้างสามชุดสี: "ชื่อสี IP 1, 2 และ 3" เลือกชุดที่ใกล้เคียงกับสไตล์คุณมากที่สุด แล้วปรับแต่งต่อ

Color Lab ทำให้กระบวนการนี้มองเห็นได้: แยกสีที่เป็นตัวแทนจาก IP ขยายเป็นสามชุดสีที่แตกต่างกัน และสุดท้ายเหลือบทบาทสีสี่บทบาทที่สามารถใช้ได้จริงสำหรับการจัดรูปแบบ

Adrian Punk - inline image

หลังจากเลือกโทนสีแล้ว คุณสามารถปรับแต่งทีละส่วนต่อไปได้ แต่ละบล็อกสีสามารถเปิด "การเลือกฟังก์ชัน" เพื่อตัดสินใจว่าจะใช้สำหรับพื้นหลังเนื้อหา หัวข้อ การเน้นตัวหนา ตกแต่งหัวข้อ ตัวแบ่ง เครื่องหมายรายการ บล็อกโค้ด ตาราง ข้อความโค้ดแบบอินไลน์ พื้นหลังโค้ดแบบอินไลน์ หรือคำพูด; สีเดียวกันยังสามารถใช้ได้หลายวัตถุประสงค์ ตัวอย่างเช่น ฉันให้สีน้ำเงินจัดการหัวข้อและบล็อกโค้ด สีเหลืองจัดการตัวหนา รายการ และตัวแบ่ง และปล่อยให้สีอ่อนเกือบขาวสำหรับพื้นหลังคำพูดและโค้ดแบบอินไลน์

Adrian Punk - inline image

ถ้าคุณไม่มี IP คุณยังสามารถป้อน "สีที่กำหนดเอง" เพื่อแก้ไขรหัสสี HEX ชื่อชุดสี และการใช้งานสีได้ รายการนี้มีไว้สำหรับคนที่ยินดีปรับแต่งสีด้วยตัวเอง และไม่ได้บังคับให้ทุกคนอัปโหลดรูปประจำตัวก่อน

สไตล์บทสามารถสลับได้โดยตรง ปัจจุบันมี 9 ตัวเลือก: ขีดเส้นใต้หนา, ทับ, เส้นแนวตั้งซ้าย, กล่อง, วงเล็บเหลี่ยม, วงกลมคู่, เมทริกซ์จุด, ตัวเลขวางด้านบน และเครื่องหมายคำพูด เมนูจะแสดงเอฟเฟกต์จริงก่อน คุณจึงไม่ต้องเดาจากชื่อ หลังจากสลับแล้ว บทต่างๆ ของทั้งบทความจะอัปเดตพร้อมกัน ไม่ต้องกลับไปแก้ไข Markdown ทีละอัน

Adrian Punk - inline image

ถ้าเปิดใช้งาน "IP ประจำบท" ตัวละครจะยืนอยู่บนเส้นแนวนอนของหัวข้อสำหรับหัวข้อสั้น;

สำหรับหัวข้อที่ยาวกว่าซึ่งอาจขึ้นบรรทัดใหม่ IP จะย้ายไปตรงกลางเหนือหัวข้อโดยอัตโนมัติเพื่อไม่ให้เบียดเนื้อหา

โทนสี สไตล์บท และการแสดงผล IP เป็นอิสระต่อกัน สามารถผสมผสานได้อย่างอิสระตามเนื้อหาของคุณ

3. ดูตัวอย่าง แล้วคัดลอกไปยัง Official Account

พื้นที่เขียนและพื้นที่แสดงตัวอย่างอัปเดตพร้อมกัน เมื่อคุณต้องการโฟกัสที่การตรวจสอบบทความ คุณสามารถเปิด "โฟกัสตัวอย่าง" เพื่อให้เหลือเพียงร่าง WeChat สุดท้าย; ใช้ได้ทั้งบนคอมพิวเตอร์และมือถือ

Adrian Punk - inline image

4. การปรับให้เข้ากับมือถือ

มีการปรับให้เข้ากับมือถือโดยเฉพาะ ดังนั้นกระบวนการทั้งหมดไม่ต้องกลับไปใช้คอมพิวเตอร์:

  • เครื่องมือจัดรูปแบบถูกซ่อนไว้ในเมนูแฮมเบอร์เกอร์ที่มุมขวาบน เพื่อหลีกเลี่ยงการเลื่อนแนวนอนและการบดบังเนื้อหา;
  • ความกว้างของบทความ ระยะห่างภายใน และวิธีการแสดงตัวอย่างจะปรับตามหน้าจอมือถือโดยอัตโนมัติ
Adrian Punk - inline image

ดังนั้นคุณสามารถทำขั้นตอนการทำงานทั้งหมด "นำเข้าต้นฉบับ—ปรับสไตล์—ตรวจสอบตัวอย่าง—คัดลอกไปยัง Official Account" บนโทรศัพท์ได้ เมื่อคุณต้องการเปลี่ยนบทความชั่วคราว คุณไม่จำเป็นต้องเปิดคอมพิวเตอร์เพื่อจัดรูปแบบโดยเฉพาะ

Adrian Punk - inline image

สุดท้าย คลิก "คัดลอกไปยัง Official Account" เพื่อวาง Rich Text เต็มรูปแบบลงในโปรแกรมแก้ไขเว็บของ WeChat Official Account หัวข้อ คำพูด รายการ ตาราง และบล็อกโค้ดจะถูกนำมาทั้งหมด ไม่ต้องปรับทีละย่อหน้า

3. รายละเอียดเล็กๆ น้อยๆ ที่ฉันใช้ซ้ำแล้วซ้ำอีก

อย่างแรกคือ ตอนจบที่กำหนดไว้

เนื้อหาเช่น การแนะนำผู้เขียน การวางตำแหน่งบัญชี และข้อความแจ้งให้ติดตาม จำเป็นต้องเขียนทุกบทความและมักจะลืม ตอนนี้คุณสามารถบันทึกและเปิดใช้งานตอนจบที่กำหนดไว้ล่วงหน้าได้ ไม่ว่าข้อความนี้จะอยู่ในต้นฉบับหรือไม่ มันจะถูกต่อท้ายผลลัพธ์ที่จัดรูปแบบโดยอัตโนมัติ โดยคั่นด้วยตัวแบ่ง

Adrian Punk - inline image

ตอนจบที่กำหนดไว้จะสืบทอดแบบอักษรและโทนสีธีมของบทความปัจจุบัน เนื้อหาจะถูกบันทึกไว้ในเบราว์เซอร์ปัจจุบัน และต้องตั้งค่าใหม่หากเปลี่ยนอุปกรณ์

อย่างที่สองคือ การเปลี่ยนสีบางส่วน คุณสามารถเลือกสีอัตโนมัติ สีดำ สีขาว หรือสีที่กำหนดเองสำหรับข้อความเนื้อหา หรือเลือกข้อความบางส่วนในตัวอย่างเพื่อเปลี่ยนสีเฉพาะส่วนนั้น สะดวกมากสำหรับการเน้นคำสั่งในบทช่วยสอนหรือตัวเลขสำคัญในรีวิว

อย่างที่สามคือ IP ตามบท หลังจากอัปโหลดรูปภาพตัวละครแล้ว คุณสามารถตัดสินใจได้ว่าจะให้ปรากฏข้างหัวข้อแต่ละบทหรือไม่ โทนสีและการแสดงผล IP เป็นสวิตช์อิสระสองตัว: คุณสามารถใช้โทนสีของตัวเองโดยไม่ต้องแสดงตัวละคร หรือสลับไปใช้โทนสีที่แนะนำในขณะที่ยังคงตัวละครไว้

4. ใครจะพบว่าสิ่งนี้มีประโยชน์?

ถ้าบทความของคุณส่วนใหญ่เขียนใน Word และคุณไม่ค่อยใช้โค้ด ตาราง หรือ Markdown เครื่องมือนี้อาจไม่ใช่สิ่งจำเป็น

สถานการณ์ต่อไปนี้เหมาะสมกว่า:

  • แปลงโพสต์ X ยาวๆ โน้ต หรือ Markdown เป็นบทความ WeChat บ่อยครั้ง;
  • ใช้ AI เขียนร่างแรก แต่ไม่อยากจัดรูปแบบใหม่ในแบ็กเอนด์ WeChat;
  • เขียนบทช่วยสอนเครื่องมือ AI ที่มีบล็อกโค้ดและโค้ดแบบอินไลน์จำนวนมาก;
  • ดำเนินการบัญชีส่วนตัว สตูดิโอ หรือ IP ที่แตกต่างกันหลายอันพร้อมกัน;
  • ต้องการคงสไตล์ภาพที่สอดคล้องกันสำหรับ Official Account โดยไม่ต้องปรับรูปแบบตั้งแต่ต้นทุกครั้ง

Punk Weipai ปัจจุบันเน้นที่การจัดรูปแบบเท่านั้น มันจะไม่เขียนบทความใหม่ให้คุณ และไม่มีปกที่สร้างโดย AI ขอบเขตแคบ ดังนั้นเมื่อเปิดหน้าเว็บแล้ว ก็แค่ใส่ต้นฉบับ ปรับสไตล์ คัดลอกแล้วเผยแพร่

5. คุณสามารถลองใช้ขั้นตอนการทำงานขั้นต่ำนี้ก่อน

เมื่อใช้ครั้งแรก อย่ารีบศึกษาการตั้งค่าทั้งหมด ทำตามสามขั้นตอนนี้:

  1. เปิดเว็บไซต์และดูตัวอย่างทางด้านขวาของตัวอย่างเริ่มต้น;
  2. วาง Markdown ของคุณทางด้านซ้ายและเลือกโทนสีสำเร็จรูป;
  3. คลิก "คัดลอกไปยัง Official Account" และวางลงในกล่องร่างเพื่อตรวจสอบสักครั้ง

เมื่อเส้นทางนี้ชัดเจนแล้ว ก็อัปโหลด IP ของคุณ ปรับรหัสสี สลับสไตล์บท และบันทึกตอนจบที่กำหนดไว้

วลีที่ฉันตั้งไว้สำหรับเครื่องมือนี้คือ:

ให้เนื้อหาดีๆ ทุกชิ้นได้มีเลย์เอาต์ที่ดี

ถ้าคุณมักจะติดอยู่ที่ "บทความเสร็จแล้ว แต่การจัดรูปแบบ Official Account ยังไม่เสร็จ" คุณสามารถลองใช้ได้โดยตรง:

https://weipai.iamadrianpunk.com

เกี่ยวกับผู้เขียน

Punk|ปริญญาโทสาขาการจัดการ มหาวิทยาลัยวิทยาศาสตร์และเทคโนโลยีแห่งประเทศจีน (USTC)|AI Prompts, บทช่วยสอน AI สำหรับผู้เริ่มต้น|ผู้เขียน Punk Series Skills|ทำรายได้ 8 หลักใน 3 เดือน|เรียนรู้แบบสาธารณะ (Learn in Public)|ยอดดูบทความ FDE 2.4 ล้าน|@AdrianPunk115

สร้างต่อใน YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
สำหรับครีเอเตอร์

เปลี่ยน Markdown ของคุณให้เป็นบทความ 𝕏 ที่สะอาดตา

เวลาคุณเผยแพร่งานเขียนยาวของตัวเอง การจัดรูปแบบรูปภาพ ตาราง และบล็อกโค้ดให้เข้ากับ 𝕏 นั้นน่าปวดหัว YouMind เปลี่ยนร่าง Markdown ทั้งฉบับให้เป็นบทความ 𝕏 ที่สะอาดตาและพร้อมโพสต์ทันที

ลอง Markdown เป็น 𝕏

แพตเทิร์นให้ถอดรหัสเพิ่มเติม

บทความไวรัลล่าสุด

สำรวจบทความไวรัลเพิ่มเติม