Создание вашего сайта с помощью Jigsaw

Прелесть его в том, что он позволяет мне писать сообщения в блоге в уценке, имеет простое представление лезвия для отображения страниц и сообщений — и может быть создан для развертывания на любом количестве сервисов от GitHub Pages до Netlify и других.

Начать работу с Jigsaw намного проще, чем вы можете себе представить, поэтому давайте вместе пройдемся по настройке. Наш первый шаг — создать каталог для вашего проекта. Я использую ~/code/github/JustSteveKing для большинства своих проектов, для которых я не хочу использовать Laravel Valet. Это позволяет мне легко организовывать проекты по репозиторию и организации GitHub.Итак, запустите следующую команду, чтобы создать каталог:

mkdir jigsaw-website

Наш следующий шаг — войти в каталог:

cd $_
 
// or
 
cd jigsaw-website

Теперь мы вошли в каталог. Нам нужно сообщить Composer, что мы хотим использовать Jigsaw, поэтому запустите следующую команду composer:

composer require tightenco/jigsaw

После запуска этого процесса у нас есть несколько вариантов. Доступно множество шаблонов, а не только перечисленные в документации проекта.Поиск в Google поможет вам найти многие из них. Мы можем начать с нуля или использовать один из доступных шаблонов.

Мы будем использовать один из созданных самими Tighten под названием blog. Чтобы установить это, выполните следующую команду головоломки:

./vendor/bin/jigsaw init blog

Это позволит вам быстро загрузить весь блог, настроить все, поэтому все, что вам нужно сделать, это сосредоточиться на написании, но у вас также есть возможность начать стилизацию и изменение шаблонов. Давайте посмотрим на веб-сайт и посмотрим, с чем мы имеем дело:

./vendor/bin/jigsaw serve

Это должно запустить для вас сервер PHP на http://localhost:8000. , так что посетите его и ознакомьтесь с вашим новым блогом!

Теперь мы можем начать думать о том, как мы могли бы написать наш контент. Откройте проект в выбранном вами редакторе кода, и мы сможем изучить, что там есть.

Вы можете изменить конфигурацию своего веб-сайта в config.php , поэтому, если вы откроете его и измените такие значения, как siteName и siteDescriptionесли вы перезапустите сайт, вы должны увидеть свои изменения.

Вы также заметите параметр конфигурации, называемый коллекции. Это коллекции контента, и вы можете иметь столько, сколько вам нужно. Вы даже можете использовать удаленные коллекции, где вы можете получать данные из API и создавать записи на созданном вами сайте для их просмотра — круто, правда?

Мы не будем слишком концентрироваться на этом.Вместо этого давайте начнем писать сообщения в блоге. Сначала мы хотим удалить все фиктивные данные, созданные этим шаблоном — в конце концов, это не то, что нам нужно в нашем блоге. Удалите все файлы из следующих каталогов:

• source/_categories
• source/_posts_

Теперь мы можем создать новый пост для нашего веб-сайта. Затем создайте новый файл с помощью командной строки:

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

Затем откройте его в редакторе, и это будет ваш первый пост в блоге. Файлы уценки состоят из двух частей. У вас есть то, что называется вступительной частью, синтаксис YAML для предоставления информации о самом файле Markdown. Здесь мы добавим такие вещи, как название, автора, категории и время создания. Это должно выглядеть так:

---
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]
---

Итак, у нас есть заголовок Моя первая запись в блоге, дата и описание, затем категории. Важно помнить, что категории не создаются для вас. Чтобы добавить категорию, создайте еще один новый файл:

touch source/_categories/writting.md

Как и сообщения, он также разделен на две части. Итак, мы добавим следующее:

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

Как видите, у нас есть две части файла уценки: вступительная часть и фактическое содержание.Если мы теперь вернемся к нашему сообщению в блоге, мы можем добавить все, что захотим, в уценку здесь:

---
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/)

Теперь, если мы снова обслуживаем веб-сайт, используя команду jigsaw :

./vendor/bin/jigsaw serve

Когда мы посетим http://localhost:8000/blog/my-first-blog-post, мы увидим новую страницу мы только что создали.

Итак, мы рассмотрели, как писать контент, что, честно говоря, не слишком утомительно.Что еще мы хотели бы видеть на нашем сайте? Что ж, в этом шаблоне есть способ создать карту сайта, что очень полезно!

В Jigsaw есть концепция под названием Listeners, которая запускается после конкретные события в процессе создания веб-сайта. Если мы откроем bootstrap.php, вы должны увидеть следующий код:

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

У нас есть два зарегистрированных слушателя, один из которых сгенерирует для нас карту сайта, а другой сгенерирует для нас индекс. Индекс используется в функции поиска веб-сайта, которая является частью шаблона блога. Давайте посмотрим на этот GenerateIndex и посмотрим, что он делает:

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)
		);
	}
}

Этот класс вызывается и обрабатывается, поэтому мы получаем сообщенияcollection, сопоставляем каждую из них и возвращаем массив информации, которую мы хотим добавить в поисковый индекс. Далее мы помещаем содержимое в новый файл JSON, кодируя его. Вроде круто, и хороший способ построить поисковый индекс. Эти данные уже общедоступны на нашем веб-сайте, поэтому добавление общедоступного файла JSON упрощает доступ к ним с помощью поиска.

Давайте добавим RSS-канал на наш веб-сайт прямо сейчас. .Вы можете использовать несколько разных способов сделать это — с помощью слушателя или просто как представление. Исходя из моего опыта использования Jigsaw, я решил создать для этого представление.

В нашем исходном каталоге нам нужно создать новый файл с именем source/ blog/rss.blade.xml, обратите внимание на расширение файла. Мы будем создавать файл XML (вздрагиваю), но с помощью блейда, чтобы у нас был знакомый синтаксис.В этот файл добавьте следующий код:

{!! '<'.'?'.'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>

Мы создаем канал с информацией о нашем сайте, затем просматриваем каждое сообщение и добавляем элемент в этот канал, создавая действительный Новостная лента. Чтобы добавить ссылку в ленту, отредактируйте основной макет, чтобы добавить ссылку в заголовок нашего html. Это позволяет читателям RSS-канала автоматически обнаруживать канал. Откройте source/_layouts/main.blade.php.и реорганизуйте элемент <head>, чтобы он выглядел следующим образом:

<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>

Как видите, мы добавили следующий фрагмент, указывающий на наш канал RSS.

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

Итак, изучив этот код, мы уже имеем канал — канал атома. Это входит в состав самого шаблона, но представляет собой фид Atom поверх RSS-канала — впрочем, это не проблема.Наличие обоих вариантов означает, что вы более доступны, что никогда не бывает плохо, когда речь идет о вашем веб-сайте.

Последний шаг в использовании Jigsaw – создание собственного веб-сайта. веб-сайте, поэтому он готов к развертыванию, и вы можете сделать это с помощью следующей команды-головоломки:

./vendor/bin/jigsaw build production

Это встроит ваш локальный сайт в статический контент внутри build_production< /код>, новый каталог, который появляется после запуска этой команды. Последний шаг — развернуть где-нибудь свой веб-сайт. В документации есть инструкции по развертыванию на: