haxeflixel.com

Flixel | Addons | UI | การสาธิต | เครื่องมือ | เทมเพลต เอกสาร | haxeflixel.com

เกี่ยวกับ

นี่คือแหล่งที่มาของ haxeflixel.com ใช้ 11 สิบสำหรับการสร้างไซต์แบบคงที่และ Bootstrap 5 สำหรับการจัดแต่งทรงผม

คุณต้องมี NPM / NODEJS เพื่อรวบรวมเว็บไซต์ยินดีต้อนรับคำขอดึง

0. ติดตั้ง nodejs

1. โคลนและเรียกใช้เว็บไซต์

   git clone https://github.com/HaxeFlixel/haxeflixel.com.git
   cd haxeflixel.com

   ในการติดตั้งการพึ่งพาและสร้างไซต์ให้เรียกใช้คำสั่งต่อไปนี้:

    # downloads dependencies, and clones flixel-docs
   npm install
   
   # runs the start command from package.json, which boots up the static site generator and scss styling for live reload
   npm run start

2. เปิด http: // localhost: 8080/

3. เริ่มแฮ็คออกไปโดยการแก้ไข content/ , content/_layouts/ , และ content/_scss/ ไดเรกทอรี เว็บไซต์จะโหลดซ้ำในขณะที่คุณบันทึกไฟล์ที่คุณแก้ไข

ดูรหัสที่มีส่วนร่วมสำหรับข้อมูลการพัฒนาเพิ่มเติม

เอกสารประกอบ (การสาธิตและการจัดแสดง)

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

วิธีเพิ่มเอกสาร

เอกสารสำหรับ /documentation ที่ดึงโดยอัตโนมัติจากที่เก็บ Flixel-Docs (ผ่าน package.json preinstall สคริปต์ที่เรียกใช้สคริปต์ /ติดตั้ง flixel-docs-repo.js)

โปรดตรวจสอบ readme ใน flixel-docs repo สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดตหน้า haxeflixel.com/documentation

วิธีเพิ่มการสาธิต

1. สร้างไฟล์ .md ใน /content/demos ตามตัวอย่างนี้:

    ```
       ---
       title: "Demo-Name"
       layout: demo
       width: 800
       height: 500
       source: "flixel-demos-subdirectory/Demo-Name"
       ---
       Here goes the actual description of the demo in  GitHub-Flavored-Markdown:
       * What the demo displays
       * Who created it
       * What the controls are
       * etc
   
       HTML is still allowed and can be used for more advanced descriptions.
   
   ```
   

   source ที่มาชี้ไปที่ไดเรกทอรีย่อยของ Flixel-Demos ที่มีการสาธิต

width และ height เริ่มต้นเป็น 640 และ 480 และควรละเว้นในกรณีนั้น

2. เพิ่มภาพหน้าจอของการสาธิตชื่อ Demo-Name.png ถึง /static/demos/images

วิธีเพิ่มเกมโชว์เคส

1. สร้างไฟล์ .md ใน /content/showcase ตามตัวอย่างนี้:

    ---
    layout: showcase
    title: "Go! Go! PogoGirl"
    itch: https://ohsat-andrej.itch.io/go-go-pogogirl
    website: https://www.ohsat.com/game/go-go-pogogirl/
    steam: https://store.steampowered.com/app/1681010/Go_Go_PogoGirl/
    switch: https://www.nintendo.com/store/products/go-go-pogogirl-switch/
    ps4: https://store.playstation.com/en-us/product/UP0891-PPSA10169_00-GOGOPOGOGIRLRATG
    xbox: https://www.microsoft.com/store/productid/9P10H7L6QCCJ
    date: "2022-02-01"
    ---

    Dates should use YYYY-MM-DD

    Note that by adding a URL to one of the supported targets, the icon will automatically become coloured on the
    [showcase page](https://haxeflixel.com/showcase) and link to that URL.

2. เพิ่มภาพหน้าจอของ Showcase โดยใช้ชื่อเดียวกันที่ใช้ในไฟล์ *.md เช่น Go! Go! PogoGirl.png ถึง /static/images/showcase พวกเขามีขนาดและถูกครอบตัดเป็น 500x260 ดังนั้นจึงเป็นการดีที่สุดที่จะใช้อัตราส่วนเดียวกัน

โชว์ผลงานที่ยังไม่ได้รับการปล่อยตัวอย่างเป็นทางการ แต่ได้รับการยอมรับในกรณีพิเศษเท่านั้น เช่นเดียวกับเกมจากเกมติดขัด

รหัสที่มีส่วนร่วม

พร้อมกับการติดตั้งและเรียกใช้คำสั่งตามปกติ (ดูเกี่ยวกับ) แล้วยังมีคำสั่ง / เวิร์กโฟลว์ที่มีประโยชน์อื่น ๆ

ทุกสิ่งที่คุณต้องการควรติดตั้งด้วย npm install การใช้ VSCODE คุณยังสามารถติดตั้งส่วนขยายที่แนะนำสำหรับการจัดรูปแบบอัตโนมัติ (บนไฟล์บันทึก) อย่างไรก็ตามเวิร์กโฟลว์ทั้งหมดควรใช้งานได้ทั้งหมดผ่าน CLI

content/_static

ไฟล์คงที่ทั้งหมด (โดยปกติ / ภาพส่วนใหญ่) จะถูกคัดลอกไปยังไดเรกทอรีรากของไซต์ด้วยข้อมูลไดเรกทอรีของพวกเขาที่เก็บไว้ในเวลา ดังนั้น content/_static/images/ จะเปิด out/images และควรอ้างอิงจากเว็บไซต์ด้วย Just /images/

คำสั่งที่เป็นประโยชน์

npm run start

การเรียกใช้ npm run start จะเริ่มต้นขึ้นไซต์ Eleventy และ SASS .SCSS และจะโหลดการเปลี่ยนแปลงอีกครั้ง

npm test

npm test จะเรียกใช้การจัดรูปแบบและการทดสอบผ้าสำลีสำหรับโครงการ คุณสามารถเรียกใช้ npm test ได้หากคุณต้องการเรียกใช้การทดสอบทั้งหมด ( test:js , test:liquid และ test:prettier )

อย่างไรก็ตามคุณสามารถเรียกใช้การทดสอบแต่ละครั้งเป็นรายบุคคล

• npm run test:js จะทดสอบ JavaScript ผ่านมาตรฐาน หากต้องการแก้ไขทั้งหมดโดยอัตโนมัติคุณสามารถเรียกใช้ npm run NPM Run Run Fix: JS`

• npm run test:liquid จะทดสอบว่าไซต์สร้างผ่าน eleventy --dryrun

• npm run test:prettier จะทดสอบความสอดคล้องของสไตล์ทั่วไปโดยใช้ Prettier คุณสามารถเรียกใช้ npm run fix:prettier เป็นวิธีที่ง่ายในการแก้ไขความไม่สอดคล้องกัน

npm fix

การเรียกใช้ npm fix จะทำการจัดรูปแบบอัตโนมัติไปยังรหัสเพื่อให้ตรงกับ standardjs , .liquidrc และ .prettierrc.yaml โดยปกติคุณต้องการเรียกใช้ก่อนที่จะส่ง PR!