نودوكو

صفحة هبوط تركز على المحتوى أولاً و
مولد موقع ثابت

Nodoku عبارة عن مجموعة من المكتبات تهدف إلى إنشاء صفحات هبوط جميلة ومتجاوبة بسهولة.

يستخدم Nodoku ملف Markdown كمزود للمحتوى، وملف Yaml كمكوّن مرئي.

Nodoku عبارة عن مجموعة من المكتبات التي تسمح ببناء صفحة مقصودة أو موقع ثابت بسهولة

Nodoku هو إطار عمل على NextJS و React و Tailwind .

يستخدم Nodoku إمكانيات NextJS الأساسية للعرض من جانب الخادم (SSR).

يقوم محرك Nodoku بتحليل ملف Markdown المقدم إلى كتل محتوى.

ثم يقوم بعرض كل كتلة باستخدام التكوين المقدم في ملف Yaml - المسمى skin .

الخطوة 1

طريقة نودوكو

يقترح Nodoku طريقة بسيطة لإنشاء صفحات مقصودة تركز على المحتوى، باستخدام Markdown وYaml

الخطوة 1

الخطوة 1: فكر

إنشاء محتوى للترويج لمنتجك أو خدمتك كملف MD

ركز على موضوع منتجك/خدمتك لتسليط الضوء على مميزاته.

استخدم محرر النصوص المفضل لديك لإنشاء ملف MD (markdown) غني بالمحتوى، دون القلق بشأن العرض التقديمي.

باستخدام فاصل كتلة المحتوى - مقتطف من كود Yaml - قم بتنظيم ملف المحتوى، بحيث يمكن إرساله إلى محلل Nodoku.

الخطوة 2

الخطوة 2: الجلد

قم بتغليف ملف MD باستخدام تكوين Yaml البسيط والمكونات المتاحة

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

واجهة Nodoku عبارة عن ملف Yaml، يربط الأقسام في ملف MD الخاص بك مع كتل العرض التقديمي.

يمكنك الاختيار من بين مكونات العرض التقديمي المختلفة، بما في ذلك مكونات Carousel وHero وأنواع مختلفة من مكونات Card.

الخطوة 3

الخطوة 3: الضبط الدقيق

استخدم خيارات التكوين لضبط عرض صفحة الهبوط الخاصة بك

إذا كان العرض التقديمي الافتراضي لا يناسب احتياجاتك، فيمكنك تعديله باستخدام خيارات التكوين لكل مكون لضبطه بما يتناسب مع احتياجاتك.

يمكنك تغيير لون الخلفية، ولون النص، والحدود، والتفاصيل المرئية الأخرى لعرضك التقديمي.

عادةً ما تدعم مكونات Nodoku Tailwind CSS بشكل افتراضي، لذا يمكنك ضبط الإعدادات المسبقة الخاصة بك باستخدام Tailwind.

وهنا مثال

افترض أنك تقوم بإنشاء صفحة هبوط للمنتج

إنشاء ملف MD

إنشاء ملف محتوى Markdown، يصف منتجك

# Title of my awesome product
## Subtitle of my awesome product

Description of my product.
And another line of description.

![my-awesome-product](./images/my-awesome-product.png)
مسودة ملف Yaml للجلد

إنشاء مسودة ملف Yaml لتكوين التمثيل المرئي

rows:
  - row:
      components:
        - mambaui/hero-left-text:
            selector:
              attributes:
                id: product-1

وهنا النتيجة

عنوان منتجي الرائع

عنوان فرعي لمنتجي الرائع

وصف المنتج الخاص بي.

وسطر آخر من الوصف.

الصورة من Freepik

منتجي الرائع

ونعم!

تم إنشاء هذا الموقع بأكمله باستخدام Nodoku!

قم بالاطلاع على الكود المصدر لهذه الصفحة على
https://github.com/epanikas/nodoku-demo-page

لماذا ترغب في تجربة Nodoku

نهج المحتوى الخالي من التشتيت أولاً

على عكس Nodoku، فإن الغالبية العظمى من منشئي المواقع يستخدمون ما يسمى بنهج WYSIWYG (ما تراه هو ما تحصل عليه)، عندما يتم بناء الموقع تدريجيًا، عن طريق ملء نماذج الويب مباشرة على العناصر المرئية.

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

يقترح Nodoku نهجًا مختلفًا - قم بإنشاء المحتوى أولاً .

يتم إنشاء المحتوى في شكل نصي في ملف Markdown، وفي هذه اللحظة لا يوجد أي شيء آخر مهم .

المحتوى والعرض منفصلان تمامًا

يعزز Nodoku الفصل الصارم بين المحتوى والعرض، مما يسمح بقدر كبير من المرونة، حيث يمكن تغيير أحدهما دون التأثير على الآخر.

يتجلى هذا النهج في حقيقة أن المحتوى والتصميم يتم تمثيلهما بواسطة ملفات مختلفة - ملف Markdown للمحتوى، وملف Yaml - يسمى skin - للعرض المرئي.

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

توطين متعدد اللغات مدمج

لقد تم تصميم Nodoku من الألف إلى الياء مع الأخذ في الاعتبار ضرورة توطين المحتوى.

يتم تمثيل المحتوى في Nodoku من خلال مجموعة من كتل المحتوى ، حيث يعتبر كل منها جزءًا منفصلًا من المحتوى (عادةً فقرة أو عنوان).

يصبح المحتوى قابلاً للترجمة بسهولة، حيث أن كل كتلة محتوى لها مفتاحها الفريد.

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

قم بزيارة nodoku-i18n للحصول على مزيد من التفاصيل.

مكونات Nodoku تستجيب بشكل طبيعي

يتم تصميم كل مكون من مكونات Nodoku بعناية بحيث يتم تقديمه بشكل صحيح على أي جهاز تصفح.

إن مجموعات مكونات Nodoku المتوفرة حاليًا، Nodoku-Flowbite و Nodoku-MambaUI المستندة إلى مجموعة Flowbite و Mamba UI من الكتل المرئية على التوالي، كلها مستجيبة لتوفير أفضل تجربة للمستخدم .

يعتمد مظهر Nodoku - وهو عبارة عن ملف Yaml يوفر التخصيص المرئي - على محرك التصميم Tailwind CSS، والذي يوفر إمكانيات كبيرة لضبط التصميم المستجيب.

التخطيط، بناءً على CSS Grid أو CSS Flex

يتم تنظيم صفحة Nodoku كمجموعة من الصفوف ، حيث يحتوي كل صف على مكون مرئي واحد أو أكثر.

يتيح لك هذا التخطيط الموجه نحو الصفوف فهمًا واضحًا لهيكل صفحتك، ووضع العناصر المرئية بشكل يمكن التنبؤ به.

بشكل افتراضي، يستخدم كل صف في صفحة Nodoku شبكة CSS لتنظيم العناصر الداخلية للصف.

ومع ذلك، يمكن تحويل تخطيط الصف إلى CSS flex ، إذا لزم الأمر.

يتيح لك هذا، اعتمادًا على متطلباتك الخاصة، تكييف التخطيط الذي يناسب احتياجاتك بشكل أفضل.

متوافق مع محركات البحث، بفضل العرض من جانب الخادم

يستخدم Nodoku تقنية العرض من جانب الخادم، المدعومة بإطار عمل NextJS .

يتم إنشاء جميع صفحات Nodoku مسبقًا أثناء عملية البناء دون اتصال بالإنترنت.

وهذا لا يسمح فقط بتحميل الصفحة بسرعة البرق، بل يسمح أيضًا بتحسين محرك البحث ، حيث أن كل صفحة متاحة بسهولة، ويمكن لمحركات البحث مسحها ضوئيًا بسهولة.

لا يلزم تنفيذ أي كود Javascript قبل مسح الصفحة بواسطة محرك البحث على الويب.

وبالتالي، تصبح الصفحة بأكملها بطبيعة الحال صديقة لمحركات البحث .

قابلة للتوسيع بمكونات مرئية جديدة

إطار عمل Nodoku قابل للتوسع من حيث التصميم، حيث أن المستخدم النهائي هو الذي يتحكم في التعيين بين المكونات المرئية وتكوين واجهة Yaml.

يستخدم Nodoku ما يسمى بموفر المكونات - وهي وظيفة تقوم بإرجاع تمثيل مكون مرئي وفقًا لوصف ملف جلد Yaml.

يعد هذا التنفيذ مسؤولاً عن تقديم المكون النهائي، باستخدام السمة والتوطين.

وبالتالي، يمكن للمستخدم النهائي توسيع مجموعة المكونات الحالية بسهولة عن طريق إضافة مكونات مخصصة، حسب الحاجة.

يمكن تقديم نفس البطاقات كمكون Carousel

هذا مجرد مسألة تكوين الجلد


rows:
  - row:
      components:
        - flowbite/carousel:
            selector:
              attributes:
                sectionName: advantages

معظم هذا الموقع متاح باللغات التالية

ويمكنك أيضًا أن تكون كذلك، بمساعدة Nodoku للتوطين السهل

تعرف على المزيد حول إمكانيات توطين Nodoku

الإسنادات

يستخدم هذا الموقع المكونات التالية من مساهمات إبداعية من جهات خارجية:

الخطوط والأيقونات بواسطة

Font Awesome 6 - https://fontawesome.com/ الترخيص: ترخيص CC BY 4.0 https://creativecommons.org/licenses/by/4.0/

Heroicons - https://github.com/tailwindlabs/heroicons الترخيص: MIT https://opensource.org/licenses/MIT

أيقونات تصميم المواد - http://google.github.io/material-design-icons/ الترخيص: ترخيص Apache الإصدار 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE