jsoncv

JSONCV

ชุดเครื่องมือสำหรับการสร้าง CV ของคุณด้วย JSON และสร้างไฟล์ HTML/PDF ที่มีสไตล์

JSONCV ประกอบด้วยส่วนประกอบดังต่อไปนี้:

1. สคีมา
2. บรรณาธิการ
3. CV HTML
4. เครื่องแปลง

สำหรับคำอธิบายเชิงลึกและแนวทางการใช้งานโปรดดูเอกสารด้านล่าง

การแนะนำ

สคีมา

JSONCV ใช้ JSON Schema เพื่อสร้างมาตรฐานที่ใช้ JSON สำหรับ CVS

สคีมาที่ใช้ใน JSONCV เป็นส้อมของสคีมาเรซูเม่ JSON โดยมีความแตกต่างดังต่อไปนี้:

• JSON Schema เวอร์ชัน

  JSON Resume ใช้เวอร์ชัน Draft-04 ที่ล้าสมัยในขณะที่ JSONCV ใช้ร่างปัจจุบัน -07 เพื่อให้แน่ใจว่าเข้ากันได้กับ Draft-07 อินสแตนซ์ทั้งหมดของ additionalItems ได้ถูกลบออก

• ส่วน sideProjects เพิ่มเติม

  JSONCV มีส่วนเพิ่มเติมที่เรียกว่า sideProjects ซึ่งช่วยให้เกิดความแตกต่างระหว่างโครงการด้านข้างและโครงการอาชีพ

• คุณสมบัติ name เพิ่มเติมในส่วน meta

  JSONCV มีคุณสมบัติ name ในส่วน meta ซึ่งอนุญาตให้ผู้ใช้ระบุชื่อที่ต้องการสำหรับไฟล์ HTML/PDF ที่ส่งออก

ความแตกต่างเหล่านี้ไม่ส่งผลกระทบต่อความเข้ากันได้ระหว่าง JSONCV และ JSON เรซูเม่ ซึ่งหมายความว่าคุณสามารถนำเข้าข้อมูล JSON กลับไปยัง JSONCV และในทางกลับกันได้อย่างง่ายดายเนื่องจากข้อมูล JSONCV จะผ่านการตรวจสอบความถูกต้องของสคีมาเรซูเม่ JSON

ความแตกต่างที่สมบูรณ์ระหว่างสคีมาเรซูเม่ JSON และสคีมา JSONCV สามารถดูได้ที่นี่

บรรณาธิการ

JSONCV มาพร้อมกับตัวแก้ไขออนไลน์ที่มีส่วนต่อประสานกราฟิกผู้ใช้สำหรับการสร้างและแก้ไขข้อมูล JSONCV ของคุณ เยี่ยมชมได้ที่ https://jsoncv.reorx.com/editor/

บรรณาธิการประกอบด้วยสามบานจากซ้ายไปขวา:

1. แถบด้านข้าง

   อนุญาตให้นำทางไปยังส่วนต่าง ๆ ในแบบฟอร์มสคีมาและให้การดำเนินการเช่น "ดาวน์โหลด HTML" และ "อัปโหลดข้อมูล"

2. รูปแบบสคีมา

   ให้คุณแก้ไขคุณสมบัติของข้อมูล CV ของคุณ คุณยังสามารถเลือกคุณสมบัติที่จะแสดงหรือซ่อน

3. ดูตัวอย่าง

   แสดง CV HTML ที่แสดงผลเมื่อมีการเปลี่ยนแปลงในรูปแบบสคีมา

CV HTML

ผลิตภัณฑ์หลักของ JSONCV คือ CV HTML ซึ่งเป็นตัวแทน HTML ของข้อมูล JSONCV ของคุณ มันเป็นเอกสาร HTML ขนาดกะทัดรัดที่สามารถแปลงเป็น PDF หรือโฮสต์ออนไลน์เพื่อสร้างเว็บไซต์ CV แบบคงที่

CV HTML ได้รับการออกแบบด้วยเลย์เอาต์เฉพาะเพื่อแสดง CV บนแผ่นกระดาษ A4 CSS ได้รับการปรับแต่งเพื่อเพิ่มประสิทธิภาพการพิมพ์เพื่อให้มั่นใจว่าการพิมพ์ที่ดีที่สุดไม่ว่าจะพิมพ์บนกระดาษหรือบันทึกเป็น PDF ดังนั้น CV HTML จึงเหมาะสมที่สุดสำหรับการสร้าง CVS/RESUMES ระดับมืออาชีพหรือวิชาการแทนที่จะเป็นเว็บไซต์พอร์ตโฟลิโอที่สร้างสรรค์หรือแบบโต้ตอบ

CV HTML รองรับธีมซึ่งสามารถพบได้ในไดเรกทอรี src/themes

หากต้องการรับ CV HTML โปรดดูข้อมูลการส่งออก CV และ HTML และสร้าง HTML ในเครื่อง

เครื่องแปลง

ตัวแปลงเป็นสคริปต์เพื่อช่วยให้ผู้ใช้แปลงข้อมูล JSONCV จาก/ไปยังแหล่งอื่น ๆ

ปัจจุบันมีตัวแปลงเพียงตัวเดียวเท่านั้น: rxresume-to-jsoncv.js ซึ่งแปลงข้อมูลที่ส่งออกจาก RxResume ไปสู่รูปแบบ JSONCV

หากคุณมีข้อกำหนดเพิ่มเติมใด ๆ โปรดส่งปัญหา คำขอดึงยังได้รับการชื่นชมอย่างมาก

การใช้งาน

เขียนประวัติส่วนตัวของคุณ

ขอแนะนำให้เขียน CV ของคุณโดยใช้โปรแกรมแก้ไขออนไลน์ อย่างไรก็ตามหากคุณพอใจกับ JSON คุณสามารถรักษาไฟล์ข้อมูลโดยใช้ตัวแก้ไขข้อความบนเครื่องในเครื่องของคุณ

เมื่อคุณเปิดตัวแก้ไขเป็นครั้งแรกข้อมูลตัวอย่างจะถูกโหลด คุณสามารถแก้ไขหรือคลิกปุ่ม "ใหม่" เพื่อเริ่มต้นด้วยรูปแบบที่ว่างเปล่า ข้อมูล CV ของคุณถูกบันทึกไว้ในเบราว์เซอร์ของคุณทุกครั้งที่คุณเปลี่ยนแปลงดังนั้นคุณไม่ต้องกังวลกับการสูญเสียงานของคุณ

หากคุณมีสำเนาข้อมูล CV ในเครื่องของคุณแล้วคุณสามารถคลิกปุ่ม "อัปโหลดข้อมูล" เพื่อโหลดลงในตัวแก้ไข

ส่งออกข้อมูล CV และ HTML

เมื่อคุณแก้ไขเสร็จแล้วคุณสามารถคลิกปุ่ม ดาวน์โหลด JSON เพื่อส่งออกข้อมูล CV ของคุณในรูปแบบ JSON

หากคุณต้องการส่งออก HTML ที่แสดงผลในบานหน้าต่างตัวอย่างเพียงคลิกปุ่ม ดาวน์โหลด HTML

โปรดทราบว่าคุณสามารถตั้งชื่อไฟล์ที่ส่งออกได้โดยเพิ่มคุณสมบัติ meta.name หากไม่ได้ระบุชื่อไฟล์จะถูกสร้างขึ้นโดยใช้การรวมกันของ basics.name และ meta.version

แปลง HTML เป็น PDF

เพื่อให้สิ่งต่าง ๆ ง่าย JSONCV ไม่ได้รวมหรือใช้เครื่องมือภายนอกใด ๆ เพื่อสร้าง PDF แต่คุณควรใช้ไฟล์ HTML ที่สร้างขึ้นเพื่อแปลงเป็นเอกสาร PDF ข้อกำหนดเพียงอย่างเดียวคือเบราว์เซอร์ที่ทันสมัย ขั้นตอนด้านล่างใช้ Google Chrome เป็นตัวอย่าง:

1. เปิดไฟล์ HTML ที่สร้างขึ้นใน Chrome

2. กด ⌘ P (หรือ ⌃ P ใน Windows) และกล่องโต้ตอบการพิมพ์จะเปิดขึ้น

3. ในกล่องโต้ตอบเลือก "ปลายทาง" เป็น "บันทึกเป็น PDF" และตรวจสอบให้แน่ใจว่ารายการทั้งหมดใน "ตัวเลือก" ไม่ได้รับการตรวจสอบ

   

4. คลิก "บันทึก" เพื่อบันทึกไฟล์ PDF ในระบบไฟล์ของคุณ

โปรดทราบว่า PDF ที่ส่งออกจาก Chrome อาจมีปัญหาบางอย่างเกี่ยวกับการคัดลอกข้อความ สำหรับข้อมูลเพิ่มเติมดูที่ส่วนคำถามที่พบบ่อย

สร้าง HTML ในพื้นที่

JSONCV ใช้ VITE เป็นเครื่องมือสร้างสถานที่คงที่ ไฟล์ index.html ในรูทของโครงการคือจุดเริ่มต้นสำหรับการสร้าง CV HTML แบบไฟล์เดียว

นี่คือขั้นตอนในการสร้าง CV HTML โดยใช้ข้อมูลของคุณเอง:

1. ตรวจสอบให้แน่ใจว่าคุณใช้ NodeJS เวอร์ชัน 18 หรือสูงกว่า

2. ติดตั้งการพึ่งพาโดยการรัน: npm run install

3. สร้าง CV HTML ของคุณโดยระบุตัวแปร DATA_FILENAME และ OUT_DIR ตัวแปรสภาพแวดล้อม:

    DATA_FILENAME="$HOME/Downloads/mycv/cv.json" OUT_DIR="$HOME/Downloads/mycv" npm run build
   

   สิ่งนี้จะสร้าง CV HTML ของคุณโดยใช้ไฟล์ข้อมูลที่อยู่ที่ $HOME/Downloads/mycv/cv.json และ HTML ที่สร้างขึ้นจะอยู่ใน $HOME/Downloads/mycv ไดเรกทอรี

ตัวแปรสภาพแวดล้อมต่อไปนี้ได้รับการสนับสนุนในกระบวนการสร้าง:

• DATA_FILENAME : ข้อมูล CV ที่จะใช้สามารถเป็นเส้นทางสัมพัทธ์หรือสัมบูรณ์
• OUT_DIR : ไดเรกทอรีเอาต์พุตสำหรับไฟล์ HTML ที่สร้างขึ้น
• THEME : ธีมที่จะใช้จะต้องเป็นหนึ่งในชื่อไดเรกทอรีใน src/themes/

ในการปรับแต่งสีหลักของชุดรูปแบบให้ปรับเปลี่ยนตัวแปร CSS สี-primary-color ใน index.scss โปรดทราบว่าการเปลี่ยนแปลงนี้จะส่งผลให้เกิดการเปลี่ยนแปลงที่ไม่มีอยู่ใน GIT หากคุณต้องการสร้าง HTML ด้วยตัวเองขอแนะนำให้คุณสร้างโครงการใหม่แทนที่จะแก้ไขซอร์สโค้ดใน JSONCV สำหรับคำแนะนำเกี่ยวกับวิธีการทำเช่นนี้โปรดดูส่วนการสร้างเว็บไซต์ CV แบบคงที่

สร้างเว็บไซต์ CV แบบคงที่

ไฟล์ index.html ที่สร้างขึ้นสามารถใช้ได้ทุกที่และบนแพลตฟอร์มโฮสติ้งใด ๆ เพียงอัปโหลดไปยังเว็บเซิร์ฟเวอร์และคุณจะมีเว็บไซต์ CV ออนไลน์ของคุณเอง ชุดรูปแบบในตัว "REORX" ยังรวมถึงการสนับสนุนที่ตอบสนองต่ออุปกรณ์มือถือ

อย่างไรก็ตามหากคุณต้องการการปรับแต่งเพิ่มเติมเช่นเว็บไซต์ CV ที่ https://cv.reorx.com/ ซึ่งมีส่วนท้ายพร้อมลิงก์ไปยังไฟล์ PDF และโฮมเพจของผู้แต่งคุณสามารถทำตามขั้นตอนเหล่านี้:

1. สร้างที่เก็บว่างเปล่า

2. เพิ่ม jsoncv เป็น submodule

    git submodule add https://github.com/reorx/jsoncv.git
   

3. ใส่ไฟล์ข้อมูล CV ของคุณเช่น cv.json ในโครงการ

4. เริ่มต้น package.json โดยใช้ npm init

5. ติดตั้ง JSONCV เป็นการพึ่งพาโดยใช้ npm i ./jsoncv

6. คัดลอก scripts และ devDependencies จาก ./jsoncv/package.json ไปยัง package.json จากนั้นเรียกใช้ npm i เพื่อติดตั้ง

7. Copy ./jsoncv/vite.json.js เป็น vite.json.js และทำการเปลี่ยนแปลงต่อไปนี้:

   • เปลี่ยนอินสแตนซ์ทั้งหมดของ ./src เป็น ./jsoncv/src src
   • เปลี่ยนค่าของ dataFilename เป็นไฟล์ข้อมูล CV ของคุณเช่น cv.json
   • เปลี่ยน renderData.theme เป็นธีมที่คุณต้องการใช้

8. Copy ./jsoncv/index.html เป็น index.html และเปลี่ยนอินสแตนซ์ทั้งหมดของ ./src เป็น ./jsoncv/src src จากนั้นคัดลอก ./jsoncv/index.scss ไปยัง index.scss

9. เรียกใช้ npm run build เพื่อทดสอบว่าทุกอย่างทำงานได้หรือไม่

หลังจากทำตามขั้นตอนเหล่านี้เสร็จแล้วตอนนี้คุณสามารถเพิ่มองค์ประกอบและสไตล์ของคุณเองใน index.html และ index.scss เพื่อปรับแต่งเว็บไซต์ CV ของคุณต่อไป คุณสามารถใช้ HTML, CSS และ JavaScript เพื่อเพิ่มการสร้างแบรนด์เลย์เอาต์และฟังก์ชั่นของคุณเอง

สร้างธีมของคุณเอง

JSONCV มีธีมในตัวหลายรูปแบบที่คุณสามารถใช้โดยตรงในตัวแก้ไขหรือเมื่อสร้างไซต์ CV แบบคงที่ หากคุณต้องการสร้างธีมที่กำหนดเองของคุณเองนี่คือวิธี:

ลำดับชั้นของระบบไฟล์สำหรับธีมมีดังนี้:

 src/themes
└── reorx
    ├── index.ejs
    └── index.scss

คุณสามารถเพิ่มธีมของคุณเองโดยการสร้างโฟลเดอร์ใหม่ภายใต้ src/themes ด้วยไฟล์ index.ejs และ index.scss

index.ejs เป็นเทมเพลต EJS ที่ใช้สำหรับการสร้างเนื้อหา CV ข้อมูลที่ส่งผ่านไปยังเทมเพลตมีโครงสร้างดังนี้:

• cv : ข้อมูล JSONCV ทั้งหมดที่สอดคล้องกับสคีมา JSONCV
• fn : ชุดของฟังก์ชั่นยูทิลิตี้
  • getCVTitle : รับชื่อ CV จากข้อมูล cv
  • reformatDate : แปลงสตริงวันที่เป็นรูปแบบที่ระบุ
  • getIconSVG : รับไอคอนสตริง SVG หรือองค์ประกอบ DOM จากชื่อไอคอน
  • noSchemaURL : ถอดสคีมา ( https:// ) คำนำหน้าของ URL

สำหรับข้อมูลเพิ่มเติมดูคำจำกัดความที่สมบูรณ์ใน SRC/Themes/Data.js

เมื่อคุณสร้างธีมใหม่ (ลองใช้ yourtheme เป็นตัวอย่าง) คุณสามารถเริ่มพัฒนาและดูตัวอย่างได้โดยเรียกใช้รหัสต่อไปนี้:

 THEME=yourtheme npm run dev-site

การร้องขอแบบดึงสำหรับการเพิ่มธีมใหม่จะได้รับการต้อนรับเสมอ

คุณสามารถตั้งชื่อธีมตามชื่อของคุณเองนี่คือสิ่งที่ฉันทำสำหรับธีม "Reorx" เพราะฉันคิดว่าชุดรูปแบบนั้นผูกพันกับความสวยงามและความเป็นส่วนตัวของนักพัฒนาอย่างแน่นหนาและคำทั่วไปอาจไม่ได้เป็นตัวแทนของธีมอย่างถูกต้อง

ซ้อนเทค

• Vite
• EJS
• SCSS
• ทำให้เป็นรูปธรรม
• AJV

คำถามที่พบบ่อย

ข้อความที่คัดลอกจาก PDF กลับด้าน

ใช่นี่เป็นปัญหาที่รู้จักกับคุณสมบัติ "Save As As PDF" ของ Chrome PDF ที่เกิดขึ้นสามารถมีข้อความที่ย้อนหลังเมื่อคัดลอกใน Preview.app บน MacOS

ปัญหานี้ได้รับการรายงานจากผู้ใช้หลายคนและไม่เฉพาะเจาะจงกับ JSONCV เท่าที่เห็นใน: "บันทึกเป็น PDF" สร้างเอกสารที่มีข้อความย้อนหลัง - ชุมชน Google Chrome

วิธีแก้ปัญหา: ใช้ Firefox หรือ Safari เพื่อรับ PDF

ลำดับของคุณสมบัติในการเปลี่ยนแปลง JSON ที่ส่งออกบางครั้ง

ดูคำสั่งซื้อออบเจ็กต์ JavaScript หรือไม่ - สแต็คล้น

สิ่งที่ต้องทำ

• รองรับ Markdown ในคุณสมบัติ summary และ description
• อนุญาตให้ปรับแต่งสีหลักสำหรับธีมปัจจุบัน
• ส่งออก PDF โดยตรง (โดยใช้คุณสมบัติการพิมพ์ของเบราว์เซอร์)
• รองรับสไตล์การตอบสนองสำหรับธีมเพื่อให้ไซต์ CV เป็นมิตรในการดูบนอุปกรณ์มือถือ
• เพิ่มธีมเพิ่มเติม
• อนุญาตให้เปลี่ยนธีมในตัวแก้ไข
• เพิ่มข้อมูลตัวอย่างเพิ่มเติม เมื่อคลิกปุ่ม "โหลดตัวอย่าง" กล่องโต้ตอบจะเปิดขึ้นทำให้ผู้ใช้สามารถเลือกจากภาษาต่างๆ

การให้เครดิต

JSONCV ไม่สามารถทำได้หากไม่มีโครงการที่ยอดเยี่ยมเหล่านี้ด้านล่าง:

• JSON ดำเนินการต่อ
• json-editor
• ทำให้เป็นรูปธรรม

การบริจาค

หากคุณคิดว่าโครงการนี้สนุกที่จะใช้หรือประหยัดเวลาลองให้กาแฟสักถ้วย :)

• ผู้สนับสนุน GitHub - Reorx
• ko -fi - reorx