nextjs blog theme

사용 가능한 사용자 정의 가능한 블로그 스타터 :

• 다음 .js v15 (페이지 라우터)
• 꼬리 바람 v3.x
• Netlify Visual Editor
• 내장 MDX 지원
• 다크 및 가벼운 테마를 가진 현대적인 디자인이 포함됩니다

데모에서 멍청이를 잡으십시오.

템플릿 연습을 보려면 여기를 클릭하십시오!

목차 :

• 시작하기
  • 로컬로 설정
  • 마법사 사용
• 블로그 구성
• 새 게시물 추가
• Netlify Visual Editor
• 테스트
  • 기본 테스트가 포함되어 있습니다
  • 혁신 제거

시작하기

---

이 프로젝트를 두 가지 방식으로 시작하거나 로컬 또는 설정 마법사 사용을 시작할 수 있습니다.

로컬로 설정

로컬로 수행하는 경우 GitHub 에서이 템플릿 버튼을 클릭하면서 시작하십시오. 이렇게하면 GitHub 계정 에이 템플릿의 파일이 포함 된 새 저장소가 생성됩니다. 완료되면 새 저장소를 복제하고 터미널에서 탐색하십시오.

여기에서 실행하여 프로젝트 의존성을 설치할 수 있습니다.

yarn install

마지막으로 다음과 함께 로컬로 프로젝트를 실행할 수 있습니다.

yarn run dev

브라우저를 열고 http : // localhost : 3000을 방문하십시오. 프로젝트가 실행 중입니다!

설정 마법사 사용

설정 마법사를 통해 몇 번의 클릭으로 블로그를 만들고 NetLify에 배포 할 수 있습니다.

블로그 구성

구성은 환경 변수를 기반으로하여 NetLify와 같은 Jamstack 플랫폼과 쉽게 통합 할 수 있습니다.

편집 할 수있는 변수는 다음과 같습니다.

변하기 쉬운	설명	옵션
BLOG_NAME	아바타 아래에 표시된 블로그 이름
BLOG_TITLE	홈페이지의 메인 헤더 ( h1 )
BLOG_FOOTER_TEXT	바닥 글의 텍스트
BLOG_THEME	테일 윈드로 전달되는 테마	기본
BLOG_FONT_HEADINGS	h1 에서 h6 에서 HTML 제목을위한 글꼴 패밀리	Sans-Serif (기본값), Serif, Monospace
BLOG_FONT_PARAGRAPHS	다른 모든 HTML 요소에 대한 글꼴	Sans-Serif (기본값), Serif, Monospace

모든 ENV 변수는 마법사를 통해 또는 프로젝트의 환경 변수를 설정하여 구성 할 수 있습니다. Netlify Dashaboard (사이트 설정/빌드 및 배포/환경/환경 변수)에서이를 수행 할 수 있습니다.

Bejamas_env-vars_short.mp4

[Alt : Env Vars 편집의 비디오 연습]

환경 변수를 설정하는 경우 차 한 컵이 아닌 경우 기본값은 utils/global-data.js 에서 변경할 수 있습니다. 코드 기반에서 이러한 변수가 사용되는 변수와 하드 코드 블로그 정보를 제거 할 수도 있습니다.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS tailwind-preset.js 에서 사용됩니다
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT pages/index.js & pages/posts/[slug].js 에서 globalData 객체를 통해 사용됩니다.

새 게시물 추가

모든 게시물은 /posts 디렉토리에 저장됩니다. 새 게시물을 만들려면 .mdx 확장자가있는 새 파일을 만듭니다.

게시물은 MDX 형식으로 작성되었으므로 소품 및 구성 요소를 전달할 수 있습니다. 즉, 게시물 내부의 React 구성 요소를 사용하여 대화식을보다 효과적으로 만들 수 있습니다. 컨텐츠에 대한 MDX 문서에서 수행하는 방법에 대해 자세히 알아보십시오.

Nextjs-bejamas-blog_new-post.mp4

[ALT : 새 블로그 게시물 추가의 비디오 연습]

Netlify Visual Editor

이 템플릿은 시각적 편집 및 GIT 컨텐츠 소스와 함께 작동하도록 구성됩니다.

Netlify Visual Editor를 로컬로 개발하십시오

일반적인 개발 과정은 로컬에서 작업하는 것입니다. 이 저장소를 복제 한 다음 루트 디렉토리에서 npm install 실행하십시오.

다음 .js 개발 서버를 실행하십시오.

cd nextjs-blog-theme
npm run dev

Netlify Visual Editor CLI를 설치하십시오. 그런 다음 동일한 프로젝트 디렉토리에서 새 터미널 창을 열고 Netlify Visual Editor Dev Server를 실행하십시오.

npm install -g @stackbit/cli
stackbit dev

이것은 자신의 Netlify Visual Editor URL을 출력합니다. 이것을 열거나 등록하거나 로그인하면 새 프로젝트의 NetLify의 시각적 편집기로 향합니다.

다음 단계

다음은 NetLify Visual Editor를 처음 접하는 경우 다음에해야 할 일에 대한 몇 가지 제안입니다.

• Netlify Visual Editor 개요를 배우십시오
• Netlify Visual Editor 참조 문서를 확인하십시오

테스트

기본 테스트가 포함되어 있습니다

우리는이 템플릿을 유지하는 데 도움이되는 몇 가지 툴링을 포함 시켰습니다. 이 템플릿은 현재 사용 중입니다.

• 혁신 - 정기적으로 의존성을 업데이트하려면

팀 이이 툴링에 관심이 없다면 쉽게 툴링을 제거 할 수 있습니다!

혁신 제거

종속성으로 프로젝트를 최신 상태로 유지하기 위해 Renovate라는 도구를 사용합니다. 이 툴링에 관심이 없다면 renovate.json 파일을 삭제하여 메인 브랜치에 커밋하십시오.

지원하다

길을 따라 잡히면 지원 포럼에서 도움을 받으십시오.