ავაწყოთ მარტივი ვებსაიტი ბლოგით (ზედმეტი ჯავასკრიპტის გარეშე)

სტატიკური ვებსაიტის გენერატორი

რა განასხვავებს სტატიკურ საიტს დინამიკურისგან? დინამიკური საიტები კოდით აგენერირებენ მარკაპს მომხმარებლის ქმედებების საფუძველზე. ფრონტენდ ფრეიმვორქები, როგორიცაა React, Angular და Vue იყენებენ ჯავასკრიპტს, რომ დინამიკურად ააგონ HTML და CSS ბრაუზერში. ხშირ შემთხვევაში, HTML საწყის აპლიკაციაში (პირველ მილისეკუნდში, როცა მას მომხმარებელი გახსნის) საერთოდ არ არსებობს, მას ჯავასკრიპტი აგენერირებს – ეს ერთგვერდიანი ვებ აპლიკაციებისთვისაა დამახასიათებელი. ამასთანავე არსებობს სერვერის მხრიდან დარენდერებული საიტები, რომლებიც, მაგალითად PHP-სა ან NodeJS-ის საშუალებით გადაამუშავებენ მომხმარებლის მოთხოვნას, სერვერზე შექმნიან საპასუხოდ მარკაპს და მას აბრუნებენ. სტატიკური საიტები, ამ ყველაფრის საპირისპიროდ, არის წინასწარ გაწერილი და უცვლელი (ანუ სტატიკური) ფაილები. სტატიკური საიტი უფრო მარტივი და სრწრაფი ასაწყობია, მისი შენახვაც ბევრ ხარჯს არ მოითხოვს. ის ასევე უფრო მარტივია SEO-სთვის (Search Engine Optimization). როცა სტატიკური საიტის რაღაც ნაწილი გვინდა რომ დინამიკური იყოს, ამისთვის არაა აუცილებელი მძიმე არტილერიის გამოყენება, შეგვიძლია უბრალოდ სტატიკური საიტის გენერატორის გამოყენება, რომელიც დინამიკური მონაცემებისგან წინასწარ დაარენდერებს სტატიკურ ფაილებს.

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

სხვათაშორის, ეს საიტიც, რომელზეც თქვენ ამ ტექსტს კითხულობთ, 11ty-ით არის აწყობილი!

გავამზადოთ პროექტი

შევქმნათ ახალი ფოლდერი და მასში გავუშვათ ბრძანებები:

npm init -y
git init

აქვე შევქმნათ .gitignore ფაილი, სადაც ვერსიის კონტროლს დავაიგნორებინებთ არასაჭირო ფაილებს:

/.gitignore

node_modules
public

დავაინსტალიროთ 11ty-ის პაკეტი.

npm i --save-dev @11ty/eleventy

ამის შემდეგ package.json-ში რამდენიმე სკრიპტი გავამზადოთ:

/package.json

{
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  }
}

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

11ty თავისთავად მინიმალურადაა კონფიგურირებული და ხშირ შემთხვევაში ბევრ კონფიგურაციასაც არ საჭიროებს. მისი კონფიგურაციის ფაილი პროექტის ფოლდერის ზედა დონეზე უნდ განთავსდეს, სახელით .eleventy.js (წერტილით დასაწყისში!).

/.eleventy.js

module.exports = function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

ჩვენ კონფიგურაციის ფუნქციას ვაექსპორტებთ. ფუნქციის პარამეტრი eleventyConfig ძალიან მძლავრი კონფიგურაციის ხელსაწყოა, რომელსაც მოგვიანებით გამოვიყენებთ. ამჯერად ფუნქციით ვაბრუნებთ კონფიგურაციის ობიექტს, სადაც მივუთითებთ, რომ კოდის წყარო იქნება src ფოლდერი და eleventy ამ კოდისგან დააგენერირებს სტატიკურ ვებსაიტს public ფოლდერში (კონფიგურაციის გარეშე, ვებსაიტი იქნება _site ფოლდერში). სწორედ ამ უკანასკნელს იყენებს სადეველოპმენტო სერვერი და, რა თქმა უნდა, Netlify, რომელიც ვებსაიტს ჰოსტავს.

თემფლეითისთვის ჩვენ გამოვიყენებთ nunjucks-ს, თუმცა თავისუფლად შეგიძლიათ გამოიყენოთ ნებისმიერი თემფლეითის ენა. მათი უმეტესობა ინტეგრირებულია 11ty-ში და შესაძლებელია ყველა მათგანის ერთდროულად გამოყენებაც! მხოლოდ HTML-ის გამოყენება უაზრო იქნებოდა, რადგან ჩვენ გვინდა eleventy-ს დინამიკურად განვათავსებინოთ მონაცემები.

შენიშვნა: თუ იყენებთ vscode-ს, დააყენეთ ფლაგინი “Nunjucks Template”.

/src/index.njk

---
title: "Home"
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

ჯერჯერობით ნანჯაკსის სინტაქსი არ გამოგვიყენებია, მაგრამ მაგის დროც მოვა! ფაილის ზემოთ ჩვენ დავწერეთ ე.წ “front matter” რომელსაც 11ty წაიკითხავს და გადააქცევს ჯავასკრიპტის ობიექტად. იგი ჩვენთვის იქნება ხელმისაწვდომი სხვადასხვა ვითარებაში. Front matter ჩვეულებრივ YAML ფორმატისაა, თუმცა შეგიძლიათ JSON ფორმატის ხმარებაც თუკი პირველი დეფისების სამეულს მიუწერთ json-ს:

---json
{
    "title": "Home"
}
---

ვცადოთ და დავბილდოთ საიტი:

npm run start

ჩვენი საწყისი გვერდი ბრაუზერში უნდა გამოჩნდეს.

კომპონენტები და ლეიაუთები

ახლა გამოვიყენოთ 11ty-ს ლეიაუთები. 11ty თემფლეითების ენის მნიშვნელოვან ასპექტს იყენებს, მისი საშუალებით შეგვიძლია ერთგან განვსაზღვროთ მარკაპი და ის ბევრ სხვადასხვა ადგილას გამოვიყენოთ. შევქმნათ _includes ფოლდერი და მასში ფაილი base.njk. ეს იქნება ჩვენი მთავარი ლეიაუთი.

/src/_includes/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {# ლოგო #}
    <link rel="icon" type="image/png" href="/assets/icons/11ty-logo.png" />
    {# სტილები #}
    <link rel="stylesheet" href="/styles/main.css" />
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>ეს ტექსტი არის base.njk-დან</h1>
    <main>{{ content | safe }}</main>
  </body>
</html>

index.njk-ში მივუთითოთ, რომელ ლეიაუთში გვინდა შეფვუთოთ ყველაფერი, რაც ამ ფაილში გვექნება.

---
layout: "base.njk"
title: "Home"
---

<div class="home-container">
  <h1>Hello World!</h1>
</div>

რადგან index.njk-ში ჩვენ layout-ს მივეცით მნიშვნელობა, 11ty ავტომატურად მოძებნის შესაბამისი სახელის ფაილს _includes ფოლდერში. ის ინფორმაცია, რომელიც ჩვენ front matter-ში დავწერეთ პირდაპირაა ხელმისაწვდომი ლეიაუთში. მისი განთავსება შეგვიძლია ნანჯაკსის სინტაქსით. ვებსაიტის სათაური სწორედ ამის საშუალებით განვათავსეთ head-ში. content არის გლობალური ობიექტი, რომელიც ამ შემთხვევაში არის index.njk-ს შიგთავსი, დაკონვერტირებული HTML-ში. ჩვენ მას safe ფილტრში ვატარებთ |-სიმბოლოთი, რათა html ინტერპრეტირდეს. სხვა შემთხვევაში, მარკაპი პირდაპირ დარენდერდება როგორც ტექსტი (ეს ნანჯაკსის სპეციფიკაა).

რეპოზიტორიიდან ჩამოწერეთ წინასწარ გამზადებული სტილების ფაილი და ვებსაიტის ლოგო. სტილები განვათავსოთ /src/styles/main.css-ში, ხოლო ლოგო – /src/assets/icons/11ty-logo.png. ჩვენ მხოლოდ აქ მოგვიწევს სტილების დალინკვა და ნებისმიერი ფაილი, რომელიც ამ ლეიაუთს გამოიყენებს, შესაბამის სტილებსაც მიიღებს.

აქვე დაგვჭირდება 11ty-ის ვუთხრათ, რომ საიტის აგების დროს დამატებითი ფაილებიც გადაიტანოს public ფოლდერში, თორემ თავისთავად თემფლეითის ფაილების გარდა მას სხვა არაფერი გადააქვს:

/.eleventy.js

module.exports = function (eleventyConfig) {
  // გადაიტანს აღნიშნულ ფაილებს public ფოლდერში
  eleventyConfig.addPassthroughCopy("./src/styles");
  eleventyConfig.addPassthroughCopy("./src/assets");

  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

ახლა შევქმნათ ნავიგაციის კომპონენტი.

/src/_includes/header.njk

<header>
    <h3>My Blog</h3>
    <nav>
        <ul>
            <li><a href="/" class="{{ "active" if page.url === "/" }}">Home</a></li>
            <li><a href="/blog" class="{{ "active" if "/blog" in page.url }}">Blog</a></li>
        </ul>
    </nav>
</header>

11ty გვაწვდის გლობალურ ობიექტს page, რომლითაც ჩვენ შეგვიძლია აქტიური ლინკის მიხედვით კონკრეტული კლასი მივანიჭოთ ნავიგაციის თითოეულ ელემენტს. კლასსში ჩვენ ნანჯაკსის სინტაქსის ბრჭყალებს ვხსნით და ვწერთ ლოგიკას. ჩვენ გვინდა რომ მთავარი გვერდის ღილაკს მიენიჭოს active კლასი, თუკი გვერდის ლინკი არის “/”. მეორე ღილაკი კი მაშინ უნდა იყოს აქტიური, თუკი გვერდის ლინკი შეიცავს “/blog”-ს (ამიტომ ვიყენებთ in ოპერატორს). ეს იმას ნიშნავს, რომ ღილაკს active კლასი მაშინაც მიენიჭება, თუ ლინკი ზუსტად “/blog” არ არის (მაგალითად “/blog/my-blog-title”).

11ty-ში ნავიგაციის უკეთ გასააზრებლად შეგიძლიათ გაეცნოთ ოფიციალურ დოკუმენტაციას.

ნავიგაცია განვათავსოთ base.njk-ში.

/src/_includes/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/assets/icons/11ty-logo.png" />
    <link rel="stylesheet" href="/styles/main.css" />
    <title>{{ title }}</title>
  </head>
  <body>
    {% include "header.njk" %}
    <main>{{ content | safe }}</main>
  </body>
</html>

აქვე უნდა შევქმნათ blog გვერდი. ჩვეულებრივ, src-ში ჩვენ რა თემფლეით ფაილსაც შევქმნით, გადაიქცევა შესაბამისი სახელის მქონე გვერდად public ფოლდერში. აქაც ჩვენ base.njk-ს ვიყენებთ ლეიაუთად და შევცვლით მხოლოდ სათაურს.

/src/blog.njk

---
layout: "base.njk"
title: "Blog"
---

<div class="blogs">
  <h1>აქ იქნება ბლოგ-პოსტები</h1>
</div>

ახლა ნავიგაციაში Blog ღილაკმა უნდა გადაგვიყვანოს სათანადო გვერდზე, ხოლო მისი ფერი უნდა შეიცვალოს.

კოლექციები - ბლოგ-პოსტები markdown-ით

მარკდაუნის შესახებ თუ ბევრი არაფერი იცით, გაეცანით ამ სტატიას. ჩვენ ბლოგ-პოსტების დასაწერად გამოვიყენებთ ამ მარტივ და მოხერხებულ მარკაპის სისტემას. თითოეული პოსტი იქნება ცალკეული ფაილი, რომელშიც განთავსდება front matter, რათა 11ty-ით საჭირო ინფორმაცია დავარენდეროთ და, რა თქმა უნდა, თვითონ მარკდაუნი – ბლოგის ტექსტი. როცა ვებსაიტს ლაივში გავუშვებთ, ახალი პოსტის დასამატებლად უბრალოდ ახალ მარკდაუნის ფაილს დავამატებთ რეპოზიტორიაში და დაქომითების შემდეგ Netlify და 11ty ყველაფერს თავისით მოაგვარებენ.

ვინაიდან ჩვენ გვინდა, რომ პოსტები მოექცეს blog-ის ლინკზე (website.com/blog/blogname), ჩვენ უნდა შევქმნათ ფოლდერი სახელად blog (src-ში) და იქ განვათავსოთ რამდენიმე მარკდაუნის ფაილი.

src ფაილის ამჟამინდელი სტრუქტურა (ცოტახნით დააიგნორეთ blog.json).

src
├── assets
│   ├── icons
│   │   └── 11ty-logo.png
│   └── images              # სურათები, რომელსაც პოსტში ვიყენებთ
│       ├── my-cat-1.jpg
│       ├── my-cat-2.jpg
│       └── my-cat-3.jpg
├── blog
│   ├── blog.json           # კონფიგურაციის ფაილი
│   ├── first-post.md
│   ├── second-post.md
│   └── third-post.md
├── blog.njk
├── _includes
├── index.njk
└── styles
    └── main.css

განვათავსოთ სამი პირობითი პოსტი. მათი სახელის მიხედვით 11ty ააგებს ბმულს, რომლითაც ამ პოსტს მივაგნებთ. მაგალითად, პირველი პოსტის ლინკი იქნება localhost:8080/blog/first-post/.

პოსტების შიგთავსი დიდწილად ერთნაირია:

/src/blog/first-post.md

---
title: "First Post"
date: 2022-09-01
description: "This is the first post on my 11ty site"
image: "/assets/images/my-cat-1.jpg"
imageAlt: "Picture of a cat"
tags: ["featured", "cat"]
---

## Habet arisque nec puer ipse ab adflatuque

Lorem markdownum silvis cecidit magnis Bacchi, est tenebas; est atque ita videt
mensuraque senectus multis quoniam et! Digitos palato Epidauria ea illos
committere Phinea trepidantem quare; tempora corpus ipsoque! Primis aequantibus
leto blanditur, contigero dixerat templisque undas promisistis inque, dant.
Utrumque es suas attulerat incubuit sum fabula ungues et pectus Enipeus frigida!
Iaculum inpositum ululatibus geminos inplet secura Aetnaea, per turbam superos
linguam tenuere: et concolor nimium!

<!-- ტექსტის გაგრძელება... -->

front matter-ში დამატებითი მონაცემები მივუთითეთ: სათაური, თარიღი (რომელსაც 11ty Date ობიექტად დააკონვერტირებს), აღწერა, სურათი, სურათის აღწერა და თაგები. თაგები საჭიროა კონტენტის გასაფილტრად. 11ty საშუალებას გვაძლევს რომ თაგების მიხედვით ავიღოთ და განვათავსოთ კოლექციიდან ნივთები. თუ არსებობს მონაცემი, რომელიც გვინდა რომ აბსოლუტურად ყველა კოლექციას მიენიჭოს, არაა საჭირო თითოეული მათგანისთვის ამ მონაცემის გაწერა front matter-ში. შეგვიშლია იმავე ფოლდერში შევქმნათ (ფოლდერის სახელის მქონე) კონფიგურაციის ფაილი:

/src/blog/blog.json

{
  "tags": "post"
}

ამ კონფიგურაციით ჩვენ ვეუბნებით 11ty-ს, რომ ყველა ფაილს blog-ში, მიენიჭოს თაგი “post”-ის მნიშვნელობით. როცა 11ty ჩვენი მარკდაუნის ფაილებისგან კოლექციას შექმნის, ჩვენ შეგვიძლია ყველა პოსტს ჩავწვდეთ სწორედ ამ post თაგის საშუალებით, რომელიც ყველა მარკდაუნის ფაილს ექნება blogs ფოლდერში. განვათავსოთ blog გვერდზე პოსტის ლინკები, თავისი გარეკანის სურათით, სათაურით, თარიღითა და აღწერით:

/src/blog.njk

---
layout: "base.njk"
title: "Blog"
---

<div class="blogs">
  <ul>
    {%- for post in collections.post | reverse -%}
    <li class="blog-preview">
      <img src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}" />
      <div class="blog-preview__details">
        <div>
          <h1>{{ post.data.title }}</h1>
          <p class="blog-preview__date">{{ post.data.date }}</p>
          <p>{{ post.data.description }}</p>
        </div>
        <div class="blog-preview__actions">
          <a href="{{ post.url }}">
            <h3>READ</h3>
          </a>
        </div>
      </div>
    </li>
    {%- endfor -%}
  </ul>
</div>

ჩვენ ლუპს ვაკეთებთ კოლექციის სიაზე. 11ty გლობალურ ობიექტს (collections) იმ თაგის სახელით მიუჩენს კოლექციის სიას, რომელსაც ჩვენ front matter-ში, ან კონფიგურაციაში მივუთითებთ. ვინაიდან blogs ფოლდერში ყველა კოლექციას გააჩნია post თაგი, collections.post მოგვაწვდის სიას ინფორმაციით ყველა ფაილის შესახებ. ეს სია შემდგომ გატარებულია reverse ფილტრში, რადგან თავისთავად კოლექცია დალაგებული უძველესიდან უახლესამდე, ჩვენ კი პირიქით გვინდა – უახლესი უნდა იყოს თავში. ის მონაცემები, რომლებიც განსაკუთრებულ ფუნქციას არ ასრულებენ front matter-ში (განსაკუთრებული ფუნქციის მაგალითია layout და tags), ჩვენთვის ხელმისაწვდომია data ფროფერთის ქვეშ. მაგალითად სათაური თითოეული პოსტისთვის იქნება post.data.title. იგივე ეხება აღწერასა, თარიღს, სურათსა და სურათის აღწერას, რომელსაც ჩვენ დინამიკურად განვათავსებთ თემფლეითში. რაღაცებს 11ty თავისით აგენერირებს, მაგალითად, კოლექციის ლინკს (post.url) რომელიც ჩვენ a თაგში უნდა განვათავსოთ რათა ამ პოსტის ლინკზე გადასვლა შევძლოთ. არ დაგავიწყდეთ, რომ ლუპი აუცილებლად უნდა დაიხუროს {%- endfor -%}-ით.

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

ჩვენი პოსტების სიას შევხედოთ ბმულზე localhost:8080/blog/.

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

/src/_includes/blog.njk

---
layout: "base.njk"
---

<article>
  <img src="{{ image }}" alt="{{ imageAlt }}" />
  <h1>{{ title }}</h1>
  {{ content | safe }}
</article>

აქ რაღაც საინტერესო ხდება: ჩვენ ახალ ლეიაუთში მივუთითებთ, რომ მან, თავის მხრივ, გამოიყენოს base.njk ლეიაუთი. ყველა საჭირო მეტა თაგები, body და main თაგები უზრუნველყოფილი იქნება ამ უკანასკნელის მიერ, და ჩვენ ამ main თაგის შიგნით შევქმნით ლეიაუთის იმ უნიკალურ ნაწილს, რომელიც სასურველი იქნება მხოლოდ ბლოგ-პოსტებისთვის. რათა მარკაპი სემანტიკურად გამართული იყოს, ჩვენ ტექსტი უნდა მოვაქციოთ article თაგში. აქვე განვათავსოთ სათაური და პოსტის სურათიც.

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

/src/blog/blog.json

{
  "layout": "blog.njk",
  "tags": "post"
}

ახლა ჩვენ თავისუფლად უნდა შევძლოთ სიიდან პოსტების გახსნა! როგორც ხედავთ, ლეიაუთიდან ჩვენ თემფლეითში სურათი და სათაურიც განვათავსეთ (ასევე სათაური დოკუმენტის თავში, რომელიც ბრაუზერის ტაბზე უნდა გამოჩნდეს). ბლოგ-პოსტი ლეიაუთად იყენებს blog.njk-ს, რომელიც ტექსტს ამატებს სურათსა და სათაურს, ხოლო ამ ყველაფერს article თაგებში აქცევს. თავის მხრივ ეს ლეიაუთი იყენებს base.njk-ს, რომელიც შეფუთავს ამ ყველაფერს სხვა საჭირო მარკაპით.

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

/src/_includes/post-preview.njk

<li class="blog-preview">
  <img src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}" />
  <div class="blog-preview__details">
    <div>
      <h1>{{ post.data.title }}</h1>
      <p class="blog-preview__date">{{ post.data.date | dateString }}</p>
      <p>{{ post.data.description }}</p>
    </div>
    <div class="blog-preview__actions">
      <a href="{{ post.url }}">
        <h3>READ</h3>
      </a>
    </div>
  </div>
</li>

/src/blog.njk

---
layout: "base.njk"
title: "Blog"
---

<div class="blogs">
    <ul>
        {%- for post in collections.post | reverse -%}
            {% include "post-preview.njk" %}
        {%- endfor -%}
    </ul>
</div>

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

/src/index.njk

---
layout: "base.njk"
title: "Home"
---

<div class="home-container">
    <h1>Featured Posts</h1>
    <ul>
        {%- for post in collections.featured -%}
            {% include "post-preview.njk" %}
        {%- endfor -%}
    </ul>
</div>

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

Filters & Shortcodes

Filters

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

/.eleventy.js

const { DateTime } = require("luxon");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/styles");
  eleventyConfig.addPassthroughCopy("./src/assets");

  // თარიღის გარდაქმნის ფილტრი
  eleventyConfig.addFilter("dateString", (dateObj) => {
    return DateTime.fromJSDate(dateObj).toLocaleString();
  });

  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

luxon ბიბლიოთეკაა, რომელიც 11ty-ს მოყვება. ჩვენ მას ვაიმპორტებთ და კონფიგურაციის API-ს დახმარებით ვარეგისტრირებთ ახალ ფილტრს. addFilter ფუნქცია პირველ არგუმენტად იღებს ფილტრის სახელს, ხოლო მეორე არგუმენტად ფილტრის ლოგიკას ქოლბექ ფუნქციაში. ქოლბექის პარამეტრი არის ის, რასაც ამ ფილტრში გავატარებთ თემფლეითიდან. ვინაიდან 11ty ჩვენ თარიღს Date ობიექტად ინახავს, სწორედ ამ ფორმით მივიღებთ მას ფუნქციაშიც. დაიმპორტებული ბიბლიოთეკით ვაბრუნებთ გარდაქმნილ თარიღს, სტრინგის ფორმით.

ახლა შეგვიძლია ეს ფილტრი გამოვიყენოთ:

/src/_includes/post-preview.njk

<li class="blog-preview">
  <img src="{{ post.data.image }}" alt="{{ post.data.imageAlt }}" />
  <div class="blog-preview__details">
    <div>
      <h1>{{ post.data.title }}</h1>
      <p class="blog-preview__date">{{ post.data.date | dateString }}</p>
      <p>{{ post.data.description }}</p>
    </div>
    <div class="blog-preview__actions">
      <a href="{{ post.url }}">
        <h3>READ</h3>
      </a>
    </div>
  </div>
</li>

post.data.date-ს |-სიმბოლოთი ვატარებთ ჩვენ მიერ განსაზღვრულ ფილტრში: dateString.

გაითვალისწინეთ: როცა ცვლილება შეგვაქვს .eleventy.js ფაილში, საჭიროა სერვერის დარესტარტება, რათა ეს ცვლილებები აისახოს.

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

Shortcodes

შორთკოდები 11ty-ის მორიგი ხელსაწყოა, რომლითაც შეგვიძლია ჯავასკრიპტის ფუნქციის აუთფუთი გამოვსახოთ თემფლეითში. ვთქვათ გვინდა შევქმნათ footer-ი, რომელიც ყოველთვის აჩვენებს მიმდინარე წელს.

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

/.eleveny.js

module.exports = function (eleventyConfig) {
  // ... სხვა რაღაცები
  eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

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

/src/_includes/footer.njk

<footer>
  <span> &copy; ვიღაც ვიღაციძე {% year %} </span>
</footer>

და განვათავსოთ ეს ფუტერი ჩვენს მთავარ ლეიაუთში (base.njk), body თაგის დახურვამდე.

/src/_includes/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/assets/icons/11ty-logo.png" />
    <link rel="stylesheet" href="/styles/main.css" />
    <title>{{ title }}</title>
  </head>
  <body>
    {% include "header.njk" %}
    <main>{{ content | safe }}</main>
    {% include "footer.njk" %}
  </body>
</html>

დავარესტარტოთ სერვერი და დავტკბეთ შედეგით!

SEO

რათა საძიებო სისტემებმა უკეთ დააფიქსირონ ჩვენი ვებსაიტი, კარგი იქნება თუ რამდენიმე მეტა თაგს დავუმატებთ ვებსაიტს. ესენია Open Graph Tags. ამისათვის შევქმნათ ცალკე კომპონენტი, სადაც დინამიკურად განვათავსებთ მონაცემებს, რომელსაც თითოეული პოსტიდან ვიღებთ:

/src/_includes/og-tags.njk

<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<meta property="og:image" content="{{ image }}" />

და შემდეგ ეს დავაიმპორტოთ ჩვენი მთავარი ლეიაუთის head-ში.

/src/_includes/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/assets/icons/11ty-logo.png" />
    <link rel="stylesheet" href="/styles/main.css" />
    {% include "og-tags.njk" %}
    <title>{{ title }}</title>
  </head>
  <body>
    {% include "header.njk" %}
    <main>{{ content | safe }}</main>
    {% include "footer.njk" %}
  </body>
</html>

ასე სოციალური ქსელები თქვენი გაზიარებული ბლოგის ლინკებისგან შექმნიან ლამაზ preview-ებს. მაგალითად, თქვენი დაჰოსტილი საიტის ლინკები შეგიძლიათ შემდგომ შეამოწმოთ Facebook Debugger-ზე.

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

ვებსაიტის დაჰოსტვა და პოსტების დამატება

როგორ დავამატოთ ახალი პოსტი? შევქმნათ ახალი მარკდაუნის ფაილი blog ფოლდერში ან, რადგან მაინც სატესტო რეჟიმში ვართ, დააკოპირეთ არსებული ფაილი, შეუცვალეთ სახელი და შიგთავსი და შეხედეთ ბრაუზერს. წესით, ახალი პოსტის preview უნდა გამოჩნდეს. ლაივ ვებსაიტზეც ყველაფერი მსგავსი პრინციპით იმუშავებს.

ეს პროექტი შევინახოთ გითჰაბის რეპოზიტორიაზე. შემდგომ, ავტორიზაცია გავიაროთ Netlify-ზე და შევქმნათ ახალი ვებსაიტი, რომელსაც დავუკავშირებთ ამ ჩვენი გითჰაბის რეპოზიტორიას. Add a new site > import existing project > github > your_github_repo. აქ Netlify ხვდება, რომ 11ty-ს ვიყენებთ და კონფიგურაციას თვითონ აკეთებს, თუმცა რაღაცები ჩვენ განსხვავებულად გვაქვს პროექტში, ამიტომ შევასწოროთ: publish directory-ის გრაფაში _site-ს მაგივრად ჩავწეროთ public, რადგან გენერირებული საიტი, ჩვენი კონფიგურაციის მიხედვით, მანდ ინახება. თუ ეს კონფიგურაცია პროექტში არ მიგითითებიათ, _site დატოვეთ. ამის შემდეგ დააჭირეთ deploy site-ს. 11ty საკმაოდ მსუბუქი და სწრაფია, ამიტომ build-ს დიდი დრო არ დასჭირდება.

მას შემდეგ რაც საკუთარი ნაშრომით ტკბობას მორჩებით, შეგიძლიათ ახალი ბლოგის ატვირთვა სცადოთ. გახსენით თქვენი ლოკალური პროექტის ფაილი ედიტორით (ან თუნდაც ბრაუზერიდან გახსენით გითჰაბის რეპოზიტორია და დააჭირეთ .-ს რათა remote editor გახსნათ). blog ფოლდერში შექმენით ახალი მარკდაუნის ფაილი, დაწერეთ ტექსტი, მიუთითეთ front matter-ში მონაცემები იმავე პრინციპით, როგორც სხვა პოსტებში და შემდეგ დააქომითეთ ახალი ფაილი:

git add .
git commit -m "added a new post"
git push

(ასევე შეგიძლიათ vscode-ით git-ის მენიუთი დააქომითოთ და დაასინქრონიზიროთ რეპოზიტორია)

როცა ცვლილებებს გითჰაბზე ასახავთ, Netlify ამ ცვლილებებს ავტომატურად დააფიქსირებს და საიტს ხელახლა გაუკეთებს build-ს, ამჯერად ახალი პოსტით. ამას Netlify ნახევარ წუთსაც არ მოანდომებს.

ასე მარტივად შეგიძლიათ ააწყოთ ვებსაიტი ბლოგით და ამისთვის არ არის საჭირო დიდი და მძიმე ფრეიმვორქები. Netlify ასევე საშუალებას გაძლევთ დააინტეგრიროთ კონტენტის მენეჯმენტის სისტემა (CMS), რომლის საშუალებითაც პოსტების დამატება და რედაქტირება შეგიძლიათ ბრაუზერშივე. Netlify-ს საშუალებით შეგიძლიათ დომეინის შეძენაც, ან არსებული დომეინის დაკავშირებაც. ასერომ, მარტივი ვებსაიტის სრულფასოვნად აგებასა და და ჰოსტვას ბევრი არაფერი უნდა!

ავაწყოთ მარტივი ვებსაიტი ბლოგით (ზედმეტი ჯავასკრიპტის გარეშე)

სტატიკური ვებსაიტის გენერატორი

გავამზადოთ პროექტი

კომპონენტები და ლეიაუთები

კოლექციები - ბლოგ-პოსტები markdown-ით

Filters & Shortcodes

Filters

Shortcodes

SEO

ვებსაიტის დაჰოსტვა და პოსტების დამატება

გაკვეთილის მასალა

რესურსები