Nodoku היא מסגרת על גבי NextJS , React ו- Tailwind .
Nodoku משתמש ביכולות NextJS הבסיסיות של עיבוד צד שרת (SSR).
מנוע Nodoku מנתח את קובץ ה-Markdown שסופק לקוביות תוכן.
לאחר מכן הוא מעבד כל בלוק באמצעות התצורה שסופקה בקובץ Yaml הנקרא skin .
התרכז בנושא המוצר / השירות שלך כדי להדגיש את היתרונות שלו.
השתמש בעורך הטקסט המועדף עליך כדי ליצור קובץ MD עשיר בתוכן (markdown), מבלי לדאוג למצגת.
שימוש ב-Content Block delimeter - קטע קוד של Yaml - לבנות את קובץ התוכן, כך שניתן יהיה לשלוח אותו למנתח Nodoku.
אם מצגת ברירת המחדל אינה מתאימה לצרכים שלך, תוכל לשנות אותה שימוש באפשרויות התצורה של כל רכיב כדי לכוונן אותו לצרכים שלך.
אתה יכול לשנות את צבע הרקע, צבע הטקסט, גבולות ועוד פרטים חזותיים של המצגת שלך.
בדרך כלל רכיבי 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
בניגוד לנודוקו, הרוב המכריע של בוני האתרים משתמשים בגישת WYSIWYG (מה שאתה רואה זה מה שאתה מקבל), כאשר האתר נבנה בהדרגה, על ידי מילוי טפסי האינטרנט ישירות על האלמנטים החזותיים.
למרות שגישה זו נותנת רושם חזותי מהיר מאוד של הדף העתידי שלך, יש לה חסרון גדול - היא מסיחה מאוד את הדעת .
Nodoku מציע גישה אחרת - תחילה אתה יוצר תוכן .
התוכן נוצר בצורה טקסטואלית בקובץ Markdown, וברגע זה שום דבר אחר לא משנה .
Nodoku מקדמת הפרדה קפדנית בין התוכן למצגת, המאפשרת גמישות רבה, כאשר ניתן לשנות את האחד מבלי להשפיע על השני.
גישה זו מומחשת על ידי העובדה שהתוכן והעיצוב מיוצגים על ידי קבצים שונים - קובץ Markdown לתוכן, וקובץ Yaml - הנקרא skin - להצגה ויזואלית.
שמירה על הפרדה מוחלטת בין תוכן ומושגי עיצוב מאפשרת עריכה עצמאית של שניהם, מבלי לדאוג להשפעה שעשויה להיות לאחד על השני.
Nodoku עוצב מהיסוד תוך התחשבות בנחיצות הלוקליזציה של התוכן.
התוכן בנודוקו מיוצג על ידי קבוצה של בלוקים של תוכן , שכל אחד מהם הוא קטע תוכן נפרד (בדרך כלל פסקה או כותרת).
התוכן הופך לניתן לוקליזציה בקלות, מכיוון שלכל בלוק תוכן יש את המפתח הייחודי שלו.
מפתח זה יכול לשמש באופן טבעי כמפתח תרגום , שיכול להשתלב עם פתרון הלוקליזציה לבחירתך.
בדוק את nodoku-i18n לפרטים נוספים.
כל רכיב Nodoku מעוצב בקפידה כך שהוא יוצג בצורה נכונה בכל מכשיר גלישה.
הקבוצות הזמינות כעת של רכיבי Nodoku, Nodoku-Flowbite ו- Nodoku-MambaUI המבוססים על סט בלוקים חזותיים של Flowbite ו- Mamba UI בהתאמה, כולם מגיבים כדי לספק את חוויית המשתמש הטובה ביותר .
הסקין של Nodoku - קובץ Yaml המספק התאמה אישית ויזואלית - מבוסס על מנוע הסטיילינג Tailwind CSS, המעניק אפשרויות גדולות לכוונון עיצוב רספונסיבי.
דף נודוקו מאורגן כקבוצה של שורות , לכל שורה יש רכיב חזותי אחד או יותר.
פריסה כזו מכוונת שורה נותנת הבנה ברורה של מבנה הדף שלך ומיקום אלמנטים חזותיים צפויים.
כברירת מחדל, כל שורה בדף Nodoku משתמשת ברשת CSS כדי לארגן את האלמנטים הפנימיים של השורה.
עם זאת, ניתן להחליף את הפריסה של שורה ל- CSS flex , במידת הצורך.
זה מאפשר, בהתאם לדרישות הספציפיות שלך, להתאים את הפריסה המתאימה ביותר לצרכים שלך.
Nodoku משתמש בעיבוד בצד השרת, המופעל על ידי מסגרת NextJS .
כל דפי הנודוקו נבנים מראש מראש במהלך תהליך הבנייה הלא מקוון.
זה מאפשר לא רק טעינת עמודים מהירה בזק, אלא גם אופטימיזציה למנועי חיפוש , שכן כל עמוד זמין וניתן לסרוק אותו בקלות על ידי מנועי החיפוש.
אין צורך לבצע קוד Javascript לפני סריקת הדפים על ידי מנוע החיפוש באינטרנט.
כתוצאה מכך, כל הדף הופך באופן טבעי לידידותי לקידום אתרים .
המסגרת של Nodoku ניתנת להרחבה בעיצובה, שכן משתמש הקצה הוא השולט במיפוי בין רכיבים חזותיים ותצורת העור של Yaml.
Nodoku משתמש במה שנקרא component provider - פונקציה המחזירה ייצוג רכיב חזותי לפי תיאור קובץ העור של Yaml.
יישום זה אחראי לעיבוד הרכיבים האולטימטיבי, תוך שימוש בערכת הנושא והלוקליזציה.
כתוצאה מכך, משתמש הקצה יכול בקלות להרחיב את סט הרכיבים הקיים על ידי רכיבים מותאמים אישית, לפי הצורך.
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
אתר זה משתמש ברכיבים הבאים מתרומות יצירתיות של צד שלישי:
Font Awesome 6 - https://fontawesome.com/ רישיון: CC BY 4.0 License 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 License Version 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE