تنزيل zerotocode - تنزيل رمز مصدر zerotocode

zerotocode

شفرة المصدر الأخرى

1.0.0

تنزيل

zerotocode.org

Zero to Code هي دورة مجانية عبر الإنترنت حول صنع الأشياء على الويب ، وذلك باستخدام تقنيات الويب الأساسية: HTML ، CSS ، و JavaScript. أريد أن تكون ZTC أفضل مكان على الويب لتعلم صنع الأشياء باستخدام التعليمات البرمجية. يستخدم Zero to Code CodeFrame كبيئة التعلم الخاصة به ، من أجل حامته ، حلقة التغذية المرتدة السريعة ، والتركيز على الأساسيات.

هذا هو مستودع المصدر الذي يحتوي على موقع Hugo لـ Zero to Code ، بما في ذلك جميع المناهج المفتوحة. يمكنك قراءة المزيد عن المشروع نفسه على الموقع.

المساهمة: المبتدئين ترحيب!

الصفر إلى الكود هو موقع ثابت مصمم مع هوغو. Hugo هو مولد موقع ثابت ، والذي يأخذ مستندات Markdown وقوالب HTML/CSS/JS وينشئ حزمة من ملفات HTML/CSS/JS ثابتة التي تشكل موقعًا ثابتًا. يمكنك معرفة المزيد حول كيفية استخدام Hugo في gohugo.io. يغطي هذا القسم من ReadMe كيفية العمل مع Hugo على مستودع ZTC.

توليد الموقع

يمكنك إنشاء إصدار جديد من الموقع الثابت من القوالب والصفحات المقلدة مرة واحدة عن طريق تشغيل hugo .

$ hugo
...
[some info about the generated files]

إذا كنت تكتب وتريد رؤية النتائج أثناء كتابة صفحة أو تعديل القوالب ، فيمكنك تشغيل خادم التطوير باستخدام hugo server -D .

$ hugo server -D
... serving development server at localhost:1313

عندما تبدأ الخادم بهذه الطريقة ، يمكنك الانتقال إلى localhost:1313 على متصفحك لمشاهدة إصدار مباشر من الموقع أثناء تعديله.

تخصيصات ZTC

لدى Zero to Code بعض التخصيصات التي نستخدمها على رأس وظائف Hugo العارية لجعل البرامج التعليمية أكثر فعالية.

كتل الكود المرتفع بناء على أزرار "جرب هذا".

أهم تخصيص لديها ZTC على رأس Hugo هو الطريقة التي نبني بها كتل الرمز المرتفع بناء على بناء الجملة. بدلاً من استخدام بناء جملة Backtick Triple-Backtick من Markdown ، نستخدم بناء جملة Hugo المخصص لتحديد كتلة رمز مميزة بناء الجملة ، مثل هذا:

 {{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}

يمكنك أيضًا تحديد كتلة رمز css أو javascript بدلاً من html ، ويمكننا إخبار Hugo بتسليط الضوء على خطوط معينة مع بناء جملة "hl_lines=N1 N2 N3-N5" .

 {{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}

عندما نحدد كتلة رمز مميزة بهذه الطريقة ، على صفحات single.html (صفحات تعليمية واحدة) ، لدينا أيضًا برنامج نصي يمر عبر كتل رمز ED .highlight على الصفحة ويضيف تجربة This -> في الجزء العلوي اليمين لكل كتلة رمز ، والذي يفتح الكود مع عينة الكود المحددة.

محرري الكود الإقليمي المدمج

في بعض الأحيان نريد تضمين مثيل تفاعلي مباشر لمحرر CodeFrame على الصفحة. حاليًا ، أفضل طريقة للقيام بذلك هي إنشاء .fixed.button.liveEditorContainer Div الذي يحتوي على عنصر <iframe> يشير إلى عنوان URL لمحرر CodeFrame ، مثل هذا المثال من الدرس العام.

 < div class =" liveEditorContainer fixed button " >
    < iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >

هذا يضمن محرر CodeFrame المحدد بواسطة عنوان URL على الصفحة ، بالحجم الأيمن.

فئة `button` والمربعات مع الظلال

يتم رفع معظم العناصر التفاعلية وعناصر معينة مؤكدة (مثل كتل الرمز المميزة والصور) من سطح الصفحة مع ظل. فئة .button ، المستوردة من ورقة أنماط CodeFrame ، هي المسؤولة عن هذا التطبيق. عندما تريد إنشاء بعض العناصر التي يتم رفعها مع ظل مربع مثل أزرار CodeFrame ، استخدم فئة .button .

إذا كنت تريد ألا يكون العنصر تفاعليًا ، فيمكنك تطبيق فصول .fixed.button على العنصر ، والتي ستعطيل التحوم والرسوم المتحركة النشطة على الزر.