Создайте быстрый реактивный блог с Svelte и Sapper

Sapper - это рамка, построенная на вершине SVELTE. Он сосредотачивается на скорости из коробки с рендерингом сервера, ссылка на предварительную плату и способность создавать услуги обслуживания. В сочетании с SVELTE конечный результат представляет собой очень настраиваемый, молния быстрый участок с небольшим следом.

В этом руководстве мы будем использовать SAPPER, чтобы построить легкий сайт блогарования, используя компоненты Svelte (см. Как начать блог Сообщение для некоторых менее технических советов по венгу). Svelte - это рамка с разницей. Он анализирует код в компиляции и создает набор модулей в ванильном JavaScript, что позволяет избежать необходимости выполнения. Если вам нужна дополнительная помощь с макетами, затем проверьте наш пост о том, как получить идеальный Макет сайта Отказ Или для других вариантов, см. Этими лучшими Строители сайта и помните, вам также нужно будет получить ваш веб хостинг Сервис на точке.

Скачать файлы учебников на FilesiLo здесь

01. Установите зависимости

Во-первых, нам нужно скачать и устанавливать зависимости. Он полагается на SVELTE для работы и требует другой структуры для создания сервера, но остальные зависит от создания приложения. В этом случае нам понадобится несколько пакетов, чтобы помочь извлекать файлы artdown позже.

Загрузите учебные посылки (выше), найдите их в командной строке и установите зависимости.

> npm install

02. Создание сервера

SAPPER построен в двух частях - клиент-боковой каркас и рендеринг сервера этой рамки. Это помогает получить эту дополнительную скорость повышения для тех, кто на более медленных сетях. Он построен с помощью узла, который позволяет промежуточным программным обеспечением SAPPER делать все тяжелые подъема для нас.

Откройте Server.js и создайте сервер с Express. Используя их рекомендации, мы включаем сжатие уменьшить файлы, которые мы отправляем и сирв служить статическими файлами.

 Express ()
  .использовать(
    Сжатие ({порог: 0}),
    SIRV («Static», {Dev}),
    sapper.middleware ()
  Несомненно
  .Listen (порт); 

03. Установите приложение

На стороне клиента нам нужно сказать Sapper, где установить приложение. Это похоже на реагировать DOM оказывать или Vue's $ Mount. методы. Внутри client.js, начните саперу и установите его в корню & lt; div & gt; элемент. Этот элемент включен в файл шаблона, который мы придем позже.

 Импорт * как SAPPER из «@ sapper / app»;
sapper.start ({
  Цель: Document.GetElementByID (
   "корень")
}); 

04. Запустите сервер разработки

С помощью основных серверов и файлов клиентов настроен, мы можем запустить сервер разработки. Это начинает сборку сервера, клиентских и сервисных рабочих файлов, и он начнет на порт 3000 по умолчанию. Всякий раз, когда файл изменяется, он перестроит часть приложения, измениваемого.

Запустите сервер в командной строке. Держите это окно открытым при разработке сайта.

 & gt; NPM запустить dev 

05. Создайте маршрут сервера

Все, что внутри каталога «Маршруты» превратится в маршрут для приложения. Файлы с .js Расширение станет тем, что называются серверными маршрутами. Эти маршруты не имеют пользовательского интерфейса, но вместо этого запрашиваются приложение для получения данных. В нашем случае мы будем использовать их для загрузки постов в блоге.

То маршруты / блог / index.json.js Файл создаст /blog.json. Конечная точка на нашем сервере. Импортируйте сообщения в блоге и создайте из них немного JSON.

 Импортирующие сообщения от «./_POSTS.JS»;
Содержание const = json.stringify (
  posts.map (post = & gt; ({{{
    Автор: post.author,
    Изображение: post.image,
    Название: post.title,
    Slug: Post.slug.
  }))
); 

06. Верните посты в блоге

Серверные маршруты экспорта функций, которые соответствуют HTTP-методам. Например, чтобы ответить на запрос на получение, мы экспортируем функцию под названием получать из файла маршрута сервера. Создать получать Функция, которая отвечает с данными, которые мы собирали на предыдущем шаге в формате JSON. Открыть http: // localhost: 3000 / blog.json В браузере и проверьте сообщения пройдут.

 Экспортная функция GET (REQ, RES) {
  res.writehead (200, {
    «Content-Type»: «Приложение / JSON»
  });

  Res.end (содержимое);
} 

07. Создать страницу индекса

Страницы сапер являются регулярными компонентами SVELTE. Каждый компонент является одним файлом с .svelte Расширение и содержат всю логику и стиль для управления собой. Любой JavaScript этот компонент должен работать, будет жить внутри & lt; скрипт & gt; Тег - как и любая HTML-страница.

Внутри маршруты / index.svelte. , импортируйте пару других компонентов SVELTE, которые мы можем использовать для создания этой страницы. Экспорт А. посты Переменная, которую мы заполним позже.

 & lt; скрипт & gt;
  Импорт контейнер от
   "../Components/container.svelte";
  Импорт Послема из
   "../Components/postsummary.svelte";
  экспорт пускать посты;
& lt; / script & gt; 

08. Получить данные в блоге

С настроек страницы мы можем начать приносить в блог (вы можете захотеть обратно их в облачное хранилище ). Нам нужно сделать это, как только страница загружена. Для того, чтобы сервер был в курсе этого, а затем запросить эти данные, когда оно оказывает страницу, она должна идти в отдельном & lt; контекст скрипта = "модуль" & gt; тег.

На сервере саппер будет искать предшествовать Функция и жди его, прежде чем показывать страницу. Здесь мы заполняем посты переменная с предыдущего шага.

 & lt; concript context = "модуль" & gt;
  Экспорт Async Function Preload () {
    const res = ждать
     this.fetch ("blog.json");
    const data = awaque res.json ();
    return {Сообщения: данные};
  }
& lt; / script & gt; 

09. Отображение почтовых свод

В Svelte переменные реагируют по умолчанию. Это означает, что, как они обновляют, наши компоненты также будут обновляться тоже. Как то посты Переменная теперь содержит массив блога, мы можем зацикливаться на них и отображать их.

Мы можем сделать это, используя #каждый блокировать. Они будут повторять то, что находится внутри кронштейнов для каждого элемента в массиве. В нижней части компонента снаружи любых тегов добавьте HTML для отображения сообщений.

 & lt; контейнер и gt;
  & lt; ul & gt;
    {# Eash Posts As Post}
      & lit; li & gt;
        & lt; povingummary {... post} / & gt;
      & lt; / li & gt;
    {/каждый}
  & lt; / ul & gt;
& lt; / container & gt; 

10. Стиль контейнера

Мы можем использовать компоненты, чтобы содержать любую повторную логику и использовать их, где бы они ни были необходимы - включены стили. То & lt; контейнер и gt; Компонент в настоящее время ничего не делает, но мы можем использовать его, чтобы придать максимальную ширину контента внутри него.

Открыть Компоненты / Container.svelte. и добавьте некоторые стили внутри & lt; Стиль & gt; тег. Любые стили, которые мы применяем внутри компонента, имеют значение для этого компонента, что означает, что мы можем использовать универсальный селектор.

 & lt; Стиль и GT;
  div {
    Маржа: 0 авто;
    прокладки: 0 1rem;
    Макс-ширина: 50rem;
  }
& lt; / style & gt; 

11. Определите & lt; Slot & GT;

Если компонент предназначен для родителей к другим компонентам, нам нужен способ пропустить эти компоненты. То & lt; slot & gt; Элемент делает только что и может быть размещено в любом месте, что имеет смысл в разметке компонента.

С & lt; контейнер и gt; мы обертываем содержание в стиле & lt; div & gt; Отказ Использовать & lt; slot & gt; внутри & lt; div & gt; чтобы позволить всему остальное.

 & lt; div & gt;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Выиск по расписанию

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

Открыть Компоненты / Possummary.svelte. и определите некоторые атрибуты в верхней части файла. Они заполняются оператором распространения, который мы добавили на шаге 09.

 & lt; скрипт & gt;
  Экспорт пусть автора;
  Экспорт отпустите изображение;
  Экспорт пусть слизни;
  Экспорт пусть название;
& lt; / script & gt; 

13. Отображение блога пост резюме

Когда атрибуты заполнены, они затем доступны как любая другая переменная. Наличие отдельных атрибутов для каждой части поста Summary, мы облегчаем прочтение разметки.

В нижней части компонента добавьте несколько HTML для создания резюме. Классы относятся к заранее определенным стилям.

& lt; статья & GT;
& lt; class = "Стиль" Post-image "="
 Фоновое изображение: URL ({image}) "/ & gt;
& lt; class = "Body" & GT;
  & lt; class = "автор-изображение" и GT;
    & lt; img src = {aper.image}
     alt = {author.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "о" & gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span class = "beline" & gt;
     {author.name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / статья & gt; 

14. Ссылка на блог

В отличие от аналогичных структур, таких как Next.js, Sapper работает с регулярными якорными ссылками. В Time Time он способен обнаруживать внутренние ссылки, а также сделать свои оптимации.

Обновите разметку с предыдущего шага, упаковывая его в ссылку. Вам нет необходимости создавать шаблонные строки, чтобы составить лобное URL.

  & lt; статья & GT; ... & lt; / Статья и GT;
& lt; / a & gt; 

15. Получите пост путем слизняка

SAPPER может создавать страницы на основе параметров URL. В нашем случае мы ссылаемся на / блог / слизняк, что означает, что он делает компонент в /routes/blog/[slug].svelte. Отказ

Внутри этого компонента извлеките данные блога, как и мы сделали для индекса. То параметры Объект содержит параметры из URL, который в этом случае является слизком.

 & lt; concript context = "модуль" & gt;
  Экспорт функции Async.
   Preload ({params}) {
    const res = a ждать this.fetch (
     `Блог / $ {paramsslug} .json`);
    const data = awaque res.json ();
  }
& lt; / script & gt; 

16. Ошибка, если сообщение не найдено

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

В конце метода предварительной нагрузки показать ошибку, если нет найденного сообщения. В противном случае установите почтовый переменная для страницы.

 Если (res.status === 200) {
  Возврат {пост: данные};
} еще {
  this.Error (RES.Status,
    data.message);
} 

17. Показать сообщение в блоге

С привлеченными данными мы можем теперь показать сообщение на странице. Похоже на компонент Postingummary, мы отображаем каждую часть контента пост внутри вьющихся кронштейнов. В нижней части компонента добавьте некоторую разметку для отображения на странице.

 & lt; Статья и GT;
  & lt; контейнер и gt;
    & lt; class = "title" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; class = "byline" & gt;
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "Post-Image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / container & gt;
& lt; / статья & gt; 

18. Показать HTML вместо

Сейчас глядя на страницу, все отображается правильно от фактического контента пост. Преобразование Markdown генерирует HTML, но мы видим, что напечатано как текст на сам пост. SAPPER имеет HTML Parser, встроенный для этого случая. Размещение @html. Перед ним будет использовать этот парсер.

 {@ html post.html} 

19. Установить страницу & lt; title & gt; ценить

Наш блог функционирует правильно, но есть пара изменений, необходимых для его завершения. Один из них должен обновить & lt; title & gt; На странице, чтобы Relarabel вкладку отображается.

Svelte поддерживает а & lt; svelte: head & gt; элемент, который вводит что-либо внутри него в & lt; head & gt; страницы. Используйте это, чтобы установить заголовок поста, как & lt; title & gt; Отказ

 & lt; svelte: head & gt;
  & lt; title & gt; {post.title} |
   Sapper blog & lt; / title & gt;
& lt; / svelte: head & gt; 

20. Обновление & lt; title & gt;

Каждая страница проходит через шаблон, чтобы отменить HTML для остальной части страницы. Именно здесь будут введены любые настройки, такие как импорт шрифта и мета-теги. Откройте шаблон .html и добавьте в крючок для содержимого & lt; svelte: head & gt; элемент с предыдущего шага. Добавьте это непосредственно перед закрытием & lt; / head & gt; тег.

 & lt; head & gt;
  [...]% sapper.head%%
& lt; / head & gt; Последняя вещь, которую нам нужно добавить, это макет для блога. Вместо того, чтобы упаковать каждую страницу в компоненте, sapper будет искать файл "_layout.svelte", чтобы сделать эту работу для нас.
Внутри _layout.svelte, импортируйте заголовок и GT; Компонент и показать, что в верхней части каждой страницы. Это обеспечивает удобную ссылку на главную страницу. 

21. Добавить постоянный заголовок

Окончательная вещь, которую нам нужно добавить, это макет для блога. Вместо того, чтобы упаковать каждую страницу в компоненте, sapper будет искать _layout.svelte. файл, чтобы сделать эту работу для нас. Внутри _layout.svelte. , импортировать & lt; header & gt; Компонент и показать, что в верхней части каждой страницы. Он обеспечивает удобную ссылку на главную страницу.

 & lt; скрипт & gt;
  Импорт заголовка
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; header / & gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Этот контент изначально появился в веб-дизайнере.

• Веб-компоненты: Ultimate Guide
• 30 расширений Chrome для веб-дизайнеров и разработок
• 52 инструменты веб-дизайна, которые помогут вам работать умнее в 2019 году