gridsome portfolio starter

ผู้เริ่มต้นผลงาน Gridsome

ตรวจสอบเวอร์ชัน Astro ที่นี่: https://github.com/drehimself/astro-portfolio-starter

ธีมเริ่มต้นพอร์ตโฟลิโอสำหรับ gridsome

URL สาธิต

https://gridsome-portfolio-starter.netlify.com

คุณสมบัติ

• การออกแบบที่สะอาดและน้อยที่สุด
• Tailwind CSS V1 (พร้อม purgecss) ใช้ปลั๊กอิน gridsome นี้
• เลื่อนไปยังส่วนต่างๆโดยใช้ Vue-Scrollto
• บล็อกที่มีเนื้อหา Markdown สำหรับโพสต์
• ประเภทเอกสารที่แสดงวิธีการใช้ส่วนประกอบ Vue ใน Markdown (คลิกเอกสาร)
• Theme Switcher พร้อมโหมดมืด
• ค้นหาโพสต์ด้วย fuse.js และ vue-fuse
• แท็กสำหรับโพสต์
• การปนเปื้อนขั้นพื้นฐาน
• การไฮไลต์ไวยากรณ์ด้วยชิกิ (ใช้ปลั๊กอิน gridsome นี้)
• หน้า 404
• ฟีด RSS
• แผนผังไซต์ใน XML

การติดตั้ง

1. ติดตั้งเครื่องมือ GridSome CLI หากคุณไม่มี: npm install --global @gridsome/cli
2. โคลน repo: git clone https://github.com/drehimself/gridsome-portfolio-starter.git
3. cd gridsome-portfolio-starter
4. npm install (นี่อาจเป็นการดาวน์โหลดที่ยาวนานเนื่องจาก Cypress ถ้าคุณไม่สนใจการทดสอบกับ Cypress ให้ลบออกจาก package.json )
5. gridsome develop เพื่อเริ่มเซิร์ฟเวอร์ dev ท้องถิ่นที่ http://localhost:8080

การทดสอบ

ฉันมีการทดสอบแบบ end-to-end ขั้นพื้นฐานโดยใช้ Cypress คุณสามารถค้นหาพวกเขาได้ใน /cypress/integration/tests.js

ในการเรียกใช้การทดสอบก่อนอื่นตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ dev ของคุณทำงานด้วย gridsome develop ฉันสมมติว่าคุณใช้พอร์ตเริ่มต้นที่ 8080 ถ้าไม่เปลี่ยนปุ่ม baseUrl ในไฟล์ cypress.json

หลังจากเซิร์ฟเวอร์ dev ของคุณกำลังทำงานคุณสามารถเรียกใช้ npm run test หรือ ./node_modules/.bin/cypress open เพื่อเริ่มต้นไซเปรส แอพ Cypress Electron จะทำงาน คลิกไฟล์ tests.js และการทดสอบจะทำงานในเบราว์เซอร์อัตโนมัติ

หมายเหตุ

• เมื่อ Gridsome ย้ายไปที่ Vue 3 ฉันจะอัปเดต repo นี้เช่นกัน ฉันจะอัปเดตเป็น Tailwind V2 พร้อมกับสารพัด Tailwind V2 อื่น ๆ เช่น Dark Mode และ JIT
• ขึ้นอยู่กับเว็บไซต์พอร์ตโฟลิโอส่วนตัวของฉัน ฉันต้องการสร้างเวอร์ชันโอเพ่นซอร์สที่มีคุณสมบัติเพิ่มเติม
• ตรวจสอบ screencast ที่ฉันทำเมื่อฉันผ่านกระบวนการสร้างเว็บไซต์ของฉัน
• ภาพประกอบจาก Undraw
• การค้นหาขึ้นอยู่กับ fuse.js และ vue-fuse มันค้นหาเฉพาะชื่อและสรุปของโพสต์ในตอนนี้ การปรับแต่งบางอย่างอาจจำเป็นเพื่อให้สามารถค้นหาความชอบของคุณได้ ตรวจสอบเอกสารฟิวส์สำหรับการตั้งค่าการค้นหา PR นี้เพิ่มความสามารถในการค้นหาประเภท "โพสต์" และ "เอกสาร" ทั้งสองประเภท
• ตรวจสอบ starters gridsome อื่น ๆ เหล่านี้ที่ฉันได้รับแนวคิดบางอย่างจาก:
  • บล็อกสตาร์ทเตอร์ Gridsome
  • bleda เริ่มต้น gridsome
  • Jigsaw Starter Blog - ฉันมีแรงบันดาลใจในการออกแบบมากมายจากธีมเริ่มต้นนี้

รุ่นอื่น ๆ

• เวอร์ชัน nuxt: https://github.com/drehimself/nuxt-portfolio-starter
• เวอร์ชัน Saber: https://github.com/drehimself/saber-portfolio-starter