الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

فليكسل | addons | ui | العروض التوضيحية | أدوات | قوالب | مستندات | haxeflixel.com

عن

هذا هو مصدر haxeflixel.com. ويستخدم 11ty لتوليد الموقع الثابت ، و Bootstrap 5 للتصميم.

يجب أن يكون لديك NPM / NODEJS لتجميع الموقع ، وطلبات السحب مرحب بها.

  1. تثبيت Nodejs

  2. استنساخ وتشغيل الموقع 

    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

  3. افتح http: // localhost: 8080/

  4. ابدأ بالقرصنة عن طريق تعديل content/ content/_layouts/ ، content/_scss/ الدلائل. سيعيش الموقع إعادة تحميل أثناء حفظ الملفات التي تعدلها.

انظر رمز المساهمة لمزيد من معلومات التطوير.

الوثائق المساهمة (العروض التجريبية والعروض)

إذا كنت ترغب في المساهمة وتحسين موقعنا على الويب ، فيرجى العمل على شوكة أو فرع ميزة. سيتم دمج التغييرات والاختبار فقط في الماجستير. استخدم نظام المشكلات لدعم المطور والموافقة على التغييرات الخاصة بك.

كيفية إضافة الوثائق

يتم سحب وثائق /documentation تلقائيًا من مستودع Flixel-DOCS (عبر Package.json preinstall Script الذي يقوم بتشغيل البرامج النصية /التثبيت-فليكسل-docs-repo.js).

يرجى مراجعة README في REPO FLIXEL-DOCS لمزيد من المعلومات حول تحديث صفحات 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 ويجب حذفه في هذه الحالة.

  1. أضف لقطة شاشة للتوضيح المسمى 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.
  1. أضف لقطة شاشة للعرض باستخدام نفس العنوان المستخدم في ملف *.md ، على سبيل المثال Go! Go! PogoGirl.png إلى /static/images/showcase . يتم تغيير حجمها واختصاصها إلى 500 × 260 ، لذلك من الأفضل استخدام نفس النسبة.

المعارض التي لم يتم إصدارها رسميًا ولكن لا يتم قبولها إلا في الحالات الخاصة. وينطبق الشيء نفسه على الألعاب من مربيات اللعبة.

رمز المساهمة

جنبا إلى جنب مع تثبيت وتشغيل الأوامر بشكل طبيعي (انظر حول) ، هناك أوامر / سير عمل أخرى مفيدة.

يجب تثبيت كل ما تحتاجه مع npm install . باستخدام VSCODE ، يمكنك أيضًا تثبيت الامتدادات الموصى بها للتنسيق التلقائي (في ملف حفظ). ومع ذلك ، يجب أن تكون جميع مهام سير العمل قابلة للاستخدام بالكامل عبر CLI.

content/_static

يتم نسخ جميع الملفات الثابتة (عادة / معظمها من الصور) إلى دليل الجذر للموقع مع معلومات الدليل الخاصة بهم. لذلك content/_static/images/ سوف يتحول إلى out/images ، ويجب الرجوع إليه من الموقع مع Just /images/ .

أوامر مفيدة

npm run start

سيبدأ تشغيل npm run start في موقع Extense و SASS .SCSS ، وسيتم إعادة تحميله على التغييرات.

npm test

سيقوم تشغيل npm test بتنسيق واختبار الاختبارات للمشروع. يمكنك ببساطة تشغيل npm test إذا كنت ترغب في تشغيل جميع الاختبارات ( test:js ، test:liquid والاختبار test:prettier ).

ومع ذلك ، يمكنك بدلاً من ذلك تشغيل كل اختبار بشكل فردي.

  • npm run test:js JavaScript عبر القياسي. لإصلاح كل شيء تلقائيًا ، يمكنك تشغيل npm run NPM Run Fix: JS`

  • npm run test:liquid ما إذا كان الموقع يبني عبر eleventy --dryrun .

  • npm run test:prettier اتساقًا للتصميم باستخدام أجمل. يمكنك تشغيل npm run fix:prettier كوسيلة سهلة لإصلاح التناقضات.

npm fix

سيقوم تشغيل npm fix بتنسيق تلقائي إلى الكود لمطابقته مع standardjs و .liquidrc و .prettierrc.yaml . عادة ما تريد تشغيلها قبل تقديم العلاقات العامة!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل