krashna site

เว็บไซต์ครัสนา มูสิกา

เครื่องมือสร้างไซต์แบบคงที่สำหรับไซต์ของสมาคมดนตรีนักเรียนของ Delft Krashna Musika ที่สร้างด้วย React และ Gatsby.js

การติดตั้ง

ในการเริ่มต้น คุณจะต้องมีสภาพแวดล้อม Node.js และตัวจัดการแพ็คเกจ Yarn เมื่อคุณติดตั้งแล้ว ให้รันคำสั่งต่อไปนี้จากไดเร็กทอรีรากของ repo นี้:

yarn
yarn global add gatsby-cli

วิ่ง

การพัฒนา

หากต้องการเริ่มเซิร์ฟเวอร์การพัฒนา (พร้อมการโหลดซ้ำจริง) ให้รัน:

yarn develop

ตอนนี้จะมีเซิร์ฟเวอร์ที่รับฟังบน localhost:8000!

การผลิต

หากต้องการสร้างบันเดิลการใช้งานจริง ให้รัน:

yarn build

การเปลี่ยนแปลงในสาขา master จะถูกปรับใช้กับไซต์ที่ใช้งานอยู่โดยอัตโนมัติ (ที่ krashna.nl) ผ่านทางบริการ Netlify build

เอกสารประกอบ

โครงสร้างโดยรวม

โดยทั่วไป โปรเจ็กต์นี้จะเป็นไปตามโครงสร้างโฟลเดอร์ Gatsby.js ทั่วไป:

• หน้าถูกกำหนดไว้ใน /src/pages ชื่อไฟล์ของไฟล์ JS แต่ละไฟล์ (ไม่รวมนามสกุล .js ) จะถูกใช้เป็น URL ของหน้าที่เกี่ยวข้อง
• เทมเพลตเพจ (โครงสร้างต้นแบบสำหรับลักษณะของเพจประเภทต่างๆ) อยู่ใน /src/templates
• ส่วนประกอบที่เพจและเทมเพลตเหล่านี้ใช้มีอยู่ในโฟลเดอร์ /src/components

อย่างไรก็ตาม มีหลายวิธีที่จะนำเสนอความเป็นสากลและคุณลักษณะอื่นๆ:

• คำแปลทั้งหมดอยู่ในไฟล์ YAML ของโฟลเดอร์ /src/locales แต่ละโฟลเดอร์ย่อยประกอบด้วยสำเนาของไฟล์คำจำกัดความการแปลแต่ละไฟล์ในภาษาเฉพาะ ไฟล์แปลเหล่านี้รวบรวมเป็น JSON ซึ่งให้บริการควบคู่ไปกับเนื้อหาที่เหลือและแทรกแบบไดนามิกลงในเพจขณะรันไทม์ เราใช้ไลบรารี react-intl ซึ่งบูรณาการโดย gatsby-plugin-intl สำหรับการแปล
• ข้อมูลทั้งหมดที่อิงตามการสร้างเพจ เช่น รายการคอนเสิร์ต มีอยู่ใน /src/data

การเพิ่มเนื้อหา

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

การเพิ่มหน้า

หากต้องการเพิ่มหน้า...

1. เพิ่มไฟล์ JS ใน /src/pages โดยมีชื่อ URL ที่คุณต้องการใส่หน้านั้น หากมีข้อสงสัยเกี่ยวกับวิธีการจัดโครงสร้างไฟล์นี้ โปรดดูที่หน้าอื่นๆ ที่มีอยู่ในโฟลเดอร์นั้น
2. เพิ่มคำแปลที่จำเป็นสำหรับคีย์การแปลที่คุณใช้ใน /src/locales โปรดดูหน้าที่มีอยู่และการแปลเพื่อดูตัวอย่างวิธีที่เราสามารถเข้าถึงคีย์การแปลในไฟล์เพจ และวิธีการกำหนดสิ่งนี้ในไฟล์การแปล

เพิ่มคอนเสิร์ต

เพื่อเพิ่มคอนเสิร์ต...

1. เพิ่มรายการลงในรายการ /src/data/concerts.yaml ตามรูปแบบเดียวกันกับรายการอื่นๆ
2. เพิ่มข้อความที่ขึ้นอยู่กับภาษาลงในไฟล์ concerts.yaml ในโฟลเดอร์ /src/locales ในทั้งสองภาษา

การเพิ่มโพสต์ข่าว

หากต้องการเพิ่มโพสต์ข่าว...

1. เพิ่มรายการลงในรายการ /src/data/news.yaml ตามรูปแบบเดียวกันกับรายการอื่นๆ
2. เพิ่มข้อความที่ขึ้นอยู่กับภาษาลงในไฟล์ news.yaml ในโฟลเดอร์ /src/locales ในทั้งสองภาษา