ნოდოკუ

შინაარსის პირველი სადესანტო გვერდი და
სტატიკური საიტის გენერატორი

Nodoku არის ბიბლიოთეკების ნაკრები, რომელიც მიზნად ისახავს შექმნას ლამაზი და პასუხისმგებელი სადესანტო გვერდები ძალისხმევის გარეშე.

Nodoku იყენებს Markdown ფაილს, როგორც შინაარსის მიმწოდებელს, ხოლო Yaml ფაილს, როგორც ვიზუალურ კონფიგურატორს.

Nodoku არის ბიბლიოთეკების ნაკრები, რომელიც საშუალებას გაძლევთ მარტივად შექმნათ სადესანტო გვერდი ან სტატიკური საიტი

Nodoku არის ჩარჩო NextJS , React და Tailwind- ის თავზე.

Nodoku იყენებს Server-Side-Rendering (SSR) NextJS შესაძლებლობებს.

Nodoku ძრავა აანალიზებს მოწოდებულ Markdown ფაილს კონტენტ ბლოკებად.

შემდეგ ის ასახავს თითოეულ ბლოკს Yaml ფაილში მოცემული კონფიგურაციის გამოყენებით, რომელსაც ეწოდება skin .

ნაბიჯი-1

ნოდოკუ გზა

Nodoku გვთავაზობს კონტენტზე ორიენტირებული სადესანტო გვერდების შექმნის მარტივ გზას Markdown-ისა და Yaml-ის გამოყენებით

ნაბიჯი-1

ნაბიჯი 1: იფიქრე

შექმენით კონტენტი, რომელიც ხელს უწყობს თქვენს პროდუქტს ან მომსახურებას MD ფაილის სახით

კონცენტრირება მოახდინეთ თქვენი პროდუქტის/მომსახურების საგანზე, რათა ხაზი გაუსვათ მის უპირატესობებს.

გამოიყენეთ თქვენი საყვარელი ტექსტური რედაქტორი შინაარსით მდიდარი MD (markdown) ფაილის შესაქმნელად, პრეზენტაციაზე ფიქრის გარეშე.

კონტენტის ბლოკის დელიმეტრის გამოყენება - Yaml კოდის ნაწყვეტი - კონტენტის ფაილის სტრუქტურა ისე, რომ მისი წარდგენა შესაძლებელია Nodoku პარსერზე.

ნაბიჯი-2

ნაბიჯი 2: კანი

გაასუფთავეთ MD ფაილი მარტივი Yaml კონფიგურაციისა და ხელმისაწვდომი კომპონენტების გამოყენებით

როგორც კი კმაყოფილი იქნებით თქვენი სადესანტო გვერდის გზავნილით, დაიწყეთ მისი მოცილებით.

Nodoku skin არის Yaml ფაილი, რომელიც აკავშირებს სექციებს თქვენს MD ფაილში, საპრეზენტაციო ბლოკებით.

თქვენ შეგიძლიათ აირჩიოთ სხვადასხვა პრეზენტაციის კომპონენტებს შორის, კარუსელის, გმირის და სხვადასხვა ტიპის ბარათის კომპონენტების ჩათვლით.

ნაბიჯი-3

ნაბიჯი 3: დახვეწა

გამოიყენეთ კონფიგურაციის ვარიანტები თქვენი სადესანტო გვერდის პრეზენტაციის შესასრულებლად

თუ ნაგულისხმევი პრეზენტაცია არ შეესაბამება თქვენს საჭიროებებს, შეგიძლიათ შეცვალოთ იგი თითოეული კომპონენტის კონფიგურაციის ვარიანტების გამოყენებით თქვენი საჭიროებების შესასრულებლად.

თქვენ შეგიძლიათ შეცვალოთ ფონის ფერი, ტექსტის ფერი, საზღვრები და სხვა თქვენი პრეზენტაციის ვიზუალური დეტალები.

ჩვეულებრივ, Nodoku კომპონენტები მხარს უჭერენ Tailwind CSS-ს. ასე რომ თქვენ შეგიძლიათ დაარეგულიროთ ivsual presetnation 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)
Skin Yaml ფაილის შედგენა

შეადგინეთ Yaml ფაილის ვიზუალური წარმოდგენის კონფიგურაცია

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

და აი შედეგი

ჩემი გასაოცარი პროდუქტის სათაური

ჩემი გასაოცარი პროდუქტის სუბტიტრები

ჩემი პროდუქტის აღწერა.

და კიდევ ერთი აღწერის ხაზი.

სურათი Freepik-ის მიერ

ჩემი გასაოცარი პროდუქტი

და დიახ!

მთელი ეს საიტი შეიქმნა Nodoku-თ!

შეამოწმეთ ამ გვერდის წყაროს კოდი აქ
https://github.com/epanikas/nodoku-demo-page

რატომ გსურთ სცადოთ ნოდოკუ?

ყურადღების გადატანის გარეშე კონტენტი-პირველი მიდგომა

Nodoku-სგან განსხვავებით, საიტის შემქმნელთა აბსოლუტური უმრავლესობა იყენებს ე.წ. WYSIWYG (What You See Is What You Get) მიდგომას, როდესაც საიტი შენდება თანდათანობით, ვებ-ფორმების შევსებით პირდაპირ ვიზუალურ ელემენტებზე.

მიუხედავად იმისა, რომ ეს მიდგომა იძლევა ძალიან სწრაფ ვიზუალურ შთაბეჭდილებას თქვენი მომავალი გვერდის შესახებ, მას აქვს მნიშვნელოვანი ნაკლი - ის ძალიან ფანტავს ყურადღებას .

Nodoku გვთავაზობს განსხვავებულ მიდგომას - პირველ რიგში თქვენ ქმნით კონტენტს .

შინაარსი იქმნება ტექსტური ფორმით Markdown ფაილში და ამ მომენტში სხვა არაფერია მნიშვნელოვანი .

შინაარსი და პრეზენტაცია მკაცრად გამიჯნულია

Nodoku ხელს უწყობს მკაცრ გამიჯვნას შინაარსსა და პრეზენტაციას შორის, რაც იძლევა დიდი მოქნილობის საშუალებას, როდესაც ერთი შეიძლება შეიცვალოს მეორეზე გავლენის გარეშე.

ეს მიდგომა ილუსტრირებულია იმით, რომ შინაარსი და დიზაინი წარმოდგენილია სხვადასხვა ფაილებით - Markdown ფაილი შინაარსისთვის და Yaml ფაილი - სახელწოდებით skin - ვიზუალური პრეზენტაციისთვის.

კონტენტისა და დიზაინის კონცეფციების მკაცრად განცალკევება იძლევა ორივეს დამოუკიდებელ რედაქტირებას, იმის გარეშე, თუ რა გავლენას მოახდენს ერთმა მეორეზე.

ჩაშენებული მრავალენოვანი ლოკალიზაცია

Nodoku შექმნილია თავიდანვე, შინაარსის ლოკალიზაციის აუცილებლობის გათვალისწინებით.

Nodoku-ში შიგთავსი წარმოდგენილია შიგთავსის ბლოკების სიმრავლით, რომელთაგან თითოეული არის შინაარსის ცალკეული ნაწილი (ჩვეულებრივ, აბზაცი ან სათაური).

შიგთავსი ადვილად ლოკალიზდება, ვინაიდან თითოეულ კონტენტ ბლოკს აქვს თავისი უნიკალური გასაღები.

ეს გასაღები ბუნებრივია შეიძლება გამოყენებულ იქნას როგორც თარგმანის გასაღები , რომელიც შეიძლება ინტეგრირებული იყოს თქვენი არჩევანის ლოკალიზაციის გადაწყვეტასთან.

დამატებითი ინფორმაციისთვის იხილეთ nodoku-i18n .

Nodoku კომპონენტები ბუნებრივად რეაგირებენ

Nodoku-ს თითოეული კომპონენტი საგულდაგულოდ არის შემუშავებული ისე, რომ ის სწორად იყოს წარმოდგენილი ნებისმიერ ბრაუზერის მოწყობილობაზე.

Nodoku კომპონენტების ამჟამად ხელმისაწვდომი კომპლექტები, Nodoku-Flowbite და Nodoku-MambaUI , შესაბამისად Flowbite და Mamba UI ვიზუალური ბლოკების კომპლექტზე, ყველა პასუხისმგებელია მომხმარებლის საუკეთესო გამოცდილების უზრუნველსაყოფად .

Nodoku skin - Yaml ფაილი, რომელიც უზრუნველყოფს ვიზუალურ პერსონალიზაციას - დაფუძნებულია Tailwind CSS სტილის ძრავზე, რომელიც იძლევა დიდ შესაძლებლობებს საპასუხო დიზაინის დარეგულირებისთვის.

განლაგება, რომელიც დაფუძნებულია CSS ბადეზე ან CSS flex-ზე

Nodoku გვერდი ორგანიზებულია როგორც რიგები , თითოეულ სტრიქონს აქვს ერთი ან მეტი ვიზუალური კომპონენტი.

მწკრივზე ორიენტირებული ასეთი განლაგება იძლევა მკაფიო გაგებას თქვენი გვერდის სტრუქტურისა და ვიზუალური ელემენტების პროგნოზირებადი განლაგების შესახებ.

ნაგულისხმევად, Nodoku გვერდის თითოეული მწკრივი იყენებს CSS ბადეს მწკრივის შიდა ელემენტების ორგანიზებისთვის.

თუმცა, საჭიროების შემთხვევაში, მწკრივის განლაგება შეიძლება გადავიდეს CSS flex- ზე.

ეს საშუალებას გაძლევთ, თქვენი კონკრეტული მოთხოვნებიდან გამომდინარე, მოარგოთ განლაგება, რომელიც საუკეთესოდ შეესაბამება თქვენს საჭიროებებს.

SEO მეგობრული, სერვერის მხრიდან გაწევის წყალობით

Nodoku იყენებს სერვერის მხარეს რენდერირებას, რომელიც აღჭურვილია NextJS ჩარჩოებით.

Nodoku-ს ყველა გვერდი წინასწარ არის ჩაშენებული ოფლაინ მშენებლობის პროცესში.

ეს საშუალებას იძლევა არა მხოლოდ ელვისებურად სწრაფი გვერდის ჩატვირთვა, არამედ საძიებო სისტემების ოპტიმიზაციაც , რადგან თითოეული გვერდი ხელმისაწვდომია და საძიებო სისტემებში ადვილად სკანირდება.

ვებ საძიებო სისტემით გვერდის სკანირებამდე არ არის საჭირო Javascript კოდის შესრულება.

შესაბამისად, მთელი გვერდი ბუნებრივად ხდება SEO მეგობრული .

გაფართოებულია ახალი ვიზუალური კომპონენტებით

Nodoku-ს ჩარჩო გაფართოვდება დიზაინით, რადგან ეს არის საბოლოო მომხმარებელი, რომელიც აკონტროლებს რუკებს ვიზუალურ კომპონენტებსა და Yaml კანის კონფიგურაციას შორის.

Nodoku იყენებს ეგრეთ წოდებულ კომპონენტის პროვაიდერს - ფუნქციას, რომელიც აბრუნებს ვიზუალური კომპონენტის წარმოდგენას Yaml skin ფაილის აღწერილობის მიხედვით.

ეს იმპლემენტაცია პასუხისმგებელია კომპონენტის საბოლოო რენდერზე, თემისა და ლოკალიზაციის გამოყენებით.

შესაბამისად, საბოლოო მომხმარებელს შეუძლია ადვილად გააფართოვოს კომპონენტების არსებული ნაკრები მორგებული კომპონენტებით, საჭიროებისამებრ.

იგივე ბარათები შეიძლება წარმოდგენილი იყოს კარუსელის კომპონენტად

ეს მხოლოდ კანის კონფიგურაციის საკითხია


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

ამ საიტის უმეტესობა ხელმისაწვდომია შემდეგ ენებზე

და თქვენიც შეიძლება იყოს, Nodoku მარტივი ლოკალიზაციის დახმარებით

შეიტყვეთ მეტი Nodoku ლოკალიზაციის შესაძლებლობების შესახებ

ატრიბუტები

ეს საიტი იყენებს შემდეგ კომპონენტებს მესამე მხარის შემოქმედებითი წვლილისგან:

შრიფტები და ხატები მიერ

შრიფტი 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