SvelteKit 및 dev.to api로 나만의 블로그 만들기

다음과 같은 경우에 읽으십시오:

SvelteKit

에 관심이 있습니다.

나만의 블로그를 만드는 방법에 대해 배우고 싶습니다.

소개
이 게시물에서는 ethercorps.io에 대한 내 블로그를 만든 방법을 보여 드리겠습니다.

방문자는 블로그를 작성하는 동안 웹사이트의 모든 블로그를 보고 읽을 수 있습니다.

여기서는 SvelteKit , TailwindCSS , Dev.to 를 사용했습니다.

SvelteKit 작동 방식
SvelteKit은 sveltejs와 함께 사용되는 전체 스택 프레임워크입니다. SvelteKit은 URL을 방문하려는 경우와 같은 최신 _파일 시스템 기반 _을 따릅니다.

e.g. example.com/blog/[blogID] blogId is dynamic

그런 다음 동일한 파일 이름이 될 svelte 파일blog을 추가하는 것보다 경로 디렉토리에 이름[slug].svelte으로 폴더를 만들어야 합니다.



위의 이미지에서 볼 수 있듯이 blog 디렉토리가 있고 두 개의 파일이 index.svelte 및 [slug].svelte 있습니다.
당신이 방문할 때

e.g. example.com/blog

귀하의 index.svelte 파일이 표시되고 귀하가 방문할 때

e.g. example.com/blog/[blogID]

[slug].svelte 파일이 표시됩니다.

인덱스.svelte
위에서 언급했듯이 이 파일은 dev.to에서 사용할 수 있는 모든 블로그를 표시합니다.
이제 우리가 어떻게 할 것인지 질문이 생깁니다.
사용자 이름 게시물에 대해 dev.to api를 누르는 것은 매우 간단합니다.

Here theether0 is my username which you can replace by your own.

먼저 API를 사용하는 방법에 대해 이야기하겠습니다.

<script context="module">
    export async function load({ fetch }) {
        let articles;

        try {
            articles = await fetch(`https://dev.to/api/articles?username=theether0`);
            articles = await articles.json();
        } catch (e) {
            console.log(e);
        }
        return {
            props: {
                articles
            }
        };
    }
</script>

<script>
    export let articles;
</script>

위의 코드에서 context module이 있는 두 개의 스크립트 태그가 있음을 볼 수 있습니다. 이 스크립트 태그는 먼저 실행되고 그 후에 모든 것이 실행됩니다. 따라서 해당 스크립트 태그에서 모든 블로그를 가져온 다음 소품으로 전달합니다(SvelteKit에서 요청함) ) 그런 다음 해당 소품 항목은 모듈 태그 다음에 실행되는 일반 스크립트 태그에서 액세스할 수 있습니다.

Example props:{articles} here you can access it in normal script tag <script> export let articles </script>

이제 HTML을 볼 수 있습니다.

<section class="text-secondary body-font overflow-hidden">
    <div class="container px-5 py-24 mx-auto">
        <div class="-my-8 divide-y-2 divide-gray-100">
            {#each articles as article}
                <div class="py-8 flex flex-wrap md:flex-nowrap">
                    <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
                        <span class="font-semibold title-font text-gray-700">CATEGORY</span>
                        <span{article.readable_publish_date:}</span>
                    </div>
                    <div class="md:flex-grow">
                        <h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
                            {article.title}
                        </h2>
                        <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-row space-x-2">
                            {#each article.tag_list as tag}
                                <span class="font-Basteleur-Moonlight title-font text-gray-700 capitalize"
                                    >{tag}</span
                                >
                            {/each}
                        </div>
                        <p class="leading-relaxed">
                            {article.description}
                        </p>
                        <a class="text-indigo-500 inline-flex items-center mt-4" href={`/blog/${article.id}`}
                            >Learn More
                            <svg
                                class="w-4 h-4 ml-2"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                                fill="none"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path d="M5 12h14" />
                                <path d="M12 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</section>

위에 하나의 <a> 태그가 있습니다. 이 태그에는 hrefarticle.id가 페이지를 동적으로 만드는 방법에 대한 슬러그로 [slug].svelte 페이지에 전달됩니다. 슬러그/매개변수를 전달하면 SvelteKit에서 이를 슬러그로 사용합니다.

이것은 index.svelte 파일입니다.
[슬러그].svelte

<script context="module">
    export async function load({fetch, params}) {
        let article;
        try {
            article = await fetch(`https://dev.to/api/articles/${params.slug}`);
            article = await article.json();
        } catch (e) {
            console.log(e);
        }
        return {
            props: {
                article
            }
        };
    }
</script>

<script>
    export let article;
</script>

위에서 우리는 index.svelte에서 했던 것과 같은 일을 하고 있습니다. 차이점은 slug에서 params의 기사로 전달된 index.svelte를 얻는다는 것입니다.

여기서는 HTML 부분이 더 중요합니다.

<div class="prose md:mx-auto mx-4 lg:prose-xl md:pt-40 py-20">
    <h1>{article.title}</h1>
    {@html article.body_html} //html can be served with @html in sveltekit
</div>

위에서 저는 tailwindcss 타이포그래피 플러그인을 사용하여 제 삶을 더 쉽게 만들었습니다.

이상으로 dev.to로 SvelteKit로 블로그를 만드는 방법이었습니다. 블로그 검색에 대해 말씀드릴 두 번째 부분이 있습니다.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.