Бывают случаи, когда вы работаете над одностраничным устройством и упираетесь в стену, когда понимаете, что вам нужен блог. Но как создать блог без базы данных? Вот где вам пригодится Blogger API. Да, да - тот самый Blogger, которым, похоже, никто никогда не пользовался. Несмотря на все негативное, что вы можете подумать о бесплатной службе ведения блогов Google, она оказывается очень полезной при поиске бесплатного хранилища для нашего блога.

Прежде чем мы начнем со Svelte, давайте настроим наш Blogger API, это очень просто и займет всего несколько минут.

  1. Перейдите в Blogger авторизация части документации.
  2. Прокрутите вниз до Получить ключ.
  3. Выберите или создайте новый проект и нажмите Далее.
  4. Скопируйте только что сгенерированный ключ API, он вам понадобится.

Теперь, когда у нас есть все необходимое, давайте установим новое удобное приложение.

npx degit sveltejs/template myblog

Теперь перейдите в терминал к myblog и запустите установку.

npm install

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

npm run dev

Теперь, если вы откроете браузер и перейдете на localhost: 5000, вы должны увидеть что-то вроде этого:

Теперь давайте откроем App.svelte в папке src. Как и любой изящный компонент, у вас есть три части: сценарий, в котором вы пишете свой javascript, разметка HTML и стиль, в котором идет весь ваш CSS. Начнем с javascript.

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

import { onMount } from "svelte";

Для удобства давайте введем переменную с именем items, которая будет служить массивом сообщений.

let items = [];

И теперь мы можем добавить запрос на получение всех данных вашего блога. Если ваш блог является общедоступным, Blogger вернет все данные вашего блога. Замените 3213900 идентификатором своего блога, вы можете найти его в конце URL-адреса, если зайдете на blogger.com/blog/posts/. Мы не скрываем ключ API, потому что ключа недостаточно для редактирования или удаления сообщений. Ваш полный сценарий должен выглядеть так:

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

Вы видите, как я использую @html с item.content, потому что содержимое возвращается как HTML, и в противном случае svelte ускользнет от него.

Теперь, если вы перейдете к localhost:5000, вы должны получить что-то похожее на это:

В части 2 я объясню, как

  • Создайте отрывок для каждого поста
  • Открывать каждое сообщение в модальном окне
  • Используйте якорные URL-адреса, чтобы открывать отдельные сообщения
  • Создавайте кнопки социальных сетей, которые работают

Надеюсь увидеть тебя снова в ближайшее время!