Разработих своя личен уебсайт с помощта на svelteKit и реших да добавя Блог разделкъдето щях да покажа всичките си статии, днес ще ви покажа как можете да направите същото, използвайки Sveltekit + публичен API на DEV.TO.
Отказ от отговорност: Няма да покрия CSS частта, а само „функционалната“.
Маршрутизиране
SvelteKitизползва рутер, базиран на файлова система. Това означава, че структурата на вашето приложение се определя от структурата на файловете в папката src/routes
(както прави nextjs).
За да дефинираме структурата на нашия блог, трябва да създадем папка blog
и в нея трябва да създадем файлове:
- index.svelte просто ще бъде изобразен, когато посетите
yourDomain.com/blog
и ние ще покажем списъка с нашите dev.to статии тук. - [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
).
Сега просто трябва да стилизирате страниците/компонентите си и сте готови да разположите своя блог раздел и на вашия уебсайт!.