หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

เว็บไซต์โครงการ Quilt

เว็บไซต์สำหรับโครงการ Quilt

การบริจาค

ไซต์นี้สร้างขึ้นด้วย Astro, MDX และ I18NEXT มันโฮสต์บนหน้า CloudFlare หากคุณต้องการทำความคุ้นเคยกับ Astro มากขึ้นคุณสามารถอ่านเอกสารประกอบได้

หากคุณติดอยู่หรือมีคำถามโปรดเข้าร่วมกับเราในเธรด #Website บนเซิร์ฟเวอร์ Discord ของเรา

ตัวเลือก IDE/Editor

ตัวแก้ไขที่ง่ายที่สุดที่จะใช้คือ Visual Studio Code (VSCODE) เนื่องจากมีส่วนขยายภาษาอย่างเป็นทางการสำหรับ ASTRO และ MDX เมื่อคุณเปิดพื้นที่เก็บข้อมูลใน VSCODE คุณจะเห็นป๊อปอัปในมุมล่างขวาเพื่อติดตั้งส่วนขยายที่แนะนำ นอกจากนี้คุณยังสามารถพิมพ์ @recommended ในแถบค้นหาส่วนขยายเพื่อเรียกดูส่วนขยายที่แนะนำและติดตั้งด้วยตนเองที่คุณต้องการ

หากคุณไม่ต้องการใช้ VSCODE คุณสามารถใช้ตัวแก้ไขใด ๆ ที่รองรับชุดย่อยของเครื่องมือต่อไปนี้ตามสิ่งที่คุณทำ:

  • หากคุณเพียงแค่ต้องการเขียนบทความบล็อกหรือแก้ไขหน้าซึ่งส่วนใหญ่เป็นข้อความที่เรียบง่ายคุณต้องมีตัวแก้ไขที่รองรับ Markdown เท่านั้น
  • หากคุณต้องการทำงานกับเลย์เอาต์หรือส่วนประกอบคุณต้องมีตัวแก้ไขพร้อมการสนับสนุนไฟล์. Aastro เช่น:
    • ข้อความประเสริฐพร้อมส่วนขยาย Astro
    • NeoVim กับ Tree-Sitter-Astro และ Astro Lspconfig
    • Jetbrains Intellij Idea Ultimate หรือ Webstorm พร้อมส่วนขยาย Astro
  • หากคุณต้องการทำงานกับหน้าเว็บที่ซับซ้อนมากขึ้นคุณอาจต้องการตัวแก้ไขที่สนับสนุน MDX แม้ว่าบรรณาธิการจำนวนมากที่มีการสนับสนุน Markdown MDX นั้นค่อนข้างแม่นยำ
  • หากคุณต้องการทำงานกับระบบ I18N คุณอาจต้องการตัวแก้ไขที่สนับสนุน Flueent อย่างไรก็ตามสิ่งนี้ไม่จำเป็นอย่างยิ่งหากคุณต้องการแปลเว็บไซต์เท่านั้น

การตั้งค่าสภาพแวดล้อมการพัฒนา

ดังที่ได้กล่าวไว้ก่อนหน้านี้เว็บไซต์ถูกสร้างขึ้นโดยใช้ Astro ซึ่งเขียนด้วย TypeScript ดังนั้นคุณจะต้องใช้งาน JavaScript ที่เข้ากันได้กับ Node.js เพื่อสร้างและเรียกใช้เพื่อการพัฒนา หากคุณมีส่วนร่วมอย่างง่าย ๆ เช่น mod ที่เข้ากันไม่ได้หรือโพสต์บล็อกการตั้งค่าสภาพแวดล้อมการพัฒนาไม่จำเป็น: เวอร์ชันตัวอย่างของเว็บไซต์จะถูกสร้างขึ้นเมื่อคุณส่งคำขอดึงเพื่อให้แน่ใจว่าทุกอย่างทำงานได้ตามที่คาดไว้

การติดตั้ง node.js

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

การติดตั้ง PNPM

เราใช้ PNPM เป็นตัวจัดการแพ็คเกจ Node.js ของเรา สามารถติดตั้งได้ด้วยวิธีต่อไปนี้:

  • การใช้ NPM (รวมอยู่ใน node.js): npm install -g pnpm
  • ใช้ตัวจัดการแพ็คเกจอื่น

สำหรับตัวเลือกเพิ่มเติมดูเอกสารของ PNPM

การตั้งค่าโครงการ

ภายในโครงการติดตั้งแพ็คเกจที่จำเป็นทั้งหมดโดยใช้ PNPM: 

pnpm i

เรียกใช้เซิร์ฟเวอร์ dev

Astro มีเซิร์ฟเวอร์การพัฒนาที่โหลดตัวเองซ้ำโดยอัตโนมัติเมื่อคุณเปลี่ยนไฟล์ภายในโครงการ ในการเริ่มต้นให้เรียกใช้ pnpm dev : 

 > pnpm dev
15:05:32 [types] Generated 1ms

 astro  v4.15.2 ready in 702 ms

┃ Local	http://localhost:4321/
┃ Network  use --host to expose

15:05:32 watching for file changes...

เซิร์ฟเวอร์ dev สร้างหน้าในขณะที่คุณเยี่ยมชมเพื่อลดเวลาเริ่มต้นดังนั้นประสิทธิภาพของมันจึงแย่กว่าไซต์ที่สร้างขึ้นอย่างเต็มที่

การสร้างเว็บไซต์

เพื่อสร้างสำเนาเต็มของไซต์สุดท้าย: 

 pnpm build

ไซต์จะถูกสร้างขึ้นใน dist/ Folder การสร้างเว็บไซต์เป็นวิธีที่มีประโยชน์ในการตรวจสอบว่าคุณไม่ได้ทำอะไรเลยโดยไม่สังเกตเห็น

คุณสามารถดูตัวอย่างไซต์ที่สร้างขึ้นโดยใช้ pnpm astro preview แต่ในกรณีส่วนใหญ่ข้อได้เปรียบเพียงอย่างเดียวที่มีเหนือเซิร์ฟเวอร์ Dev คือประสิทธิภาพ

ดูตัวอย่างด้วย CloudFlare Wrangler

หากคุณต้องการทดสอบฟังก์ชั่นเฉพาะของหน้า CloudFlare (เช่นอะไรก็ตามใน functions/ ไดเรกทอรี) คุณสามารถดูตัวอย่างเว็บไซต์โดยใช้ Wrangler Clito ของ CloudFlare เลียนแบบการปรับใช้หน้า CloudFlare

ก่อนอื่นติดตั้ง wrangler 

pnpm install -g wrangler

สร้างเว็บไซต์: 

pnpm build

เรียกใช้โฟลเดอร์ dist ที่ส่งออกโดยใช้ Wrangler: 

 wrangler pages dev dist

ซึ่งแตกต่างจากเซิร์ฟเวอร์ dev ของ Astro Wrangler สามารถดูตัวอย่างไซต์ที่สร้างขึ้นได้อย่างสมบูรณ์เท่านั้น

สถาปัตยกรรม

สำหรับคำอธิบายโดยละเอียดเกี่ยวกับวิธีการจัดเก็บข้อมูลให้ดู ARCHITECTURE.md

ผลงานทั่วไป

คำแนะนำสำหรับการทำเงินบริจาคประเภทต่างๆ

การเพิ่ม mod ที่เข้ากันไม่ได้

เปิดไฟล์ incompatible-mods.json ใน public/api/v1/incompatible-mods.json และเพิ่มรายการใหม่ที่ด้านล่างของรายการ

รายการของคุณต้องมีฟิลด์ต่อไปนี้:

  • "ids": - รายการ MOD ID ที่ได้รับผลกระทบ
  • "Name": - ชื่อเต็มของ mod ที่ได้รับผลกระทบ
  • "type": - ประเภทของความไม่ลงรอยกัน สามารถเป็นหนึ่งในสิ่งต่อไปนี้:
    • "GAME" - ขัดข้องหรือทำลายเกมวานิลลา
    • "OTHERS" - แบ่งตัวดัดแปลงอื่นอย่างน้อยหนึ่งรายการ
    • "SELF" - แตกตัวเอง
    • "WORKAROUND" - มีวิธีแก้ปัญหาที่ช่วยให้สามารถทำงานได้อย่างถูกต้อง
  • "Status": - ความเข้ากันไม่ได้ใกล้เข้ามาใกล้แค่ไหน สามารถเป็นหนึ่งในสิ่งต่อไปนี้:
    • "BLOCKED" - ผู้เขียน MOD ตระหนักถึงปัญหา แต่การแก้ไขจะถูกบล็อกโดยปัจจัยภายนอก
    • "IN_PROGRESS" - ผู้เขียน mod กำลังใช้การแก้ไข
    • "NO_ANSWER" - มีการรายงานปัญหา แต่ผู้เขียน MOD ยังไม่ได้ตอบกลับ
    • "ON_HOLD" - ผู้เขียน MOD กำลังรอการใช้งานหรือปล่อยการแก้ไข
    • "UNKNOWN" - ปัญหายังไม่ได้รับการรายงานไปยังผู้เขียน MOD หรือคุณไม่พบรายงาน
    • "WONT_FIX" - มีการรายงานปัญหาแล้ว แต่ผู้เขียน mod ปฏิเสธที่จะแก้ไข
  • "tracking": - ลิงก์ไปยังรายงานการติดตามความไม่ลงรอยกันตัวอย่างเช่นปัญหา GitHub ตั้งค่าเป็น "UNKNOWN" ถ้าคุณไม่รู้
  • "notes": (ไม่บังคับ) - บันทึกอื่น ๆ เช่นวิธีแก้ปัญหา A ที่รู้จัก

การเขียนโพสต์บล็อก

สร้างไฟล์ Markdown ใหม่ใน src/pages/en/blog ชื่อที่มีวันที่ปัจจุบันและชื่อรุ่นที่สั้นลง วันที่ควรอยู่ในรูปแบบ yyyy-mm-dd และชื่อควรอยู่ในตัวพิมพ์เล็กและคั่นด้วยยัติภังค์ ( - ) ตัวอย่างเช่น 2024-03-09-example-post.md โพสต์

ที่ด้านบนของไฟล์คุณต้องเพิ่ม เรื่องด้านหน้า ซึ่งเป็นข้อมูลเมตาที่เขียนใน Yaml ด้านหน้าของโพสต์บล็อกมีลักษณะเช่นนี้: 

---
title : " An Example Title " # The full title of the post
date : 2024-09-03 20:00:00 -00:00 #	The date, time, and timezone that the post was written, relative to UTC. It is best practice to give the time in UTC and use an offset of -00:00, as shown.
authors : # A list of one or more authors
- Pineapple
layout : /src/layouts/Post.astro # This tells Astro what layout to use for the page, and should always be the same.
---

เขียนย่อหน้าแรกจากนั้นใส่สองบรรทัดใส่ <!-- MORE --> จากนั้นอีกสองบรรทัด ตัวอย่างเช่น: 

 A succinct first paragraph.

<!-- MORE -->

More text here.

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

อัปเดตบัตรสมาชิกในทีมของคุณ

หากคุณเป็นส่วนหนึ่งของหนึ่งในนักพัฒนาหรือทีมชุมชนของ Quilt คุณอาจมีบัตรในหน้ารายชื่อทีมของเว็บไซต์ ข้อมูลภายในการ์ดในหน้านี้สร้างขึ้นจากไฟล์ TeamData.mjs ใน src/data/

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

คุณสามารถเปลี่ยนข้อมูลต่อไปนี้เพื่อปรับแต่งการ์ดของคุณ:

  • name: - ชื่อที่ด้านบนของการ์ดของคุณ มันสามารถเป็นอะไรก็ได้ที่คุณต้องการ
  • discord: - ชื่อผู้ใช้ Discord ของคุณ
  • github: - ชื่อผู้ใช้ GitHub ของคุณ สิ่งนี้ใช้เพื่อระบุว่าทีมใดที่คุณอยู่ใน GitHub
  • avatar: - นี่คือ URL สำหรับภาพใด ๆ ที่คุณชอบ เพื่อผลลัพธ์ที่ดีที่สุดควรเป็นสี่เหลี่ยมจัตุรัสและไม่ใหญ่เกินไป คุณสามารถใส่ไฟล์ใน public/assets/team/images เพื่อให้โฮสต์บนเว็บไซต์หรือใช้ URL รูปภาพอื่น ๆ ที่คุณต้องการ
  • description: (ไม่บังคับ) - ประโยคหรือย่อหน้าเล็ก ๆ เกี่ยวกับว่าคุณเป็นใคร
  • links: (ไม่บังคับ) - รายการลิงก์ไปยังหน้าเว็บต่างๆหรือโปรไฟล์โซเชียลมีเดีย แต่ละลิงค์แสดงด้วยวัตถุต่อไปนี้:
    • icon : ไอคอนที่แสดงถึงลิงก์ คุณสามารถเลือกจากชุดไอคอนชุด CoreUI ( cib: :), ไอคอนการออกแบบวัสดุ ( mdi: :) หรือสัญลักษณ์วัสดุ ( material-symbols: :); หรือใช้ไอคอนที่กำหนดเองของเราสำหรับ Curseforge ( curseforge ) และ Modrinth ( modrinth-small ) เมื่อใช้ไอคอนจากชุดไอคอน (ตรงข้ามกับแบบกำหนดเอง) คุณต้องนำหน้าชื่อไอคอนด้วยชื่อของชุดไอคอนตัวอย่างเช่น cib:youtube เพื่อใช้ไอคอน youtube จากแบรนด์ CoreUi
    • url : ลิงก์ไปยังหน้าเว็บ
  • systemMembers: (ไม่บังคับ) - ฟิลด์นี้มีไว้สำหรับระบบพหูพจน์เพื่อแสดงสมาชิกแต่ละคน มีค่าที่เป็นไปได้เล็กน้อย:
    • "---" จะแสดงให้คุณเห็นว่าเป็นระบบพหูพจน์กับสมาชิกของคุณซ่อนตัว
    • ID ระบบ Pluralkit จะดึงข้อมูลและแสดงชื่อและอวตารของสมาชิกสาธารณะทั้งหมดของระบบนั้นโดยอัตโนมัติ
    • คุณสามารถสร้างระบบด้วยตนเองโดยใช้รายการวัตถุต่อไปนี้:
      • name: ชื่อของสมาชิกระบบ
      • icon: - อวตารสำหรับสมาชิก คุณสามารถใช้ URL ใด ๆ ที่คุณต้องการหรือโฮสต์รูปภาพในเว็บไซต์นี้ใน public/assets/team/images/<your-system-name>/
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด