ฉันดีใจมากที่ในที่สุดฉันก็ได้เปิดตัวเว็บไซต์ใหม่ของฉัน! ในแง่ของกลุ่มเทคโนโลยี ฉันยังคงอยู่ในโลกโปรดของฉัน — Vue 😆 แต่ครั้งนี้ฉันตัดสินใจใช้ VuePress แทน ในบทความนี้ ฉันต้องการแบ่งปันว่าการตัดสินใจครั้งนี้เกิดขึ้นได้อย่างไร และความคิดเห็นของฉันเกี่ยวกับการใช้ VuePress คืออะไร
- ของที่ผมใช้เมื่อก่อน.
- เหตุใดฉันจึงเปลี่ยนจาก Nuxt เป็น VuePress
- ประโยชน์ของ VuePress
- ความท้าทายของ VuePress
- มันคุ้มไหมที่จะเปลี่ยนจาก Nuxt เป็น VuePress
ของที่ผมใช้เมื่อก่อน.
ก่อนหน้านี้ฉันใช้ Nuxt ฉันเลือก Nuxt เพราะเป็นสิ่งเดียวที่เสนอการเรนเดอร์ฝั่งเซิร์ฟเวอร์ สิ่งนี้สำคัญสำหรับฉันเนื่องจากมีประโยชน์ในการทำ SEO ให้ฉันอธิบายว่านั่นหมายความว่าอย่างไร
นี่คือเอาต์พุต HTML เริ่มต้น จากนั้น Vue จะเข้ามาแทนที่และแทรกส่วนประกอบทั้งหมดของคุณลงในส่วน id=app
นั่นคือเหตุผลว่าทำไมใน Vue คุณจะต้องระบุองค์ประกอบที่คุณต้องการแนบแอป vue ไปด้วยเสมอ ในฐานะผู้ใช้ คุณไม่ได้สังเกตเห็นสิ่งนี้จริงๆ เพราะมันเกิดขึ้นเร็วมาก (ขึ้นอยู่กับความเร็วอินเทอร์เน็ตของคุณ)
แอป Vue
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
อย่างที่คุณเห็นมันค่อนข้างว่างเปล่าในการโหลดครั้งแรก และสิ่งนี้ทำให้บอทเครื่องมือค้นหาของเราจะรวบรวมข้อมูลและขุดข้อมูลอันมีค่าของคุณได้ยาก เนื่องจากไม่มีอะไรเริ่มต้นเลย
อย่างไรก็ตาม ด้วย Nuxt แอปของคุณจะถูกสร้างขึ้นบนฝั่งเซิร์ฟเวอร์ก่อน ดังนั้นเมื่อเข้าถึงเบราว์เซอร์ของคุณแล้ว หน้าเว็บทั้งหมดของคุณก็จะถูกเติมเข้าไปแล้ว
แอป Nuxt
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>Hello there</h1>
</div>
<script src="/js/app.js"></script>
</body>
</html>
นี่คือวิธีที่ฉันชอบที่จะเปรียบเทียบ Vue ก็เหมือนกับอาหารผ้ากันเปื้อนสีน้ำเงิน (ไม่ได้รับการสนับสนุน) ที่คุณต้องประกอบเองที่บ้าน และ Nuxt ก็เหมือนกับการสั่งกลับบ้าน ทุกอย่างก็พร้อมรับประทาน 😋
อย่างไรก็ตาม ฉันไม่ได้พยายามสร้างเว็บไซต์ที่หรูหรา ฉันแค่พยายามสร้างไซต์เนื้อหาเพื่อแสดงเกร็ดความรู้โค้ดและบทความของฉัน 😄 ดังนั้นฉันจึงไม่ต้องการแอปหน้าเดียว ฉันแค่ต้องการ HTML ธรรมดาแฟชั่นดีๆ สักอัน และนั่นคือเหตุผลว่าทำไม Nuxt ถึงเหมาะกับฉัน!
#ทำไมฉันถึงเปลี่ยนจาก Nuxt เป็น VuePress
ถ้า Nuxt เก่งมาก ทำไมต้องเปลี่ยน ทำไมไม่ทำต่อไปล่ะ. ก็เพราะฉันขี้เกียจ 555 สิ่งที่ยอดเยี่ยมเกี่ยวกับ Nuxt ก็คือสามารถกำหนดค่าได้อย่างมาก นั่นก็เป็นข้อเสียเช่นกัน ฉันต้องกำหนดค่าทุกอย่างด้วยตัวเอง ฉันไม่อยากทำอย่างนั้นอีกต่อไป ก็เหมือนกับการเลือกซื้ออสังหาริมทรัพย์ คุณสามารถซื้อที่ดินเปล่าหรือบ้านที่สร้างไว้ล่วงหน้าก็ได้ ที่ดินนี้ดีมากเพราะคุณสามารถสร้างบ้านอะไรก็ได้ที่คุณต้องการ นอกเหนือจากนั้น คุณจะต้องเริ่มต้นใหม่ทั้งหมด แต่สำหรับฉัน ฉันต้องการบ้านที่สร้างไว้ล่วงหน้าที่สามารถย้ายเข้าอยู่ได้โดยไม่ต้องกังวลอะไรเลย
และนั่นสำหรับฉันคือ VuePress มันมีปลั๊กอินการค้นหาในตัว มาร์กดาวน์สุดเก๋ที่ตั้งค่าไว้แล้วพร้อมฟีเจอร์เจ๋ง ๆ มากมาย เช่น การเน้นโค้ด และมันถูกออกแบบมาสำหรับไซต์เนื้อหาคงที่ ซึ่งเป็นสิ่งที่ฉันกำลังสร้าง ดังนั้นฉันจึงเปลี่ยน!
รองชนะเลิศ: Gridsome
ฉันเกือบจะเลือก "Gridsome" แล้ว มันให้ทุกสิ่งที่ฉันต้องการสร้างไซต์เนื้อหาคงที่ แต่ทีมงาน Vue ก็มาพร้อมกับ VuePress ซึ่งเป็นทางเลือกของพวกเขาเอง ฉันก็เลยคิดว่าถ้าทีม Vue สร้างสิ่งนี้ขึ้นมา ฉันก็โอเค! เมื่อมองย้อนกลับไป ฉันคิดว่าฉันควรจะพิจารณาเรื่องนี้ให้มากกว่านี้ เนื่องจากมีความท้าทายบางอย่างกับ VuePress เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง
ประโยชน์ของ VuePress
เอาล่ะ มาพูดถึงสิ่งที่ฉันชอบเกี่ยวกับ VuePress กันดีกว่า นี่คือ 3 อันดับแรกของฉัน:
1. คุณสมบัติมาร์กดาวน์
นี่คือเหตุผลหลักที่ฉันเปลี่ยนมาใช้ VuePress ฉันจำได้ว่าฉันมีช่วงเวลาที่ยากลำบากในการตั้งค่ามาร์กดาวน์ใน Nuxt แต่นั่นอาจเป็นเพราะประสบการณ์การเขียนโปรแกรมที่จำกัดของฉันในขณะนั้น ดังนั้นฉันจึงใช้เพียงขั้นต่ำเปล่าเพื่อให้มันใช้งานได้ ด้วย VuePress ฉันแทบจะไม่ต้องทำงานใดๆ เลยเพื่อให้ฟีเจอร์เจ๋งๆ เหล่านี้ใช้งานได้!
การเน้นเส้น
<p>I am not highlighted</p>
<p>I am highlighted</p>
การใช้ Vue ในมาร์กดาวน์
# My markdown
<VueComponent />
ลิงก์ภายใน
[Home](/) <!-- I can use relative links -->
คุณสามารถดูส่วนขยาย Markdown ทั้งหมดได้ "ที่นี่"
2. ค้นหา
ใครจะรู้ว่าคุณสมบัติเล็กๆ น้อยๆ สามารถสร้างผลกระทบที่ยิ่งใหญ่ได้ ในเว็บไซต์เก่าของฉัน ไม่มีคุณลักษณะการค้นหา ดังนั้น ฉันจะใช้ Google เพื่อค้นหาไซต์ของตัวเองเพื่อค้นหาเกร็ดความรู้เฉพาะเจาะจง ฉันแปลกใจที่ไม่เคยได้รับอีเมลร้องเรียนเกี่ยวกับเรื่องนี้เลย บางทีคนเหล่านั้นอาจหยุดใช้เว็บไซต์ของฉันด้วยกัน ฉันไม่โทษคุณหรอก 🤦♀️
แล้วเดาอะไร! VuePress มีคุณสมบัติการค้นหาในตัว เป็นปลั๊กอินค้นหาตามส่วนหัว หมายความว่าอย่างไร ระบบจะรวบรวมข้อมูลผ่านไฟล์มาร์กดาวน์ทั้งหมดของคุณ และส่งคืนส่วนหัวที่ตรงกับข้อความค้นหาของคุณ มหัศจรรย์!
3. แนวหน้า
Frontmatter เปรียบเสมือนข้อมูลสำหรับไฟล์มาร์กดาวน์ของคุณ เมื่อคุณเขียนบทความลดราคา หลายครั้งที่คุณต้องการรวมข้อมูลเพิ่มเติมไว้ด้วย เช่น ชื่อผู้แต่ง วันที่สร้าง วันที่แก้ไข …ฯลฯ คุณจะส่งข้อมูลอย่างไรในมาร์กดาวน์ของคุณ นั่นคือบล็อกส่วนหน้า
--- author: Samantha Ming created: Jan 26 modified: Jan 30 ---
# My new blog post
ฉันต้องการคุณลักษณะนี้สำหรับไซต์เก่าของฉัน ฉันไม่สามารถใช้งานได้ ดังนั้นฉันจึงสร้างออบเจ็กต์ JavaScript ที่มีข้อมูลบทความทั้งหมดของฉันแทน นั่นทำให้นักพัฒนาของฉันได้สร้างสรรค์ผลงาน เมื่อคุณไม่ได้ผล คุณจะหาวิธีอื่น นั่นเป็นเรื่องดีในการทำงานในโครงการของคุณเอง มันไม่จำเป็นต้องสมบูรณ์แบบ ตราบเท่าที่คุณสามารถไปถึงจุดหมายปลายทางได้ แม้ว่านั่นหมายถึงการต้องเดินทางไกล แต่ก็ไม่เป็นไร เพราะเป็นปาร์ตี้ของคุณ ดังนั้นคุณจึงต้องตั้งกฎ! 😂
ความท้าทายของ VuePress
ฉันหวังว่าฉันจะพูดได้ว่าการเดินทางในการสร้างไซต์ของฉันใน VuePress ครั้งนี้สมบูรณ์แบบ น่าเสียดายที่มันไม่ใช่ VuePress เหมาะอย่างยิ่งสำหรับการสร้างไซต์เอกสารทางเทคนิค แต่ไซต์ของฉันก็เหมือนกับบล็อกเป็นหลัก ตรงนี้ฉันกำลังพยายามปั้น VuePress ให้เหมาะกับความต้องการของฉัน และนี่เป็นเรื่องยาก
เอกสารประกอบขาดตัวอย่างสำหรับงานที่กำหนดค่าได้
เอกสาร VuePress แม้ว่าจะยอดเยี่ยมสำหรับคุณสมบัติหลักก็ตาม มันค่อนข้างท้าทายสำหรับงานขั้นสูงหรืองานที่กำหนดค่าได้ ฉันพบว่าเอกสารขาดตัวอย่างเล็กน้อย ฉันขอยกตัวอย่างให้คุณฟัง (แปะมือบนการเปลี่ยนตัวอย่างที่ราบรื่น 😂)
ฉันพยายามติดตั้ง vue-fontawesome
ลงในแอปของฉันเพื่อให้สามารถใช้ไอคอน Font Awesome ได้ ฉันคิดไม่ออกว่าต้องทำอย่างไร โชคดีที่ฉันมีคำแนะนำและในที่สุดก็เข้าใจได้ ฉันต้องการในเอกสาร พวกเขาไม่มีตัวอย่างการใช้งาน ฉันคิดว่ามันจะช่วยฉันได้อย่างแน่นอน หากคุณเคยอ่านเอกสารของ Vue เอกสารนี้จะเต็มไปด้วยตัวอย่างและอ่านง่ายมาก ข่าวดีก็คือ ฉันรู้ว่าทีมงาน VuePress กำลังพยายามปรับปรุงในเรื่องนี้ ตื่นเต้นมากที่สิ่งนั้นจะเกิดขึ้น👏
ต่อไปนี้เป็นวิธีติดตั้งปลั๊กอินเพื่อทำงานกับ VuePress หากคุณสงสัย
การสนับสนุนข้อมูล Meta จำกัด
ตอนที่ฉันใช้ Nuxt มีปลั๊กอินเจ๋งๆ ชื่อ vue-meta
อนุญาตให้สร้างข้อมูลเมตาสำหรับเพจของคุณโดยทางโปรแกรม นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับ SEO และเพื่อสร้างการ์ดแชร์ Twitter หรือ Facebook
ใช่ VuePress รองรับสิ่งนี้ คุณสามารถตั้งค่าทั่วไปในไฟล์ config
ของคุณได้ และคุณสามารถตั้งค่าแต่ละรายการในไฟล์มาร์กดาวน์ของคุณได้ โปรดจำไว้ว่าฉันพูดถึงเนื่องจากความล้มเหลวในการตั้งค่า frontmatter ในแอป Nuxt ฉันลงเอยด้วยการใช้วัตถุ JavaScript ขนาดใหญ่เพื่อจัดเก็บข้อมูลทั้งหมดของฉันสำหรับแต่ละบทความของฉัน มันบังเอิญมีข้อมูลเมตาของฉันทั้งหมดด้วย ดังนั้นฉันจึงต้องการตั้งค่าวันที่เมตาของฉันโดยทางโปรแกรม ใช่ ฉันพบปลั๊กอินที่ไม่เป็นทางการบางตัว แต่ส่วนใหญ่แล้วพวกเขาจะอาศัยข้อมูลเมตาที่ตั้งไว้ในส่วนด้านหน้า ดังนั้นสิ่งเหล่านั้นไม่ได้ผล
จำได้ไหมเมื่อฉันพูดถึงตัวเลือกรองชนะเลิศ Gridsome พวกเขามีมัน! ฮึ 🤦♀️ มันเป็นส่วนหนึ่งของแพ็คเกจของพวกเขา ภายใต้ประทุนของพวกเขา พวกเขาใช้ vue-meta
ฉันเกือบจะเปลี่ยนมาใช้ Gridsome เพียงเพื่อฟีเจอร์นี้เท่านั้น แต่ฉันมาไกลมากแล้ว ฉันจึงตัดสินใจเลือก VuePress ต่อไป และคุณอาจถามว่าทำไมคุณไม่กำหนดค่า vue-meta
ด้วย VuePress คำถามที่ดี! หากคุณทราบวิธีโปรดส่งอีเมลถึงฉัน! ไม่ใช่ว่าฉันไม่ต้องการ แต่ฉันแค่คิดไม่ออก และเวลากำลังจะผ่านไป ฉันจึงตัดสินใจเดินหน้าต่อไป อย่างไรก็ตาม ฉันต้องตั้งค่า vue-meta
ด้วย Server Side Rendering ดังนั้นภาวะแทรกซ้อนจึงสูงขึ้นเล็กน้อย
อย่างไรก็ตาม วิธีแก้ปัญหาปัจจุบันที่ฉันมีคือการใช้ปลั๊กอินที่กำหนดเองของตัวเองซึ่งดึงข้อมูลเมตาของฉันจากออบเจ็กต์ JavaScript ของฉันโดยทางโปรแกรมและตั้งค่าไว้ที่ส่วนหน้าผ่านปลั๊กอินที่กำหนดเอง ปัญหาคือเมื่อไซต์ของฉันถูกปรับใช้ ตอนนี้ฉันมีข้อมูลเมตาที่ซ้ำกัน (ซึ่งฉันเพิ่งค้นพบ) ฮึนั่นกำลังเข้าสู่ประเด็นปัญหา ฉันจะจัดการกับเรื่องนั้นในภายหลัง 🤦♀️ (จะโพสต์การอัปเดตหากฉันทราบวิธีแก้ปัญหา 🤞)
ฉันยังสร้างปัญหาใน repo อย่างเป็นทางการของ VuePress ด้วย ดังนั้นหวังว่าพวกเขาจะพิจารณาเพิ่มสิ่งนี้ อย่าลังเลที่จะพูดคุยหากคุณชอบคุณสมบัตินี้เช่นกัน:
มันคุ้มไหมที่จะเปลี่ยนจาก Nuxt เป็น VuePress
ใช่ 100% ใช่!!!! ฉันใช้เวลา 2 เดือนเต็มๆ ในการทำงานตลอดเวลาเพื่อทำให้ไซต์เสร็จสมบูรณ์ VuePress มีคุณสมบัติที่ยอดเยี่ยมมากมายที่สร้างไว้ล่วงหน้าอยู่แล้ว ฉันประหยัดเวลาได้มากโดยไม่ต้องสร้างสิ่งเหล่านั้นด้วยตัวเอง ความเร็วคือเกมที่นี่! ฉันไม่ต้องการเสียเวลากำหนดค่าใดๆ ฉันไม่ต้องการสร้างสิ่งที่ฉันไม่จำเป็นต้องทำ ฉันต้องการใช้เวลาของฉันเพียงแค่ดำเนินการ นั่นเป็นเหตุผลที่ฉันอยากจะเลือกสิ่งที่มีหลายอย่างที่สร้างไว้ล่วงหน้า ดังนั้นการเลือก VuePress
หวังว่าคุณจะสนุกกับการสรุปประสบการณ์และข้อเสนอแนะของฉันเกี่ยวกับการใช้ VuePress
โพสต์ถัดไปที่ฉันต้องการกล่าวถึงคือสาเหตุที่ฉันตัดสินใจเปลี่ยนเฟรมเวิร์ก CSS และใช้ "Tailwindcss" ดังนั้นคอยติดตาม😊
ทรัพยากร
- วิวเพรส
- Nuxt.js
- ตารางกริด
- vue-fontawesome
- เผยแพร่ครั้งแรกที่ www.samanthaming.com
ขอบคุณที่อ่าน ❤
Say Hello!อินสตาแกรม | ทวิตเตอร์ | SamanthaMing.com | บล็อก