resume nextjs

---

แนะนำ

• ทุกคนสามารถสร้างเว็บเรซูเม่สวย ๆ ได้อย่างง่ายดาย (ด้วยการเข้ารหัสบางอย่าง .. )
• Next.js ใช้ bootstrap CSS
• อันที่จริง https://github.com/uyu423/resume- Legacy ported มันกับ next.js.
• ตัวอย่าง: https://uyu423.github.io/resume-nextjs
  • สำหรับตัวอย่างเพิ่มเติมโปรดดูตัวอย่าง

ผู้มีส่วนร่วม

• Yowu (Uyu423)
• Dal-ya
• แทยงคิม (จิ้งจก-คิม)
• Taeyang Jin (Heli-Os)
• Hyogeun OH (Zerohertz)

ความต้องการ

• node.js> 18
  • Node.js 18 THE ERR_OSSL_EVP_UNSUPPORTED ที่เกิดขึ้นจากเวอร์ชัน 18 หรือสูงกว่าเพื่อหลีกเลี่ยง NODE_OPTIONS=--openssl-legacy-provider
  • ขอแนะนำให้ทดสอบในรุ่น Node.js ที่ 18 หรือใหม่กว่าและแนะนำให้ใช้เวอร์ชัน node.js ที่แสดงใน .nvmrc

ติดตั้ง

 # fork to your github account & git cloning your forked repository
npm install

เรียกใช้โหมดการพัฒนา

npm run dev

โครงสร้าง

• สินทรัพย์/
  • รูปภาพ favicon
• ส่วนประกอบ/
  • ส่วนประกอบตอบสนอง
• หน้า/
  • เป็นเพียงหน้าเดียวสำหรับการเรนเดอร์ index.html
• น้ำหนักบรรทุก/
  • คุณสามารถดึงเว็บส่วนตัวของคุณออกมาได้เพียงแค่เปลี่ยนข้อมูลน้ำหนักบรรทุกของคุณ
  • มันมีข้อมูลที่จำเป็นสำหรับการเรนเดอร์เรนเดอร์
  • รายละเอียดของน้ำหนักบรรทุกที่ด้านล่าง
• เอกสาร/
  • เมื่อมีการดำเนินการ npm run export (next export) จะมีการแสดงผล HTML แบบคงที่และสร้างขึ้นที่ด้านล่างของไดเรกทอรี docs
  • docs/ ไดเรกทอรีหน้าของหน้า GitHub สามารถดำเนินการเพื่อโฮสต์ GitHub Pages Hosting
  • docs/typedoc/ มี typedoc html แต่ไม่ได้ผลิตเป็นการ npm run export คุณสามารถสร้าง typedoc ด้วย npm run typedoc

คำอธิบายของน้ำหนักบรรทุก

• Typedoc: https://uyu423.github.io/resume-nextjs/typedoc
  • ภาพหน้าจอตัวอย่างการเรนเดอร์สำหรับน้ำหนักบรรทุกทั้งหมดภายใน Typedoc
• น้ำหนักบรรทุกทั้งหมดยกเว้น _global และ footer Payload มี disable?: boolean หากฟิลด์เป็น true มันจะไม่ทำให้ส่วนของน้ำหนักบรรทุกนั้น

ประวัติโดยย่อ

• รูปภาพโปรไฟล์ชื่อหมายถึงการติดต่อบางพื้นที่แจ้งให้ทราบล่วงหน้า
• typedoc: iprofile.payload
• ตัวอย่าง TS: payload/profile.ts

แนะนำ

• พื้นที่แนะนำตัวเอง
• Typedoc: iintroduce.paylod
• ตัวอย่าง TS: Payload/Introduce.ts

ทักษะ

• บทนำพื้นที่สำหรับเทคโนโลยีของคุณเอง
• typedoc: iskill.payload
• ตัวอย่าง TS: payload/skill.ts

ประสบการณ์

• (สถานที่ทำงาน) พื้นที่แนะนำสำหรับประสบการณ์
• Typedoc: iExperience.paylod
• ตัวอย่าง TS: payload/experience.ts

โครงการ

• บทนำพื้นที่สำหรับโครงการดำเนินการ
• Typedoc: iProject.payload
• ตัวอย่าง TS: payload/project.ts

โอเพ่นซอร์ส

• การแนะนำกิจกรรมโอเพ่นซอร์ส
• Typedoc: iopensource.paylod
• ตัวอย่าง TS: payload/opensource.ts

การนำเสนอ

• การแนะนำกิจกรรมการนำเสนอ
• Typedoc: ipresentation.payload
• ตัวอย่าง TS: payload/presentation.ts

บทความ

• โพสต์บล็อก/SNS, พื้นที่แนะนำสำหรับบทความ
• Typedoc: iarticle.paylod
• ตัวอย่าง TS: payload/article.ts

การศึกษา

• รู้เบื้องต้นเกี่ยวกับวิชาการ
• Typedoc: iEducation.payload
• ตัวอย่าง TS: Payload/Education.ts

ฯลฯ

• รู้เบื้องต้นเกี่ยวกับรายการอื่น ๆ (การแข่งขันการรับรองบริการ ฯลฯ )
• Typedoc: ietc.paylod
• ตัวอย่าง TS: น้ำหนักบรรทุก/ฯลฯ

_ทั่วโลก

• พื้นที่การตั้งค่าสำหรับการตั้งค่าทั่วโลก (ชื่อเว็บ, SEO, Favicon, ฯลฯ )
• Typedoc: Iglobal.payload
• ตัวอย่าง TS: payload/_global.ts

ส่งออก

npm run export

• ทรัพยากร HTML แบบคงที่ถูกสร้างขึ้นที่ด้านล่างของ /docs
• สาขาเส้นทางย่อยเปลี่ยนโครงสร้างโดเมน (เช่น https://uyu423.github.io/resume) เปลี่ยนค่าฟิลด์ homepage ใน package.json เป็นโดเมนที่คุณต้องการโฮสต์
  • หากมี pathname ในฟิลด์ homepage มีตรรกะที่เพิ่ม assetPrefix ของ next.config.js

ส่งออกไปยังหน้า GitHub

การตั้งค่าที่เก็บ

• ตัวเลือก -Github Pages -source -Select Master Branch /Docs Folder
  • สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแหล่งที่มาของหน้า GitHub โปรดดูที่ help.github.com
• เรียกใช้ npm run export เพื่ออัปเดต HTML แบบคงที่ใน docs
• หากคุณมีโดเมนภายนอกโปรดกรอกรายการโดเมนที่กำหนดเอง
  • ไฟล์ docs/CNAME ที่จำเป็นสำหรับการโฮสต์หน้า GitHub จะถูกสร้างขึ้นโดยอัตโนมัติในระหว่างกระบวนการ npm run export
  • ดูฟิลด์ homepage ของ package.json สำหรับการสร้างไฟล์ docs/CNAME แก้ไขค่าโฮมเพจเมื่อใช้โดเมนที่กำหนดเอง
  • หากฟิลด์ homepage ใน package.json สันนิษฐานว่าเป็น *.github.io/* จะถือว่าไม่ได้ใช้โดเมนที่กำหนดเองและไม่ได้สร้าง docs/CNAME
  • สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโดเมนภายนอกโปรดดูที่ help.github.com
• *.github.io ถ้าคุณใช้โดเมนตามที่เป็น http://{username}.github.io/{repository_name} หากคุณเชื่อมต่อคุณจะเห็นเว็บเรซูเม่

ผลงาน

• หากคุณต้องการคุณสมบัติเพิ่มเติมโปรดดู เปิดเสมอ

คำถาม?

• เมื่อภาพเสียในการสร้างการผลิต
  • ดู #24
• คุณจะปรับลำดับของส่วนได้อย่างไร?
  • ปัจจุบันคุณไม่มีทางเลือกนอกจากเปลี่ยนลำดับการแสดงผลโดยตรงจาก pages/index.tsx
  • ฉันกำลังคิดเกี่ยวกับวิธีจัดการกับข้อมูลหรือ payload _global
• ในกรณีของภาพ CSS 404 ใน index.html
  • #37 หมายเหตุ