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

⚡ ثابت - القوة النقية للبساطة.

مولد موقع ثابت ستحبه. لا توجد تكوينات أكثر تعقيدًا ، أو أطر عمل متضخمة ، أو تشعر وكأنك ركلك في وجهه من قبل حصان! ها هو الدبل:

  • ثابت سهل .
  • HTML سهل .
  • ومع ذلك ، فقدنا بطريقة ما فن صياغة مواقع HTML ثابتة بسيطة

لم يعد هذا الوقوف! ثابت هنا لاستعادة عرش البساطة!

الإعداد في المفاجئة

تأكد من تثبيت عقدة على جهازك ، ثم قم بنسخ/لصق الأمر التالي في المحطة الخاصة بك: 

 npm install -g @devdojo/static

الآن سيكون لديك الأمر الثابت المتاح على جهازك ، مما يتيح لك تشغيل ما يلي:

  • اسم المجلد الجديد الثابت - إنشاء موقع ويب جديد مع قالب بداية ثابت
  • static dev - بدء بيئة ديف لموقعك الثابت
  • Static Build - قم ببناء إصدار جاهز للإنتاج من موقع الويب الخاص بك (متوفر في دليل _site )

بعد ذلك ، توجه إلى الوثائق الرسمية لمعرفة المزيد حول بناء موقعك.

️ خمسة أسباب قد يكون هذا مجرد مربى!

1. التوجيه القائم على الصفحة

يتوافق كل ملف داخل دليل pages مع مسار على موقع الويب الخاص بك. بهيكل مثل هذا: 

 pages
├── index.html
├── about.html
├── contact
│   ├── index.html
│   ├── form
│   │   ├── index.html

سيكون لموقعك الجديد الطرق التالية المتاحة: 

 http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form

2. التخطيطات

تخطيطات التصميم التي يمكن أن تستخدم صفحات متعددة. 

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
    < title > {title} </ title >
</ head >
< body >
    {slot}
</ body >
</ html >

ثم ، استخدمه في أي صفحة. 

 <layout title="Radical Righteousness" src="main.html">

    <h1>?‍♂️ Totally Tubuloso Website</h1>
    
</layout>

3. يشمل

قم بإنشاء partials HTML القابلة لإعادة استخدام مع علامة <include> . حدد ملف HTML مع سمة src . 

 <layout title="Behind the Scenes!" src="main.html">

    <include src="about-header.html"></include>
    <include src="about-copy.html"></include>

</layout>

4. تكامل Tailwindcss

أضف رمز Tailwindcss القصير إلى <head> من أي تصميم وسيتم حقنه تلقائيًا. مثال: 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    {tailwindcss}
</head>
<body>
    {slot}
</body>
</html>

سيتم استبداله برابط CDN Tailwind في dev ، وسيتم تجميع ملف CSS المصقول أثناء build .

5. المجموعات

أضف مجموعات من البيانات إلى التطبيق الخاص بك. إليك مجموعة مثال موجودة في المجموعات/القائمة. json 

 [
    {
        "title" : "Home",
        "link" : "/"
    },
    {
        "title" : "About",
        "link" : "/about"
    }
]

الآن ، يمكنك بسهولة الحلق من خلال هذه المجموعة: 

 <ForEach collection="menu">
    <li>{menu.title}</h1>
</ForEach>

هذه مجرد عدد قليل من الميزات الساخنة المتاحة ، ولكن هناك الكثير للكشف والتعلم.

يتعلم أكثر

يمكنك التعرف على جميع الميزات المتوفرة بستاتية من خلال زيارة الوثائق الرسمية. قد تكون مهتمًا أيضًا بالتحقق من بعض القوالب هنا.

HTML ثابت هو الملك؟

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