נודוקו

דף נחיתה ראשון בתוכן ו
מחולל אתרים סטטי

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), מבלי לדאוג למצגת.

שימוש ב-Content Block delimeter - קטע קוד של Yaml - לבנות את קובץ התוכן, כך שניתן יהיה לשלוח אותו למנתח Nodoku.

שלב-2

שלב 2: עור

עור את קובץ ה-MD באמצעות תצורת Yaml פשוטה ורכיבים זמינים

ברגע שאתה מרוצה מהמסר שדף הנחיתה שלך מעביר, התחל על ידי הפחתת העור.

Nodoku skin הוא קובץ Yaml, שמחבר יחד חלקים בקובץ ה-MD שלך, עם בלוקי המצגת.

אתה יכול לבחור בין מרכיבי מצגת שונים, כולל קרוסלה, גיבור וסוגים שונים של רכיבי כרטיסים.

שלב-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

למה אתה רוצה לנסות את נודוקו

גישה נטולת הסחות דעת תוכן-ראשון

בניגוד לנודוקו, הרוב המכריע של בוני האתרים משתמשים בגישת WYSIWYG (מה שאתה רואה זה מה שאתה מקבל), כאשר האתר נבנה בהדרגה, על ידי מילוי טפסי האינטרנט ישירות על האלמנטים החזותיים.

למרות שגישה זו נותנת רושם חזותי מהיר מאוד של הדף העתידי שלך, יש לה חסרון גדול - היא מסיחה מאוד את הדעת .

Nodoku מציע גישה אחרת - תחילה אתה יוצר תוכן .

התוכן נוצר בצורה טקסטואלית בקובץ Markdown, וברגע זה שום דבר אחר לא משנה .

תוכן ומצגת מופרדים בהחלט

Nodoku מקדמת הפרדה קפדנית בין התוכן למצגת, המאפשרת גמישות רבה, כאשר ניתן לשנות את האחד מבלי להשפיע על השני.

גישה זו מומחשת על ידי העובדה שהתוכן והעיצוב מיוצגים על ידי קבצים שונים - קובץ Markdown לתוכן, וקובץ Yaml - הנקרא skin - להצגה ויזואלית.

שמירה על הפרדה מוחלטת בין תוכן ומושגי עיצוב מאפשרת עריכה עצמאית של שניהם, מבלי לדאוג להשפעה שעשויה להיות לאחד על השני.

לוקליזציה רב לשונית מובנית

Nodoku עוצב מהיסוד תוך התחשבות בנחיצות הלוקליזציה של התוכן.

התוכן בנודוקו מיוצג על ידי קבוצה של בלוקים של תוכן , שכל אחד מהם הוא קטע תוכן נפרד (בדרך כלל פסקה או כותרת).

התוכן הופך לניתן לוקליזציה בקלות, מכיוון שלכל בלוק תוכן יש את המפתח הייחודי שלו.

מפתח זה יכול לשמש באופן טבעי כמפתח תרגום , שיכול להשתלב עם פתרון הלוקליזציה לבחירתך.

בדוק את nodoku-i18n לפרטים נוספים.

רכיבי Nodoku מגיבים באופן טבעי

כל רכיב Nodoku מעוצב בקפידה כך שהוא יוצג בצורה נכונה בכל מכשיר גלישה.

הקבוצות הזמינות כעת של רכיבי Nodoku, Nodoku-Flowbite ו- Nodoku-MambaUI המבוססים על סט בלוקים חזותיים של Flowbite ו- Mamba UI בהתאמה, כולם מגיבים כדי לספק את חוויית המשתמש הטובה ביותר .

הסקין של Nodoku - קובץ Yaml המספק התאמה אישית ויזואלית - מבוסס על מנוע הסטיילינג Tailwind CSS, המעניק אפשרויות גדולות לכוונון עיצוב רספונסיבי.

פריסה, מבוססת על רשת CSS או CSS flex

דף נודוקו מאורגן כקבוצה של שורות , לכל שורה יש רכיב חזותי אחד או יותר.

פריסה כזו מכוונת שורה נותנת הבנה ברורה של מבנה הדף שלך ומיקום אלמנטים חזותיים צפויים.

כברירת מחדל, כל שורה בדף Nodoku משתמשת ברשת CSS כדי לארגן את האלמנטים הפנימיים של השורה.

עם זאת, ניתן להחליף את הפריסה של שורה ל- CSS flex , במידת הצורך.

זה מאפשר, בהתאם לדרישות הספציפיות שלך, להתאים את הפריסה המתאימה ביותר לצרכים שלך.

ידידותי לקידום אתרים, הודות לעיבוד בצד השרת

Nodoku משתמש בעיבוד בצד השרת, המופעל על ידי מסגרת NextJS .

כל דפי הנודוקו נבנים מראש מראש במהלך תהליך הבנייה הלא מקוון.

זה מאפשר לא רק טעינת עמודים מהירה בזק, אלא גם אופטימיזציה למנועי חיפוש , שכן כל עמוד זמין וניתן לסרוק אותו בקלות על ידי מנועי החיפוש.

אין צורך לבצע קוד Javascript לפני סריקת הדפים על ידי מנוע החיפוש באינטרנט.

כתוצאה מכך, כל הדף הופך באופן טבעי לידידותי לקידום אתרים .

ניתן להרחבה עם רכיבים ויזואליים חדשים

המסגרת של Nodoku ניתנת להרחבה בעיצובה, שכן משתמש הקצה הוא השולט במיפוי בין רכיבים חזותיים ותצורת העור של Yaml.

Nodoku משתמש במה שנקרא component provider - פונקציה המחזירה ייצוג רכיב חזותי לפי תיאור קובץ העור של Yaml.

יישום זה אחראי לעיבוד הרכיבים האולטימטיבי, תוך שימוש בערכת הנושא והלוקליזציה.

כתוצאה מכך, משתמש הקצה יכול בקלות להרחיב את סט הרכיבים הקיים על ידי רכיבים מותאמים אישית, לפי הצורך.

ניתן להציג את אותם קלפים כרכיב הקרוסלה

זה רק עניין של תצורת העור


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

רוב האתר הזה זמין בשפות הבאות

וגם שלך יכול להיות, בעזרת לוקליזציה קלה של Nodoku

למידע נוסף על יכולות לוקליזציה של Nodoku

ייחוסים

אתר זה משתמש ברכיבים הבאים מתרומות יצירתיות של צד שלישי:

גופנים ואייקונים מאת

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