날씬하고 이념적인 블로그를 만들다

나는 마침내 내가 만족하는 방식으로 나의 블로그(ish) 사이트를 세웠다.이 사이트의 대부분 내용은 sapper의 정적 출력일 뿐이지만 학습 내용은 개념표의 항목이다.표의 모든 페이지에는 slug 속성이 있습니다. 이 속성은 당신이 내비게이션한 URL을 설정합니다. 예를 들어 이 페이지는 building-a-blog-with-svelte-and-notion입니다.
당신은 https://r-bt.com/learning 현장에서 볼 수 있습니다.

건립

시작하려면 새 sapper 항목을 만들어야 합니다.

npx degit "sveltejs/sapper-template#rollup" my-svelte-notion-blog
cd my-svelte-notion-blog
npm install

이것은 공병 기지의 전체 구조를 위해 비계를 세울 것이다.템플릿 페이지를 변경해야 하는 경우(index.svelte,about.svelte 등이 많지만 블로그 폴더에 중점을 두겠습니다.
계속해서 blog 폴더의 모든 내용을 삭제하고 빈 index.svelte 파일을 만듭니다.

개념 테이블 작성

우선, 우리는 개념표가 필요하다. 우리는 그 중에서 댓글을 추출할 것이다.

테이블이 포함된 새 페이지 만들기 - 전체 페이지

My first post(나의 첫 번째 게시물) 또는 당신이 좋아하는 표 항목 추가

제 첫 번째 게시물에 새로운 속성slug과 값my-first-post을 주었습니다. 저희는 이것을 URL

으로 사용할 것입니다.

공유를 클릭하여 페이지 제목 뒤의 id를 URL의 어딘가로 복사

예를 들어 이 페이지는https://www.notion.so/rbeattie/Building-a-blog-with-Svelte-and-Notion-510a05b08ef842498d686c92614fe912이기 때문에 id:510a05b08ef842498d686c92614fe912를 복사합니다.

모든 게시물 나열

현재, 우리는 이 표에서 모든 항목을 가져와서, 그것들을 우리 사이트에 표시할 수 있다.Concept는 아직 공공 API가 없지만 다행히도 Splitbee 그들의 개인 API를 위해 wrapper를 만들었습니다. 우리는 sotion와 상호작용을 할 것입니다.

npm install -D sotion

Sotion 우리의 개념표를 바탕으로 블로그를 구축했다.우선, 우리는 우리의 게시물 범위를 이 표로 확대할 것이다.년_layout.svelte

<script>
    import { sotion } from "sotion";
    const tableId = 'xxxxxxxx' // Whatever you copied before
    sotion.setScope(tableId)
</script>

blog/index.svelte에서 모든 게시물을 확인하십시오.

<script>
    import { onMount } from 'svelte';
    import { sotion } from "sotion";

    let posts = [];

    onMount(() => {
        posts = await sotion.getScope();
    });
</script>

posts는 테이블의 페이지를 나타내는 객체 배열입니다.

[
    {
      id: "510a05b0-8ef8-4249-8d68-6c92614fe912",
      slug: "building-a-blog-with-svelte-and-notion",
      Name: "Building a blog with Svelte and Notion"
    },
  ...
]

마지막으로, 우리는 그것을 하나의 목록으로 나타낼 것이다

<ul>
    {#if posts.length === 0}
        <span>Loading...</span>
    {/if}
    {#each posts as item (item.id)}
        {#if item.slug}
            <li>
                <a href="blog/{item.slug}">
                    {item.Name}
                </a>
            </li>
        {/if}
    {/each}
</ul>

<style>
  ul {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
  }

  li {
    padding: 0.25em 0;
  }
</style>

경탄할 만한!지금 너는 반드시 이런 물건이 있어야 한다.

게시물 표시

지금 댓글 중 하나를 클릭하면 blog/{slug}로 넘어갑니다.이것은 동적 노선이다. 왜냐하면 우리는 슬로프가 무엇인지 모른다.Sapper는 라우팅 파일 이름blog/[slug].svelte의 동적 매개변수 주위에 괄호를 넣어 이 문제를 처리합니다.그리고 우리는 slug 스크립트의 preload에 접근할 수 있다.자세한 내용은 https://sapper.svelte.dev/docs#Pages
년blog/[slug].svelte

<script context="module">
    import { Sotion, sotion } from "sotion";
  export async function preload({ params }) {
    try {
      const { blocks, meta } = await sotion.slugPage(params.slug);
      return { blocks, meta, slug: params.slug };
    } catch (e) {
      return e;
    }
  }
</script>

우리는 context="module"를 사용하기 때문에 페이지는 내용을 얻은 후에만 표시됩니다.중요한 것은 클라이언트javascript를 실행하기 전에 이 슬라이드 페이지에 연결하지 않습니다 sapper export만약 우리가 slug 페이지 sapper export 에 연결된다면, 내보낼 때 이 페이지가 나중에 업데이트되지 않도록 저장할 것입니다. (직접 내비게이션이 도착할 때)
그런 다음 게시물의 블록 및 메타데이터(개념 속성)를 가져옵니다.

<script>
    export let blocks;
    export let meta;
</script>

마지막으로 저희가 이 블록들을 렌더링을 해볼게요.

<Sotion {blocks} />

지금 당신은 http://localhost:3000/blog/[slug]에서 당신의 댓글을 볼 수 있고 당신의 댓글에서 내용을 볼 수 있을 것입니다.이것은 텍스트, 제목, 코드, 목록 및 기타 모든 것을 포함한다

게시 메타데이터

불행히도 우리는 아직 완성하지 못했다.블로그를 합리적인 검색엔진으로 최적화하고 트위터와 페이스북에 잘 보여주려면 페이지에 메타데이터를 추가하는 것이 중요하다.트위터와 페이스북은 특수한 메타태그가 필요하기 때문에 중복된다.

<svelte:head>
    <title>{meta.Name}</title>
    <meta name="twitter:title" content={meta.Name} />
    <meta property="og:title" content={meta.Name} />
</svelte:head>

페이지 설명을 설정하기 위해서, 우리는 먼저 게시물의 개념 페이지에 description 속성을 추가할 것이다

그리고 저희가 설명을 설정합니다.

<svelte:head>
    ...
    {#if meta.description}
        <meta name="description" content={meta.description} />
        <meta name="twitter:description" content={meta.description} />
        <meta property="og:description" content={meta.description} />
    {/if}
</svelte:head>

마지막으로 당신이 설정하고 싶은 잡항원 속성이 있습니다

<meta name="twitter:card" content="summary" />
 <!-- Your twitter handle -->
<meta name="twitter:site" content="@r_bt_" />
<meta name="twitter:creator" content="@r_bt_" /> 
<!-- An image for the article -->
<meta name="twitter:image" content="https://r-bt.com/profile.jpg" />

그리고 페이스북.

<meta property="og:type" content="article" />
<meta property="og:url" content="https://r-bt.com/learning/{slug}" />
<meta property="og:image" content="https://r-bt.com/profile.jpg" />
<meta property="og:site_name" content="R-BT Blog" />

끝!

너 망했어.현재, 모든 페이지를 열거한 페이지와 이 페이지를 보여주는 동적 경로가 지원하는 블로그가 있어야 한다😎
너는 마음대로 그것을 인터넷에 올릴 수 있다.내보내고 Netlify에 위탁 관리

npm run export

사이트를 내보내려면 요청을 blog/[slug]에서 blog/index.html로 리디렉션해야 합니다. 그렇지 않으면 사용자가 정적 파일이 없기 때문에 404 오류가 발생합니다.Netlify가 있으면 정말 쉽다.netlify.toml 파일을 생성하고 설정합니다.

[[redirects]]
    from = "/blog/*"
    to = "/blog/index.html"
    status = 200
    force = true

현재 사용자가 yoursite.com/blog/first-post로 이동할 때 Netlify는 oursite.com/blog/index.html 서비스를 제공하고 svelte의 클라이언트 루트가 개입됩니다.

추가: 사이트 맵

당신의 사이트에 sitemap.xml를 추가하는 것은 아주 좋은 방법입니다.이 요구사항은 동적이므로 Sapper의 서버 라우트를 사용할 수 없습니다(내보낼 때 이러한 라우트는 정적임).대신 Netlify 함수를 사용할 수 있습니다.
디렉터리의 루트 디렉터리에 새 폴더functions를 만들고 그 안에 sitemap.js를 만듭니다.
우리는 node-fetch 우리의 개념표에서 글을 가져와 루트 디렉터리에서 실행해야 한다. (즉 함수에 자기 것이 없다. package.json

npm install node-fetch

현재sitemap.js

const fetch = require("node-fetch");

exports.handler = async (event) => {
    const NOTION_API = "https://notion-api.splitbee.io";
    // Your Notion Table's ID
    const id = "489999d5f3d240c0a4fedd9de71cbb6f";

    // Fetch all the posts
    let posts = [];
    try {
        posts = await fetch(`${NOTION_API}/table/${id}`, {
            headers: { Accept: "application/json" },
        }).then((response) => response.json());
    } catch (e) {
        return { statusCode: 422, body: String(e) };
    }

    // Filter those posts to get their slugs
    const filteredPages = pages
        .filter((item) => item.slug !== undefined)
        .map((item) => item.slug);

    // Create the sitemap
    const domain = "https://r-bt.com";
    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${filteredPages
                .map((page) =>`
                    <url>
                        <loc>${domain}/learning/${page}</loc>
                        <changefreq>weekly</changefreq>
                    </url>
                `).join("")}
        </urlset>
    `;

    return {
        statusCode: 200,
        contentType: "text/xml",
        body: sitemap,
    };
}

우리는 곧 도착할 것이다. (이 사이트 지도를 만들었을 뿐만 아니라, 나로 하여금 이 글을 완성하게 했다.)🙂). 마지막으로, 우리는 요청 yoursite.com/sitemap.xml 할 때 이 함수를 실행해야 한다.netlify.toml에 추가

[[redirects]]
    from = "/sitemap.xml"
    to = "/.netlify/functions/sitemap"
    status = 200
    force = true

이렇게Netlify에 제출하고 배치하면 사이트 지도가 정상적으로 작동할 수 있습니다.사실 나는 해결해야 할 문제가 매우 많기 때문에 만약 그것이 너에게 적합하지 않다면

개진

만약에 내가 어떤 방식으로 관념이 변화할 때 매 페이지를 자동으로 업데이트할 수 있다면 나는 매우 기쁠 것이다.글을 쓸 때, 실시간으로 다시 불러오는 것은 좋은 사용자 체험이 될 것이다.