Узнайте, как создать полноценное приложение SvelteKit с помощью этого простого проекта для чтения RSS.

RSS — популярный стандарт распространения веб-контента в структурированном формате. Многие люди, от технических энтузиастов до учителей, используют RSS, чтобы быть в курсе последних новостей и публикаций в своих любимых блогах.

Написание собственной программы чтения RSS — простая задача, которая стала еще проще с помощью SvelteKit, метафреймворка, созданного на основе Svelte.

Настройка проекта SvelteKit

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете бесплатно использовать его по лицензии MIT. Если вы хотите взглянуть на живую версию этого проекта, вы можете проверить это демо.

Прежде чем продолжить, на вашем компьютере должна быть установлена ​​среда выполнения Node.js, а также Менеджер пакетов узлов (NPM). Откройте терминал и выполните следующую команду:

npm create svelte
# or
yarn create svelte

Это должно запустить create-svelte Интерфейс командной строки (CLI)

instagram viewer
на базе Vite. Назовите свой проект и установите шаблон приложения «Проект-скелет». Отключите проверку типов с помощью TypeScript и выберите любые дополнительные параметры, которые вы хотите. После этого перейдите в каталог проекта и запустите:

npm install
# or
yarn

После установки зависимостей по умолчанию вам необходимо установить два пакета, а именно: RSS-парсер и момент. Первый пакет облегчит анализ XML-данных, а второй поможет правильно отформатировать даты. В терминале выполните следующее:

npm install rss-parser
npm install moment
# or
yarn add rss-parser
yarn add moment

Теперь вы можете запустить сервер разработки, выполнив следующую команду.

npm run dev
# or
yarn dev

Очистите содержимое Приложение.css файл и измените структуру проекта так, чтобы она выглядела примерно так: Создайте любые каталоги, которые еще не существуют, и создайте пустые файлы, соответствующие указанным ниже:

Вам нужно будет только изменить источник каталог, который должен содержать библиотека каталог и lib/addToLocalStorage.js файл. Он также должен содержать маршруты каталог, содержащий дочерний каталог с именем кормить и четыре файла: +layout.js, +layout.svelte, +page.svelte, и +server.js. Внутри кормить, создайте каталог с именем [заголовок] с двумя файлами внутри: +page.server.js и +page.svelte.

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

mkdir '[title]'

Создание маршрута API для проверки действительных RSS-каналов

Открой маршруты/+server.js файл и импортируйте JSON полезность. Также импортируйте Парсер из RSS-парсер упаковка.

import { json } from"@sveltejs/kit";
import Parser from"rss-parser";

Теперь экспортируйте асинхронную функцию, ПОЛУЧАТЬ, и пройти внутрь URL в качестве параметра. В этой функции создайте две константы: rssLink и парсер.

Первая константа должна содержать параметр поиска из URL прошло, а второй, парсер, должен сохранить новый Парсер экземпляр объекта. Далее позвоните в анализ URL метод на парсер и пройти внутрь rssLink в качестве параметра. Наконец, сериализуйте ответ с помощью JSON функцию и вернуть ее.

exportasyncfunctionGET({url}) {
const rssLink = url.searchParams.get('url');
const parser = new Parser();
let feed = await parser.parseURL(rssLink);
return json(feed);
}

Проектирование домашней страницы

SvelteKit использует система маршрутизации на основе файловой системы. По умолчанию маршруты/+page.svelte файл служит домашней страницей вашего сайта.

Откройте файл +page.svelte и в сценарий тег, импортируйте добавитьтолокалстораже функция от библиотека каталог. Вы еще этого не создали, но сделаете это позже. После импорта функции создайте две переменные: URL и готовый, установив готовый переменная для ЛОЖЬ.