ฉันดีใจมากที่ในที่สุดฉันก็ได้เปิดตัวเว็บไซต์ใหม่ของฉัน! ในแง่ของกลุ่มเทคโนโลยี ฉันยังคงอยู่ในโลกโปรดของฉัน — 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 หากคุณสงสัย

ลิงก์ GitHub

การสนับสนุนข้อมูล 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 ด้วย ดังนั้นหวังว่าพวกเขาจะพิจารณาเพิ่มสิ่งนี้ อย่าลังเลที่จะพูดคุยหากคุณชอบคุณสมบัตินี้เช่นกัน:

คำขอคุณสมบัติ VuePress

มันคุ้มไหมที่จะเปลี่ยนจาก Nuxt เป็น VuePress

ใช่ 100% ใช่!!!! ฉันใช้เวลา 2 เดือนเต็มๆ ในการทำงานตลอดเวลาเพื่อทำให้ไซต์เสร็จสมบูรณ์ VuePress มีคุณสมบัติที่ยอดเยี่ยมมากมายที่สร้างไว้ล่วงหน้าอยู่แล้ว ฉันประหยัดเวลาได้มากโดยไม่ต้องสร้างสิ่งเหล่านั้นด้วยตัวเอง ความเร็วคือเกมที่นี่! ฉันไม่ต้องการเสียเวลากำหนดค่าใดๆ ฉันไม่ต้องการสร้างสิ่งที่ฉันไม่จำเป็นต้องทำ ฉันต้องการใช้เวลาของฉันเพียงแค่ดำเนินการ นั่นเป็นเหตุผลที่ฉันอยากจะเลือกสิ่งที่มีหลายอย่างที่สร้างไว้ล่วงหน้า ดังนั้นการเลือก VuePress

หวังว่าคุณจะสนุกกับการสรุปประสบการณ์และข้อเสนอแนะของฉันเกี่ยวกับการใช้ VuePress

โพสต์ถัดไปที่ฉันต้องการกล่าวถึงคือสาเหตุที่ฉันตัดสินใจเปลี่ยนเฟรมเวิร์ก CSS และใช้ "Tailwindcss" ดังนั้นคอยติดตาม😊

ทรัพยากร

ขอบคุณที่อ่าน ❤

Say Hello!อินสตาแกรม | ทวิตเตอร์ | SamanthaMing.com | บล็อก