Nodoku هو إطار عمل على NextJS و React و Tailwind .
يستخدم Nodoku إمكانيات NextJS الأساسية للعرض من جانب الخادم (SSR).
يقوم محرك Nodoku بتحليل ملف Markdown المقدم إلى كتل محتوى.
ثم يقوم بعرض كل كتلة باستخدام التكوين المقدم في ملف Yaml - المسمى skin .
ركز على موضوع منتجك/خدمتك لتسليط الضوء على مميزاته.
استخدم محرر النصوص المفضل لديك لإنشاء ملف MD (markdown) غني بالمحتوى، دون القلق بشأن العرض التقديمي.
باستخدام فاصل كتلة المحتوى - مقتطف من كود Yaml - قم بتنظيم ملف المحتوى، بحيث يمكن إرساله إلى محلل Nodoku.
بمجرد رضاك عن الرسالة التي تنقلها صفحة الهبوط الخاصة بك، ابدأ بتحسينها.
واجهة Nodoku عبارة عن ملف Yaml، يربط الأقسام في ملف MD الخاص بك مع كتل العرض التقديمي.
يمكنك الاختيار من بين مكونات العرض التقديمي المختلفة، بما في ذلك مكونات Carousel وHero وأنواع مختلفة من مكونات Card.
إذا كان العرض التقديمي الافتراضي لا يناسب احتياجاتك، فيمكنك تعديله باستخدام خيارات التكوين لكل مكون لضبطه بما يتناسب مع احتياجاتك.
يمكنك تغيير لون الخلفية، ولون النص، والحدود، والتفاصيل المرئية الأخرى لعرضك التقديمي.
عادةً ما تدعم مكونات Nodoku Tailwind CSS بشكل افتراضي، لذا يمكنك ضبط الإعدادات المسبقة الخاصة بك باستخدام Tailwind.
إنشاء ملف محتوى Markdown، يصف منتجك
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.

إنشاء مسودة ملف Yaml لتكوين التمثيل المرئي
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
قم بالاطلاع على الكود المصدر لهذه الصفحة على
https://github.com/epanikas/nodoku-demo-page
على عكس Nodoku، فإن الغالبية العظمى من منشئي المواقع يستخدمون ما يسمى بنهج WYSIWYG (ما تراه هو ما تحصل عليه)، عندما يتم بناء الموقع تدريجيًا، عن طريق ملء نماذج الويب مباشرة على العناصر المرئية.
على الرغم من أن هذا النهج يعطي انطباعًا بصريًا سريعًا جدًا لصفحتك المستقبلية، إلا أنه يعاني من عيب كبير - فهو يشتت الانتباه كثيرًا.
يقترح Nodoku نهجًا مختلفًا - قم بإنشاء المحتوى أولاً .
يتم إنشاء المحتوى في شكل نصي في ملف Markdown، وفي هذه اللحظة لا يوجد أي شيء آخر مهم .
يعزز Nodoku الفصل الصارم بين المحتوى والعرض، مما يسمح بقدر كبير من المرونة، حيث يمكن تغيير أحدهما دون التأثير على الآخر.
يتجلى هذا النهج في حقيقة أن المحتوى والتصميم يتم تمثيلهما بواسطة ملفات مختلفة - ملف Markdown للمحتوى، وملف Yaml - يسمى skin - للعرض المرئي.
إن إبقاء المحتوى ومفاهيم التصميم منفصلة بشكل صارم يسمح بتحرير كل منهما بشكل مستقل، دون القلق بشأن التأثير الذي قد يحدثه أحدهما على الآخر.
لقد تم تصميم Nodoku من الألف إلى الياء مع الأخذ في الاعتبار ضرورة توطين المحتوى.
يتم تمثيل المحتوى في Nodoku من خلال مجموعة من كتل المحتوى ، حيث يعتبر كل منها جزءًا منفصلًا من المحتوى (عادةً فقرة أو عنوان).
يصبح المحتوى قابلاً للترجمة بسهولة، حيث أن كل كتلة محتوى لها مفتاحها الفريد.
يمكن استخدام هذا المفتاح بشكل طبيعي كمفتاح ترجمة ، ويمكن دمجه مع حل التوطين الذي تختاره.
قم بزيارة nodoku-i18n للحصول على مزيد من التفاصيل.
يتم تصميم كل مكون من مكونات Nodoku بعناية بحيث يتم تقديمه بشكل صحيح على أي جهاز تصفح.
إن مجموعات مكونات Nodoku المتوفرة حاليًا، Nodoku-Flowbite و Nodoku-MambaUI المستندة إلى مجموعة Flowbite و Mamba UI من الكتل المرئية على التوالي، كلها مستجيبة لتوفير أفضل تجربة للمستخدم .
يعتمد مظهر Nodoku - وهو عبارة عن ملف Yaml يوفر التخصيص المرئي - على محرك التصميم Tailwind CSS، والذي يوفر إمكانيات كبيرة لضبط التصميم المستجيب.
يتم تنظيم صفحة Nodoku كمجموعة من الصفوف ، حيث يحتوي كل صف على مكون مرئي واحد أو أكثر.
يتيح لك هذا التخطيط الموجه نحو الصفوف فهمًا واضحًا لهيكل صفحتك، ووضع العناصر المرئية بشكل يمكن التنبؤ به.
بشكل افتراضي، يستخدم كل صف في صفحة Nodoku شبكة CSS لتنظيم العناصر الداخلية للصف.
ومع ذلك، يمكن تحويل تخطيط الصف إلى CSS flex ، إذا لزم الأمر.
يتيح لك هذا، اعتمادًا على متطلباتك الخاصة، تكييف التخطيط الذي يناسب احتياجاتك بشكل أفضل.
يستخدم Nodoku تقنية العرض من جانب الخادم، المدعومة بإطار عمل NextJS .
يتم إنشاء جميع صفحات Nodoku مسبقًا أثناء عملية البناء دون اتصال بالإنترنت.
وهذا لا يسمح فقط بتحميل الصفحة بسرعة البرق، بل يسمح أيضًا بتحسين محرك البحث ، حيث أن كل صفحة متاحة بسهولة، ويمكن لمحركات البحث مسحها ضوئيًا بسهولة.
لا يلزم تنفيذ أي كود Javascript قبل مسح الصفحة بواسطة محرك البحث على الويب.
وبالتالي، تصبح الصفحة بأكملها بطبيعة الحال صديقة لمحركات البحث .
إطار عمل Nodoku قابل للتوسع من حيث التصميم، حيث أن المستخدم النهائي هو الذي يتحكم في التعيين بين المكونات المرئية وتكوين واجهة Yaml.
يستخدم Nodoku ما يسمى بموفر المكونات - وهي وظيفة تقوم بإرجاع تمثيل مكون مرئي وفقًا لوصف ملف جلد Yaml.
يعد هذا التنفيذ مسؤولاً عن تقديم المكون النهائي، باستخدام السمة والتوطين.
وبالتالي، يمكن للمستخدم النهائي توسيع مجموعة المكونات الحالية بسهولة عن طريق إضافة مكونات مخصصة، حسب الحاجة.
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
يستخدم هذا الموقع المكونات التالية من مساهمات إبداعية من جهات خارجية:
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