Разработих своя личен уебсайт с помощта на svelteKit и реших да добавя Блог разделкъдето щях да покажа всичките си статии, днес ще ви покажа как можете да направите същото, използвайки Sveltekit + публичен API на DEV.TO.

Отказ от отговорност: Няма да покрия CSS частта, а само „функционалната“.

Маршрутизиране

SvelteKitизползва рутер, базиран на файлова система. Това означава, че структурата на вашето приложение се определя от структурата на файловете в папката src/routes (както прави nextjs).

За да дефинираме структурата на нашия блог, трябва да създадем папка blog и в нея трябва да създадем файлове:

  1. index.svelte просто ще бъде изобразен, когато посетите yourDomain.com/blog и ние ще покажем списъка с нашите dev.to статии тук.
  2. [slug].svelte ще бъде изобразено, когато посетите yourDomain.com/blog/yourDevToPostId и ние ще покажем единичната статия, когато щракнете върху нея.

Дотук добре, сега нека да разгледаме подробно всеки от тях.

Индекс.svelte

Основният файл (index.svelte) е структуриран по следния начин, нека го разгледаме.

Всичко, експортирано от context="module" скриптов блок, става експорт от самия модул.

Стойността articles се извиква в следващия скриптов блок и след това се използва в кода по-долу, където можем да завъртим масива от статии и да получим данните за една статия, като например заглавието, таговеи id.

[slug].svelte

Структурата на [slug].svelte е много проста, както направихме в index.svelte по подобен начин, ще извлечем единичната статия с page.params.slug, за да получим съдържанието на една статия, slugидва от името на файла,напр. [test].svelte -› page.params.test .

@htmlе специална функция, която ни позволява да анализираме съдържанието на html статията (article.body_html).

Сега просто трябва да стилизирате страниците/компонентите си и сте готови да разположите своя блог раздел и на вашия уебсайт!.