Budowanie witryny za pomocą Jigsaw

Jako programiści masz dość dużą szansę na posiadanie osobistej witryny internetowej. W końcu to właśnie robimy - i najprawdopodobniej przebudowałeś to niezliczoną ilość razy. Ponieważ wszyscy wiemy, że musimy odbudować naszą stronę internetową, zanim skończymy ten post na blogu, który mieliśmy zamiar napisać...

Jestem winny jako następny programista za ten; szczerze, nie ma w tym wstydu.Używamy przebudowy naszej strony internetowej jako doświadczenia edukacyjnego i czasu na eksperymentowanie z nowymi pomysłami lub projektami. Ale jeśli kiedykolwiek dojdziesz do punktu, w którym pomyślisz: „Chcę tylko prostej strony internetowej, abym mógł pisać”, jest odpowiedź. Jigsaw to statyczny generator witryn stworzony przez partnerów Laravel Tighten, i to jest to, czego używam przez ostatni rok na mojej osobistej stronie internetowej.

Piękno polega na tym, że pozwala mi pisać posty na blogu w przecenach, ma prosty widok typu blade do renderowania stron i postów – i może być zbudowany do wdrożenia w dowolnej liczbie usług, od GitHub Pages po Netlify i nie tylko.

Rozpoczęcie pracy z Jigsaw jest znacznie prostsze, niż możesz sobie wyobrazić, więc przejdźmy razem przez konfigurację. Naszym pierwszym krokiem jest stworzenie katalogu dla Twojego projektu. Używam ~/code/github/JustSteveKing do większości moich projektów, do których nie chcę używać Laravel Valet. Pozwala mi łatwo organizować projekty według repozytorium GitHub i organizacji.Uruchom więc następujące polecenie, aby utworzyć katalog:

mkdir jigsaw-website

Naszym następnym krokiem jest wejście do katalogu:

cd $_
 
// or
 
cd jigsaw-website

Teraz weszliśmy do katalogu. Musimy powiedzieć Composerowi, że chcemy używać Jigsawa, więc uruchom następujące polecenie kompozytora:

composer require tightenco/jigsaw

Po uruchomieniu tego procesu mamy kilka opcji. Dostępnych jest wiele szablonów, nie tylko te wymienione w dokumentacji projektu.Wyszukiwarka Google pomoże Ci znaleźć wiele z nich. Możemy zacząć od zera lub skorzystać z jednego z dostępnych szablonów.

Będziemy używać jednego z tych stworzonych przez Tighten, zwanego blog. Aby to zainstalować, uruchom następujące polecenie układanki:

./vendor/bin/jigsaw init blog

Spowoduje to szybkie uruchomienie całego bloga, ustawiając wszystko, więc wszystko, co musisz zrobić, to skupić się na pisaniu – ale masz również możliwość rozpoczęcia stylizacji i modyfikowania szablonów. Zajrzyjmy na stronę i zobaczmy, z czym mamy do czynienia:

./vendor/bin/jigsaw serve

To powinno uruchomić serwer PHP na http://localhost:8000 , więc odwiedź go i zapoznaj się ze swoim nowym blogiem!

Teraz możemy zacząć myśleć o tym, jak możemy napisać nasze treści. Otwórz projekt w wybranym edytorze kodu, a my możemy zbadać, co tam jest.

Możesz zmienić konfigurację swojej witryny w config.php , więc jeśli otworzysz go i zmienisz wartości, takie jak siteName i siteDescriptionjeśli ponownie uruchomisz witrynę, zmiany powinny zostać odzwierciedlone.

Zauważysz również opcję konfiguracji o nazwie kolekcje. Są to kolekcje treści, których możesz mieć tyle, ile potrzebujesz. Możesz nawet korzystać ze zdalnych kolekcji, w których możesz pobierać dane z interfejsu API i tworzyć rekordy w utworzonej witrynie, aby je wyświetlać – fajnie, prawda?

Nie będziemy skoncentruj się zbytnio na tym.Zamiast tego zacznijmy pisać posty na blogu. Najpierw chcemy usunąć wszystkie fałszywe dane utworzone przez ten szablon - w końcu nie jest to coś, czego chcielibyśmy na naszym blogu. Usuń wszystkie pliki w następujących katalogach:

• source/_categories
• source/_posts_

Teraz możemy przyjrzeć się tworzeniu nowego posta na naszej stronie internetowej. Następnie utwórz nowy plik za pomocą wiersza poleceń:

touch source/_posts/my-first-blog-post.md

Następnie otwórz go w swoim edytorze, a to będzie Twój pierwszy wpis na blogu. Pliki przecen składają się z dwóch części. Masz tak zwaną przednią sprawę, składnię YAML do dostarczania informacji o samym pliku Markdown. Tutaj dodamy takie rzeczy jak tytuł, autor, kategorie i kiedy zostało utworzone. Powinno to wyglądać tak:

---
extends: _layouts.post
section: content
title: My First Blog Post
date: 2022-06-21
description: This will be your meta description, make sure it isn't too long
categories: [writting]
---

Więc mamy tytuł Mój pierwszy wpis na blogu, data i opis, a następnie kategorie. Ważną rzeczą do zapamiętania jest to, że kategorie nie są tworzone dla Ciebie. Aby dodać kategorię, utwórz kolejny nowy plik:

touch source/_categories/writting.md

Podobnie jak posty, ten również jest podzielony na dwie części. Dodamy więc następujące elementy:

---
extends: _layouts.category
title: Writing
description: All posts that are about writing.
---
 
These posts are about writing and stuff.

Jak widać, mamy dwie części do pliku przecen, przednią część i rzeczywistą zawartość.Jeśli teraz wrócimy do naszego wpisu na blogu, możemy tutaj dodać wszystko, co chcemy w przecenach:

---
extends: _layouts.post
section: content
title: My First Blog Post
date: 2022-06-21
description: This will be your meta description, make sure it isn't too long
categories: [writting]
---
 
This is my blog post.
 
## Here is a heading 2
 
- here
 
- is
 
- a
 
- list
 
> Even a blockqute
 
[And a link](https://www.laravel-news.com/)

Teraz, jeśli ponownie obsłużymy witrynę, używając polecenia jigsaw :

./vendor/bin/jigsaw serve

Kiedy odwiedzimy http://localhost:8000/blog/my-first-blog-post zobaczymy nową stronę właśnie stworzyliśmy.

Omówiliśmy więc, jak pisać treści, które w uczciwy sposób nie były zbyt obciążające.Czego jeszcze chcielibyśmy na naszej stronie internetowej? Cóż, ten szablon zawiera sposób na wygenerowanie mapy witryny, co jest bardzo pomocne!

Jigsaw ma koncepcję o nazwie Odbiorniki, która działa po konkretne zdarzenia podczas procesu budowy strony internetowej. Jeśli otworzymy bootstrap.php, powinieneś zobaczyć następujący kod:

<?php
 
declare(strict_types=1);
 
$events->afterBuild(App\Listeners\GenerateSitemap::class);
$events->afterBuild(App\Listeners\GenerateIndex::class);

Mamy dwóch zarejestrowanych słuchaczy, jeden, który wygeneruje dla nas mapę witryny, a drugi wygeneruje dla nas indeks. Indeks jest używany w wyszukiwarce witryny - coś, co jest częścią szablonu bloga. Rzućmy okiem na ten GenerateIndex i zobaczmy, co robi:

declare(strict_types=1);
 
namespace App\Listeners;
 
use TightenCo\Jigsaw\Jigsaw;
 
class GenerateIndex
{
	public function handle(Jigsaw $jigsaw): void
	{
		$data = collect($jigsaw->getCollection('posts')
			->map(function ($page) use ($jigsaw) {
				return [
					'title' => $page->title,
					'categories' => $page->categories,
					'link' => rightTrimPath(
						$jigsaw->getConfig('baseUrl')
					) . $page->getPath(),
					'snippet' => $page->getExcerpt(),
				];
		})->values());
 
		file_put_contents(
			$jigsaw->getDestinationPath() . '/index.json',
			json_encode($data)
		);
	}
}

Ta klasa jest wywoływana i obsługiwana, więc otrzymujemy postykolekcji, mapuje każdy z nich i zwraca tablicę informacji, które chcemy dodać do indeksu wyszukiwania. Następnie umieszczamy zawartość w nowym pliku JSON kodującym ją. Fajny i fajny sposób na zbudowanie indeksu wyszukiwania. Te dane są już publicznie dostępne w naszej witrynie, więc dodanie publicznie dostępnego pliku JSON umożliwia nam łatwiejszy dostęp do nich poprzez wyszukiwanie.

Dodajmy teraz kanał RSS do naszej witryny .Możesz to zrobić na kilka różnych sposobów – za pomocą odbiornika lub po prostu jako widok. Z mojego doświadczenia w korzystaniu z Jigsawa, zdecydowałem się na stworzenie tego widoku.

W naszym katalogu źródłowym będziemy musieli utworzyć nowy plik o nazwie source/ blog/rss.blade.xml, zwróć uwagę na rozszerzenie pliku. Będziemy tworzyć plik XML (shudder), ale używając bladego, dzięki czemu będziemy mogli mieć znajomą składnię.Wewnątrz tego pliku dodaj następujący kod:

{!! '<'.'?'.'xml version="1.0" encoding="UTF-8" ?>' !!}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/">
    <channel>
        <title>{{ $page->siteName }}</title>
        <link>{{ $page->baseUrl }}</link>
        <description><![CDATA[{{ $page->siteDescription }}]]></description>
        <atom:link href="{{ $page->getUrl() }}" rel="self" type="application/rss+xml" />
        <language>{{ $page->siteLanguage }}</language>
        <lastBuildDate>{{ $posts->first()->getDate()->format(DateTime::RSS) }}</lastBuildDate>
 
        @foreach($posts as $post)
            <item>
                <title><![CDATA[{!! $post->title !!}]]></title>
                <link>{{ $post->getUrl() }}</link>
                <guid isPermaLink="true">{{ $post->getUrl() }}</guid>
                <description><![CDATA[{!! $post->description !!}]]></description>
                <content:encoded><![CDATA[{!! $post->getContent() !!}]]></content:encoded>
                <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">{{ $post->author }}</dc:creator>
                <pubDate>{{ $post->getDate()->format(DateTime::RSS) }}</pubDate>
            </item>
        @endforeach
    </channel>
</rss>

Tworzymy kanał z informacjami o naszej witrynie, a następnie przeglądamy każdy post i dodajemy element do tego kanału, tworząc prawidłowy Kanał RSS. Aby dodać link do kanału, edytuj główny układ, aby dodać link w nagłówku naszego html . Dzięki temu czytniki kanałów RSS mogą automatycznie wykryć kanał. Otwórz source/_layouts/main.blade.phpi zrefaktoryzuj element <head>, aby wyglądał następująco:

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="{{ $page->description ?? $page->siteDescription }}">
 
        <meta property="og:title" content="{{ $page->title ? $page->title . ' | ' : '' }}{{ $page->siteName }}"/>
        <meta property="og:type" content="{{ $page->type ?? 'website' }}" />
        <meta property="og:url" content="{{ $page->getUrl() }}"/>
        <meta property="og:description" content="{{ $page->description ?? $page->siteDescription }}" />
 
        <title>{{ $page->title ?  $page->title . ' | ' : '' }}{{ $page->siteName }}</title>
 
        <link rel="home" href="{{ $page->baseUrl }}">
        <link rel="icon" href="/favicon.ico">
        <link href="/blog/feed.atom" type="application/atom+xml" rel="alternate" title="{{ $page->siteName }} Atom Feed">
 
        <link rel="alternate" type="application/rss+xml" title="{{ $page->siteName }}" href="/blog/rss.xml" />
 
        @if ($page->production)
            <!-- Insert analytics code here -->
        @endif
 
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
        <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
    </head>

Jak widać, dodaliśmy następujący fragment, aby wskazać nasz kanał RSS.

<link rel="alternate" type="application/rss+xml" title="{{ $page->siteName }}" href="{{ $page->baseUrl.'/rss.xml' }}" />

Więc sprawdzając ten kod, mamy już kanał - kanał atomowy. Jest to część samego szablonu, ale jest to kanał Atom nad kanałem RSS — nie stanowi to jednak problemu.Posiadanie obu dostępnych opcji oznacza, że ​​jesteś bardziej dostępny, co nigdy nie jest złe, jeśli chodzi o Twoją witrynę.

Ostatnim krokiem w korzystaniu z Jigsawa jest zbudowanie własnej witryny sieci Web, więc jest gotowy do wdrożenia i możesz to zrobić za pomocą następującego polecenia układanki:

./vendor/bin/jigsaw build production

Spowoduje to zbudowanie witryny lokalnej w zawartość statyczną wewnątrz build_production< /kod>, nowy katalog, który pojawia się po uruchomieniu tego polecenia. Ostatnim krokiem jest wdrożenie gdzieś swojej witryny. Dokumentacja zawiera instrukcje dotyczące wdrażania na: