notion blog

개념 블로그

이것은 Next.js의 다가오는 SSG (정적 사이트 생성) 지원을 보여주는 Next.js 프로젝트의 예 입니다 .

참고 :이 예제는 다음 SSG 후크를 사용합니다. JS Canary Branch! 이 예제 내에서 사용 된 API는 시간이 지남에 따라 변경됩니다. 개인 API 및 실험 기능을 사용하고 있으므로 언제든지 변경 될 수 있으므로 자신의 위험에 사용하십시오.

Vercel에서 호스팅 된 라이브 예 : https://notion-blog.vercel.app/

시작하기

이 예제로 작동하도록 개념을 설정하는 단계를 보려면 https://notion-blog.vercel.app/blog/my-first-post의 게시물을 보거나 아래 단계를 따르십시오.

직접 배포하십시오

Vercel으로 자신의 개념 블로그를 배포하십시오.

또는

1. 이 repo git clone https://github.com/ijjk/notion-blog.git 복제하십시오
2. vc 로 프로젝트를 구성하십시오
3. 프로젝트의 환경 변수로 NOTION_TOKEN BLOG_INDEX_ID 하십시오. 이 값을 찾는 방법은 여기를 참조하십시오
4. vc 로 최종 배포를하십시오

참고 : vc 로 로컬로 재배치하고 응용 프로그램 소스를 변경하지 않았고 개념으로 만 편집 한 경우 vc -f 사용하여 De -Duping 빌드를 우회해야합니다.

페이지 테이블 만들기

참고 : 테이블이 처음 방문 /blog 가 감지되지 않은 경우 자동 실행입니다.

사전 구성된 스크립트 사용

1. 개념으로 빈 페이지를 만듭니다
2. 이 repo git clone https://github.com/ijjk/notion-blog.git 복제하십시오
3. 의존성 cd notion-blog && yarn 설치하십시오
4. 테이블 NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js 작성하려면 스크립트를 실행하십시오.

수동으로 테이블을 만듭니다

1. 개념으로 빈 페이지를 만듭니다
2. 해당 페이지에 인라인 테이블을 작성하고 다르게 쿼리가 필요하므로 전체 페이지 테이블을 사용하지 마십시오.
3. 아래 필드를 테이블에 추가하십시오

테이블에는 다음 속성이 있어야합니다.

• Page : 이것은 블로그 게시물의 페이지입니다
• Slug : 이것은 블로그 게시물의 슬러그 /blog 에 대한 블로그 게시물입니다. 텍스트 속성이어야합니다.
• Published :이 블로그 게시물을 제작 시 필터링하는데 확인란 속성이어야합니다.
• Date : 블로그 게시물이 게시 된대로 나타나면 날짜 속성이어야합니다.
• Authors : 이것은 게시물을 작성한 개념 사용자 목록입니다. 개인 재산이어야합니다.

블로그 색인 및 토큰을 얻습니다

블로그 인덱스 값을 얻으려면 개념을 열고 위에서 만든 테이블이있는 개념 페이지로 이동하십시오. 이 페이지에있는 동안 페이지 ID를 가져올 수 있어야합니다.

• URL, 귀하의 페이지의 URL이 https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqkupi7xjxtul 인 경우 BLOG_INDEX_ID S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul 입니다.
• loadPageChunk 요청, 개발자 콘솔을 열고 네트워크 탭으로 이동하면 페이지를 다시로드하면 loadPageChunk 에 대한 요청이 표시되며 요청 페이로드에는 pageId 표시되어야하며 BLOG_INDEX_ID 입니다.

개념 토큰을 얻으려면 개념을 열고 token_v2 쿠키를 찾으십시오.

블로그 게시물 작성

1. 개념으로 새 행을 추가하려면 테이블에서 새로 클릭하십시오.
2. 페이지 이름, 슬러그, 날짜 및 저자를 작성하십시오
3. 컨텐츠 영역 상단에는 표시 할 컨텐츠를 미리보기로 추가하십시오 (2 단락에서 보관하십시오).
4. 미리보기 내용 아래에 분배기 블록을 추가하십시오
5. 분배기 블록 아래에 나머지 콘텐츠 추가

현지에서 실행

로컬로 프로젝트를 실행하려면 배포의 1 단계와 2 단계를 따라야합니다. 그런 다음 아래 단계를 따라야합니다.

1. 의존성 yarn 설치하십시오
2. 환경에서 NOTION_TOKEN 및 BLOG_INDEX_ID export NOTION_TOKEN='<your-token>' 및 export BLOG_INDEX_ID='<your-blog-index-id>' 또는 set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>"
3. 개발 모드 yarn dev 에서 다음에 실행됩니다
4. 생산 모드 yarn build && yarn start 에서 빌드 및 실행

크레딧

• 초기 아이디어에 대한 Guillermo Rauch @Rauchg
• 디자인 도움말을위한 shu ding @shuding_
• Luis alvarez @luis_fades 디자인 도움말과 버그 잡기