Flixel | Addons | ui | Demos | Werkzeuge | Vorlagen | docs | haxeflixel.com
Dies ist die Quelle von haxeflixel.com. Es verwendet 11y für die statische Site -Generierung und Bootstrap 5 für das Styling.
Sie müssen NPM / NodeJS haben, um die Site zu kompilieren, Pull -Anfragen sind willkommen.
Installieren Sie Nodejs
Klonen und die Seite ausführen
git clone https://github.com/HaxeFlixel/haxeflixel.com.git
cd haxeflixel.comUm Abhängigkeiten zu installieren und die Website zu erstellen, führen Sie die folgenden Befehle aus:
# 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Öffnen Sie http: // localhost: 8080/
Starten Sie das Hacken, indem Sie den content/ , content/_layouts/ und content/_scss/ Verzeichnisse ändern. Die Site lädt nach dem Relladen, während Sie die von Ihnen geänderten Dateien speichern.
Weitere Entwicklungsinformationen finden Sie unter dem Code.
Wenn Sie unsere Website beitragen und verbessern möchten, arbeiten Sie bitte an einer Gabel- oder Feature -Filiale. Nur Arbeiten und getestete Änderungen werden in den Master zusammengefasst. Verwenden Sie das Problemsystem für die Unterstützung und Genehmigung für Entwickler für Ihre Änderungen.
Dokumentation für /documentation die automatisch aus dem Flixel-Docs-Repository abgerufen wird (über ein Paket.json preinstall Skript, in dem Skripte /Install-Flixel-docs-Repo.js ausgeführt werden).
Bitte überprüfen Sie die Readme im Flixel-Docs-Repo, um weitere Informationen zur Aktualisierung der HaxeFlixel.com/Documentation-Seiten zu erhalten.
Erstellen Sie eine .md -Datei in /content/demos folgen diesem Beispiel:
```
---
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 zeigt auf das Unterverzeichnis von Flixel-Demos, das die Demo enthält.
width und height standardmäßig 640 und 480 und sollten in diesem Fall weggelassen werden.
Demo-Name.png zu /static/demos/images hinzu..md -Datei in /content/showcase folgendermaßen nach diesem Beispiel: ---
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.
*.md , z. B. Go! Go! PogoGirl.png to /static/images/showcase . Sie werden geändert und auf 500 x 260 beschnitten, daher ist es am besten, das gleiche Verhältnis zu verwenden.Showcases, die offiziell nicht veröffentlicht werden, aber nur in Sonderfällen akzeptiert werden. Gleiches gilt für Spiele von Game Jams.
Neben der normalen Installation und Ausführen von Befehlen (siehe darüber) gibt es andere nützliche Befehle / Workflows.
Alles, was Sie benötigen, sollte mit npm install installiert werden. Mit VSCODE können Sie auch die empfohlenen Erweiterungen für die automatische Formatierung installieren (auf Datei speichern). Alle Workflows sollten jedoch über CLI vollständig verwendbar sein.
content/_static Alle statischen Dateien (normalerweise / meistens Bilder) werden mit ihren Verzeichnisinformationen in das Stammverzeichnis der Website kopiert. content/_static/images/ werden sich in out/images wenden und von der Website mit gerecht /images/ bezogen werden.
npm run start Durch das Ausführen npm run start wird die elf Site und die Sass .scss gestartet und Änderungen nachladen.
npm test Durch das Ausführen npm test werden Formatierungs- und Loting -Tests für das Projekt ausgeführt. Sie können einfach npm test ausführen, wenn Sie alle Tests ausführen möchten ( test:js , test:liquid und test:prettier ).
Sie können jedoch alternativ jeden Test einzeln ausführen.
npm run test:js testet JavaScript über Standard. Um automatisch alle zu beheben, können Sie npm run NPM Run Fix: JS` ausführen
npm run test:liquid testet, wenn der Standort über eleventy --dryrun baut.
npm run test:prettier wird die allgemeine Styling -Konsistenz mit hübscherem testen. Sie können npm run fix:prettier ausführen, um Inkonsistenzen zu beheben.
npm fix Durch das Ausführen npm fix wird das automatische Formatieren des Codes mit standardjs , .liquidrc und .prettierrc.yaml erfolgt. Normalerweise möchten Sie rennen, bevor Sie PR einreichen!