Videos → สร้างเว็บแหล่งความรู้สวยๆ ด้วย VitePress

Session starts0:00

ซึ่งก็ตรงกับหัวข้อต่อไป พอดีเลยใช่ไหมริฟฟี่ ใช่ครับ session ต่อไป เราก็จะมาดูเรื่องการ สร้างเว็บความรู้สวยๆ นะครับผม โดยใช้ library/framework ที่ชื่อว่า VitePress นะครับผม VitePress

โอเช I see

ก็ได้ข่าวว่า speaker ของเรา พร้อมแล้วนะครับผม งั้นก็ขอเรียนเชิญ กับพี่ไทเลยครับผม ครับ ขอเสียงปรบมืออีกครั้งหน่อยครับ โอเค

ตื่นเต้นครับ ไม่เคยมาพูดที่ Paragon นะ โอเค งั้นก็เริ่มกันเลยดีกว่านะครับ

ก็สวัสดีครับทุกคน ก็ ผมชื่อไทนะครับ ตอนนี้เป็น Software Engineer อยู่ที่บริษัท Eventpop นะครับ ก็ session สั้นๆ นี้นะครับ ผมจะมาขายของนะครับ

รู้จักกับ static site generator0:40

คือปัจจุบันเนี่ย เวลา ผมทำพวก web application ต่างๆ ผมก็มักจะใช้ framework ต่างๆ กันไป อย่างเช่นพวก Remix, Astro หรือ Next.js เนี่ย ซึ่งก็- เราเลือกใช้ตัวไหนก็ ขึ้นอยู่กับปัจจัยต่างๆ เนาะ แต่พอเรามาทำเว็บที่เป็นเว็บแหล่งข้อมูล หรือเป็นเว็บแนว content เนี่ย ไม่ว่าจะเกี่ยวกับอะไรก็ตามนะ เดี๋ยวเนี่ยผมจะมองหา VitePress

เป็นอันดับแรกนะครับ

ต้องขอบอกก่อนว่า แต่ละค่าย แต่ละภาษา แต่ละ framework มักจะมีเครื่องมือทำเว็บที่เรียกกันว่า static site generator ของค่ายนั้นๆ ที่ออกแบบมาสำหรับ การทำ documentation หรือเว็บไซต์ ที่เป็นแหล่งความรู้โดยเฉพาะ อย่างถ้าใครใช้ React ก็จะมี Docusaurus กับ Nextra ถ้าใช้ Astro ก็มี Starlight ส่วนถ้าใช้ภาษาอื่นๆ อย่างเช่น Go, Python, Rust แต่ละภาษาก็จะมีเครื่องมือของมันเอง

ซึ่งหน้าตามันก็จะแตกต่างกันไป

แต่สำหรับวันนี้ผมจะ มาพูดถึง VitePress ซึ่งเป็น static site generator ที่ใช้ Vue.js เป็นฐาน

ทำไมถึงชอบใช้ VitePress1:35

ที่ผมอยากพูดก็เพราะว่า เท่าที่ผมเคยลองใช้ พวก static site generator มาหลายตัว ปัจจุบันผมคิดว่า VitePress เป็นตัวที่ผมชอบมากที่สุด ทั้งในแง่ของคนที่ทำเว็บ และคนที่ใช้งานเว็บนะครับ

ปัจจุบันผมมีเว็บที่ดูแล ที่ขึ้นด้วย VitePress อยู่ประมาณ 4 เว็บนะครับ ก็มีเว็บ wonderful.software จะเป็นเว็บรวมบทความเกี่ยวกับ การพัฒนา software เป็นภาษาไทย Fresh App Factory อันนี้เป็น open source project อันนึง showdown.space จะเป็นกิจกรรม แข่งเขียนโค้ดสนุกๆ ซึ่ง เวลาเราประกาศผลหรือว่าโพสต์โจทย์ต่างๆ ก็จะโพสต์ไว้ที่เว็บนี้ แล้วก็เว็บ mjth.live

จะเป็น community ห้องซ้อมดนตรีออนไลน์ ที่จะเปิดให้คนมาเล่น ดนตรีด้วยกันผ่านโปรแกรม ที่ชื่อว่า Jamulus เว็บพวกนี้ใช้ VitePress ขึ้นหมดเลย แล้วก็มาดูตัวอย่างเว็บ ที่คนอื่นๆ สร้างกันบ้างนะครับ ก็จะมีพวก Rollup.js, Elysia.js, D3.js,

Hono ที่เป็น web framework อีกอันนึงนะครับ ก็จะเห็นว่าโปรเจกต์พวกนี้ ไม่เกี่ยวอะไรกับ Vue.js เลย แต่ก็เอา VitePress มาใช้นะครับ

default theme2:36

ซึ่งสิ่งที่ทำให้ผมชอบ VitePress มากๆ ตัวหนึ่ง แบบสุดๆ เลยก็คือ default theme ของมันนะครับ จะเห็นว่า ถึงแม้แต่ละเว็บเนี่ย หน้าตามันจะดูคล้ายๆ กันนะ แต่ว่าทุกเว็บเนี่ย ก็ สามารถ custom ให้มันมีจุดเด่น ของมันเองได้ เดี๋ยวผมจะแนะนำในมุมมอง ของผู้ใช้งานเว็บไซต์ ก่อนแล้วกันนะครับ คือเว็บที่สร้างด้วย VitePress เนี่ย ตรงมุมซ้ายบน ก็จะมีกล่อง search นะครับ ที่เราสามารถกด command+k ไม่ว่าเราจะอยู่หน้าไหนนะ เราก็สามารถกด command+k เพื่อ ไปยังหน้าที่เราต้องการได้เลย

แล้วก็สามารถกดให้โชว์ ตัวอย่างเนื้อหา เวลาเรา search บนเว็บได้ด้วยนะครับ sidebar จะอยู่ด้านซ้าย แล้วก็ด้านขวาก็จะเป็น outline ที่บอกว่า ในหน้าเว็บนี้มีหัวข้ออะไร ก็คือออกแบบ layout ไว้ค่อนข้างใช้ง่าย ส่วนด้านบนก็จะเห็นว่า เป็น navigation bar ซึ่งบาง item ก็สามารถทำ เป็นเมนูย่อยเข้ามาได้ แล้วผมคิดว่า theme default ของ VitePress คือ เขาทำใส่ใจรายละเอียดมากๆ อย่างจะเห็นว่าเมนูตรงนี้ มีการแบ่งเป็น 2 section ย่อย แล้วกรณีที่เมนูมันยาวๆ จนเกินไป ก็ทำให้มัน scroll ได้ด้วย อย่างบาง theme ที่เขาไม่ได้ ใส่ใจรายละเอียดขนาดนี้ เวลาเจอเมนูยาวๆ ก็อาจจะ เกิดเหตุการณ์ที่เมนูยาวล้นขอบจอ แล้วเราก็กดไม่ได้ใช่ไหม

มุมขวาบนก็จะมีพวก social icons ต่างๆ นะครับ แล้วก็ท้ายหน้าเนี่ย ก็จะมีลิงก์ที่ไว้ไปหน้าถัดไป แล้วก็หน้าก่อนหน้านะครับ ก็ ใช้งานง่ายมากเลย ส่วนตัว content ที่เขียน ก็สามารถใส่พวก callout ใส่ alert เช่น คำแนะนำ คำเตือน ต่างๆ ใส่เข้าไปได้นะครับ สามารถเอาข้อความบางส่วนซ่อนไว้ใน กล่อง detail ที่เราต้องคลิก มันถึงจะแสดงเนื้อหาข้างในนั้นนะครับ ก็จะทำให้เว็บดูไม่รก แล้วก็ไม่ยาวจนเกินไปนะครับ แล้วก็นอกจากนี้ ยังสามารถเอา code block มาจับกลุ่มกัน ให้เป็นหลายๆ แท็บได้ด้วยนะครับ code block ต่างๆ เราสามารถ highlight บางบรรทัด เพื่อดึงความสนใจ หรือทำให้มันดูเด่นขึ้น หรือ code บางส่วนที่เราอยากให้คนอ่าน

ไม่ต้องไปสนใจมันมาก เราก็สามารถ เบลอมันทิ้งได้ ซึ่งฟีเจอร์พวกนี้ มาพร้อมกับตัว default theme ของ VitePress ก็รู้สึกว่าแบบ- ครบเครื่องมากๆ แล้วก็- ผมมองว่า VitePress เป็น เครื่องมือตัวหนึ่งที่ทำ responsive design ได้แบบดีสุดๆ เลยนะครับ เดี๋ยวเรามาดูตัวอย่างกันดีกว่า เดี๋ยวผมจะโชว์ให้ดู

อย่าง-

อ่า อย่างอันนี้นะครับ คือเว็บของ showdown.space นะครับ ก็จะเห็นว่า ทุกอย่างตอนนี้แสดงอยู่เนอะ คราวนี้ผมจะค่อยๆ ย่อ พอย่อถึงจุดนึงเนี่ย อ่า จะเห็นว่าตรง social icon เนี่ย ก็จะหายไป มาโผล่ตรงนี้ แล้วก็ตรง outline ด้านขวา ก็จะมาโผล่ตรงนี้แทนนะครับ ก็กดขึ้นมาดูได้ แล้วถ้าเราย่ออีกเนี่ย เมนูด้านซ้ายก็จะมาโผล่ตรงนี้ กลายเป็น drawer ส่วนตรง outline ก็จะมาโผล่ตรงด้านขวา ทำให้ประหยัดพื้นที่ตรงนี้ ก็ดูตรงนี้ได้ แล้วถ้าเราย่ออีก กล่อง search ก็จะมาโผล่ด้านบน แล้วก็ตรง navbar ก็จะเปลี่ยนเป็น hamburger menu ครับ แบบนี้

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

developer experience6:14

คราวนี้มาดูในมุมมองของนักพัฒนาเว็บไซต์กันบ้าง อย่างแรกคือ VitePress เราขึ้นโปรเจคง่ายมาก ไม่ว่าจะเป็นโปรเจคที่เรามีอยู่แล้ว แล้วต้องการใส่ documentation เข้าไป หรือเป็นโปรเจคใหม่ที่เป็นเว็บไซต์ ก็ใช้แค่ 2 คำสั่งนี้

แล้วพอรันคำสั่งเนี่ย มันก็จะสร้างไฟล์ต่างๆ ให้นะครับ จะเห็นว่าเนื้อหาทั้งหมดเนี่ย จะเข้าไปอยู่ในโฟลเดอร์ ที่ชื่อว่า docs นะครับ ส่วนไฟล์ config ต่างๆ นะ ก็จะเข้าไปอยู่ในโฟลเดอร์ .vitepress ที่ซ้อนอยู่ในโฟลเดอร์ docs อีกทีนะครับ ก็ทำให้ไฟล์ในโปรเจคไม่รกนะครับ

ก็เป็นอะไรที่ผมคิดว่าออกแบบไว้ได้ดีมากๆ และตัว default theme มันต่อเติมง่ายมากๆ เลย เครื่องมือทำเว็บไซต์บางตัว ที่ผมเคยใช้ ไม่สามารถต่อเติมตัว theme ได้นะครับ ถ้าผมอยากจะปรับแต่ง ผมก็ต้องไป fork ตัว theme ออกมา แล้วเวลาทางต้นทางเขาอัปเดต เราก็ต้องอัปเดตโค้ดของเราตาม บางทีก็เกิด conflict ใช่ไหม แต่ default theme ของ VitePress เขา เปิดช่องให้เราต่อเติม ได้เยอะมากๆ ฉะนั้น สำหรับใน session นี้ ผมจะไม่ได้มาสอนวิธีติดตั้ง หรือวิธี set up VitePress นะครับ ซึ่งไปอ่านคู่มือกันเองได้เลย เพราะคู่มืออ่านง่ายมาก แต่ session นี้ ผมจะมาโชว์ ตัวอย่างเว็บต่างๆ ที่ผมเคยทำ ว่าผมเอา VitePress มาปรับแต่ง อย่างไรบ้าง แล้วก็ ใช้เทคนิคอะไร

ตัวอย่างการปรับแต่ง - color theme7:24

เริ่มง่ายๆ ก่อนเลยครับ color theme นะครับ แต่ละเว็บ ก็จะมีสี มี CI ของมันเองใช่ไหมครับ ฉะนั้น ใน VitePress เราสามารถ ปรับแต่งสีของเว็บ มี 2 ขั้นตอนหลักๆ

ขั้นแรกคือเลือก base ก่อนว่า เราอยากจะใช้ธีมมืดหรือธีมสว่าง เป็นมาตรฐาน- เป็นพื้นฐานนะครับ ก็ set ใน file config นะครับ หลังจากนั้นก็สามารถ ปรับแต่งสีที่เหลือได้นะครับ เพราะว่าทั้งธีมมืดและธีมสว่าง สีทั้งหมดในเว็บคุมผ่าน CSS variables หมดเลย ฉะนั้นเราอยากจะแก้อะไร ก็แก้แค่ใน CSS variables นะครับ เลยทำให้ VitePress สามารถ เปลี่ยนสีให้ตรงตามความต้องการง่ายมาก

ตัวอย่างการปรับแต่ง - custom components8:04

ตัวอย่างต่อไปคือพวก custom components หรือพวก interactive components ต่างๆ ที่อยู่บนหน้าเว็บนะครับ อย่างเช่นเว็บของ MJTH จะมีหน้าเว็บ ที่เป็นสถิติต่างๆ ที่เอามาแสดง

เป็นแผนภูมิ แผนภาพอะไรพวกนี้ครับ หรือในเว็บ wonderful.software ก็จะมี บางหน้าที่แสดงรูปตรงด้านซ้าย

รูปเล็กๆ ด้านซ้าย แล้วก็มีคำอธิบายด้านขวา หรือบางหน้าจะมีตัวอย่างการใช้งาน javascript console ที่มีแบบ input เป็นไง output เป็นยังไง และมีแบบฝึกหัด ให้ทำภายในหน้าเว็บนะครับ ก็คือเราพิมพ์คำตอบแล้วมันก็จะ ตรวจคำตอบภายในหน้าเว็บตรงนั้นได้เลยนะครับ ซึ่งฟีเจอร์พวกนี้ ผมใช้ฟีเจอร์ที่เรียกว่า Vue in Markdown

เป็นฟีเจอร์หนึ่งของ VitePress มาดูตัวอย่างกันดีกว่า อย่าง component นี้นะครับ ชื่อว่า component MonthlyTable ตอนนั้นผมก็ไม่ได้คิดอะไรมากตอนตั้งชื่อ แต่มาดูโค้ดกัน ก็จะเห็นว่าไฟล์นี้ครับ เป็นไฟล์ .md index.md เป็นไฟล์ markdown ธรรมดาเลยครับ แล้วก็ ข้างในนี้ก็จะแบบ- เป็นโค้ดmarkdown ธรรมดา ก็คือจะสร้าง heading ก็ใส่เครื่องหมาย # ใช่ไหมครับ แต่จะเห็นว่าในไฟล์ markdown ของ VitePress เราสามารถใส่ script setup เข้าไปได้ด้วยนะครับ เป็น syntax ของ Vue.js เราสามารถ import ไฟล์ข้อมูล JSON แล้วก็ไฟล์ component ที่เป็นไฟล์ .vue แล้วก็เอามาใช้ในไฟล์ markdown ของเราได้เลย ก็จะได้เป็นผลลัพธ์แบบนี้นะครับ หรือตัวอย่างแบบฝึกหัดในหน้านี้นะครับ ก็อันนี้ก็คือโค้ดนะครับ เหมือนเดิมก็คือเรา import component เข้ามา แล้วก็เอา component มาใช้นะครับ แต่จะเห็นว่า component เรานี่ย มีการส่ง prop ที่ดึงข้อมูลมาจาก front matter ครับ ซึ่งเราสามารถกำหนด front matter ให้ไฟล์ markdown ได้โดยเขียนเป็นภาษา YAML ครับ ทำให้เราสามารถส่งข้อมูลที่เป็น object เป็น array หรือเป็น structure data แบบอื่นๆ

เข้าไปให้ component ในไฟล์ markdown ได้นะครับ ก็ทำให้โค้ดของเว็บอ่านง่ายขึ้น

จริงๆ ทำได้อีกวิธีครับ ก็คือเราเขียนตัวแปร JavaScript ในตัว script setup แล้วก็เอามาใช้ใน component ข้างล่าง แบบนี้ได้เลยครับ

แนะนำเว็บ wonderful.software/js10:04

ถึงตรงนี้ บางคนอาจจะสงสัยว่า เว็บนี้คือเว็บอะไรนะครับ เหมือนเป็นบทเรียนอะไรสักอย่างนะครับ ก็ได้โอกาสมาเปิดตัวในงานนี้ครับว่า ผมกำลังทำคอร์ส JavaScript เบื้องต้นอยู่ครับ ก็เป็นเป้าหมายของผมที่จด เว็บ wonderful.software มาตั้งแต่เมื่อปี 2015 นะครับ ก็ยังไม่ได้ทำอะไรกับมันซะที จนกระทั่งเมื่อปลายปีที่แล้วนะครับ ก็คือผมตั้งใจว่าให้เว็บนี้ จะเป็นเว็บหนึ่งที่คนสามารถเข้ามา ทำความรู้จักกับโลกของการสร้างซอฟต์แวร์ได้นะครับ เพราะว่าผมมองว่าแบบเวลาเราเขียนโปรแกรมเป็น มันเหมือนเรามีเวทมนตร์ในโลกของคอมพิวเตอร์ สามารถเสกสิ่งนู้นสิ่งนี้ได้นะครับ ก็เพิ่งได้มาเริ่มทำไม่นานมานี้นะครับ โดยเวอร์ชั่นบนเว็บเนี่ย สามารถเข้าไปอ่านได้ฟรีที่ wonderful.software/js นะครับ

ในนี้จะมีเนื้อหาอยู่ประมาณนึงครับ แต่ยังทำไม่เสร็จนะครับ แล้วก็มีคอร์สที่เป็นเวอร์ชั่นวิดีโอครับ ซึ่งถ่ายทำกับทาง Skooldio นะครับ ก็ผมก็ได้ Skooldio มาช่วยร่วมออกแบบคอร์ส มาคอยให้ feedback จากคนที่ทดลองเรียน แล้วก็ให้คำแนะนำต่างๆ ด้วย ซึ่งตอนนี้ก็กำลังจัดทำกันอยู่ครับ แล้วถ้าเปิดตัวยังไงก็เดี๋ยวจะมาอัปเดตอีกทีนะครับ

ตัวอย่างการปรับแต่ง - ระบบ feedback และ comment11:04

เรากลับมาที่ VitePress กันดีกว่า จะเห็นว่าในคอร์สนี้ ท้ายแต่ละหน้า ผมได้ใส่ form feedback

เพื่อเก็บ feedback เวลาคนอ่านแต่ละหน้า แล้วก็มีกล่อง comment ข้างล่างด้วย ซึ่งอันนี้ไม่ใช่ฟีเจอร์ที่มาพร้อม VitePress

ซึ่ง- ถ้าใครเข้าไปที่ wonderful.software/js นะครับ ถ้ามี comment มีอะไรพวกนี้ ก็กด reaction กดใส่ comment มาได้นะครับ แต่เราจะมาดูกันดีกว่าว่า 2 ส่วนนี้ implement ยังไง ผม implement โดยใช้ ฟีเจอร์ที่เรียกว่า layout slot นะครับ โดยใน default theme จะมี slot ต่างๆ เช่น doc-footer-before กับ doc-after slot พวกนี้ทำให้เราสามารถใส่ component แทรกเข้าไปตามส่วนต่างๆ ของ layout บนเว็บได้นะครับ อย่างเช่น doc-footer-before ก็จะมาโผล่ตรงนี้ ก็คือท้ายหน้า แต่ว่าก่อนลิงก์ไปหน้าถัดไป

doc-after ก็คือหลังลิงก์ไปหน้าถัดไปนะครับ ด้านบน doc-before ก็จะเป็นข้างบนสุดของหน้านะครับ อย่างตรงนี้ผมเอาไว้แสดงข้อความว่า เว็บยังไม่ค่อยสมบูรณ์ โดย code ที่ implement ผมก็ implement เข้าไปประมาณนี้นะครับ import ตัวแปรที่จำเป็นเข้ามา- ไอพวกนี้ครับ ดูใน doc ได้นะครับมีเขียนไว้หมด แต่ว่าที่จะให้ดูก็คือวิธีการใช้ layout slot ก็คือใส่ template เข้าไปในตัว layout แล้วก็ใส่ชื่อ slot เข้าไปนะครับ เสร็จแล้วเราก็ตั้งว่าถ้า front matter ของหน้าเว็บนี้ เป็น draft มีค่า draft เป็น true ค่อยโชว์ข้อความตรงนี้

จะเห็นว่า API ที่ VitePress ให้มา ยืดหยุ่นมากๆ แล้วก็ตัว default theme มี layout slot ให้เราใช้อยู่ประมาณ 30 จุด ก็คือเอาของไปใส่ตรงไหนก็ได้ ใน 30 จุดนี้นะครับ

ตัวอย่างการปรับแต่ง - typography12:42

ตัวอย่างสุดท้ายที่จะมาพูดในวันนี้ คือเรื่องของ typography หรือการจัดรูปแบบข้อความ ซึ่งต้องบอกก่อนว่าผมเนี่ย เป็นคนหนึ่งที่ไม่ค่อยมีหัวด้านดีไซน์สักเท่าไหร่ แล้วก็ไม่ได้เชี่ยวชาญเรื่องเกี่ยวกับ การทำอะไรให้มันดูสวยงาม ซึ่งผมก็ได้ VitePress มาช่วยแบบช่วยมากๆ เลย เพราะว่า default theme เขามีการ set style มาตรฐานต่างๆ ไว้ให้ ว่าแบบเราไม่ต้องตั้งค่าอะไรเลย มันก็ค่อนข้างอ่านง่ายอยู่แล้ว ที่เหลือก็คือผมก็เอามาปรับแต่งต่อ อีกนิดหน่อยครับ เช่น ปรับ font ปรับขนาดตัวหนังสือ ให้มันรู้สึกอ่านง่ายสำหรับเรามากขึ้นนะครับ ซึ่งอันนี้ก็ตรงไปตรงมานะครับ ก็คือใส่ CSS เข้าไปนะครับ

แต่จะมีอีกรายละเอียดหนึ่งที่ผมใช้ฟีเจอร์ ที่ค่อนข้าง advanced นิดหนึ่งใน VitePress แล้วก็เป็นฟีเจอร์- เป็นท่าที่เรียกว่า apply

กับเว็บที่เป็น content ภาษาไทยแล้วกันครับ ก็คือเรื่องการเว้นวรรคครับ ถ้าใครเคยไปอ่าน documentation ที่เกี่ยวกับภาษาไทย ก็อาจจะพบว่าในภาษาไทย จริงๆ แล้วมีเว้นวรรค อยู่สองแบบ คือเว้นวรรคเล็ก แล้วก็เว้นวรรคใหญ่ นะครับ ในเว็บนี้ เนื่องจากมันเป็น technical มันจะมีข้อความภาษาไทย ปนกับภาษาอังกฤษค่อนข้างเยอะ แถมในภาษาไทย เราก็มักจะไม่ได้ใช้จุด full stop เพื่อจบประโยค ทำให้ถ้าเกิดทุกอย่างมันต่อกัน ด้วยเว้นวรรคเล็กอย่างเดียว มันอาจจะอ่านยาก ผมก็เลยเอาเว้นวรรคใหญ่มาใช้ แล้วก็คิดว่ามันอาจจะช่วยให้เว็บอ่านง่ายขึ้น แล้วก็ นอกจากนี้จะเห็นว่า ตามหลักของราชบัณฑิตนะครับ ไม้ยมกมันควรจะมี space อยู่ข้างหน้าด้วย

แต่ในทางปฏิบัติ เรามักไม่ใช้กัน เพราะอะไรครับ เพราะว่า ถ้าเราใส่ space ไว้ตรงนี้ บางที browser มันจะตบเครื่องหมายไม้ยมก ต่อลงไปบรรทัดถัดไป ทำให้ดูไม่ดี ซึ่ง 2 ปัญหานี้ผมแก้โดยไปปรับแต่ง การประมวลผลของ markdown ใน VitePress นะครับ ต้องบอกก่อนว่า VitePress ใช้ library ที่ชื่อว่า markdown-it ในการแปลง markdown ให้เป็น HTML นะครับ ซึ่งเราสามารถปรับแต่งอะไรต่างๆ ได้เยอะมากเลยครับ ผมก็เลยใส่ปลั๊กอินเข้าไป เขียนตั้งค่ามันว่า ถ้าเรากดปุ่ม Enter ในไฟล์ markdown ให้มันเรนเดอร์ออกมาเป็นเว้นวรรคใหญ่ และก็ เวลาผมเขียนในไฟล์ markdown ไม้ยมก ผมจะไม่ใส่ space ข้างหน้า แต่ตอนที่เราเรนเดอร์ออกมา ให้ครอบเครื่องหมายไม้ยมกไว้ใน span นะครับ จะทำให้ HTML ที่ render ออกมา หน้าตาเป็นแบบนี้นะครับ แล้วก็สุดท้ายผมก็ใส่ margin ให้กับ span สองตัวนี้ด้วย CSS นะครับ ก็จะเห็นว่ามันปรับแต่งอะไรต่างๆ ได้เยอะมากเลยนะครับ จริงๆ ทำได้อีกหลายอย่างมากเลยครับ แต่ว่าเวลาใน session นี้ไม่พอนะครับ ฉะนั้นถ้าสนใจเนี่ยไปดู source code ของเว็บไซต์ต่างๆ พวกนี้ได้นะครับ open source หมดเลยนะครับ

สรุป15:18

มาสรุปกันดีกว่านะครับ ผมมองว่า VitePress เนี่ยเป็นเครื่องมือตัวนึง ที่ผมคิดว่าเขาออกแบบระบบไว้ดีมากๆ และด้วยความที่มันเป็น open source เราสามารถเข้าไปอ่าน code ไปศึกษา ว่าเขาใช้เทคนิคอะไรถึงได้ของ ที่มันคุณภาพดีขนาดนี้นะครับ

ซึ่งผมมองว่าการศึกษา code ของ software open source ที่ออกแบบไว้ดีเนี่ย มันก็อาจจะช่วยให้เราออกแบบ software ได้ดีขึ้นตามนะครับ คล้ายๆ กับเวลาคนที่ไปศึกษาผลงาน ของนักประพันธ์หรือศิลปินที่โด่งดังนะครับ เพื่อขยายมุมมองของตัวเองนะครับ จริงๆ เรื่องพวกนี้ก็มีคนรวบรวม ทำเป็นหนังสือเลยนะ เช่นหนังสือ The Architecture of Open Source Applications ที่มีมาหลายปีแล้ว ถอดบทเรียนจาก software open source ชื่อดังต่างๆ แล้วก็สกัดข้อคิดที่เราสามารถ เอาไปใช้ในงานของเราได้นะครับ หนังสือเล่มนี้ทุกบทก็อ่านฟรีเหมือนกันนะครับ เข้าไปอ่านในเว็บไซต์ หา Architecture of Open Source Applications ได้นะครับ หรือจะซื้อหนังสือเป็นเล่มๆ ก็ได้นะครับ ก็เอาเป็นว่าสำหรับวันนี้นะครับ ผมมีเรื่องที่อยากจะมาแชร์ประมาณเท่านี้ แล้วกันนะครับ ก็ขอบคุณทุกคนที่ฟังนะครับ

ขอบคุณพี่ไทมากเลยครับผม

ถ้าสมมติใครสนใจกลับบ้านไป ก็เอาไปลองเล่นกันต่อได้เลยนะฮะ