첫 번째 개츠비 테마를 사용하세요.

게이츠비는 방금 주제를 안정적으로 발표하면서 주제와 관련된 일련의 내용을 발표했다.이 글은 주제가 무엇인지, 왜 그것들이 당신에게 유용한지, 그리고 당신의 첫 번째 주제를 어떻게 사용하는지 토론할 것이다.뒤의 게시물에서 나는 구성 요소의 그림자를 깊이 있게 토론하고 심지어는 자신의 주제를 창작할 수도 있다.
만약 당신이 깊은 수역에 직접 들어가고 싶다면, 제이슨 렌스토프(Jason Lengstorf)가 무료egghead course on Gatsby themes를 내놓았는데, 이것은 정말 훌륭하다.

주제가 뭐예요?

명칭 주제는 이러한 가설을 일으킬 수 있다. 즉, 그들은 시각적 내용과만 관련이 있지만 게이츠는 주제보다 훨씬 멀다.기본 설정, 변환기 설정, 플러그인, 심지어 다른 하위 테마까지 포함할 수 있습니다.주제는 시각적 스타일과 구성 요소도 포함할 수 있다.
주제는 설정할 수 있고 다시 쓸 수 있으며 가장 중요한 것은 조합할 수 있는 것이다.

왜 주제가 유용합니까?

만약 네가 과거에 게이츠비를 사용한 적이 있다면, 너는 아마도 초보자로 너의 사이트를 인도할 것이다.선발 선수는 주제 이전의 중요한 발판이다.그들은 당신이 게이츠비 사이트를 시작할 수 있도록 허락합니다. 이 사이트는 기존의 추가 기능을 설정했습니다. 예를 들어 Mdx를 지원하거나 Shopify 등 외부 서비스를 사용할 수 있습니다.
그러나 Mdx와 Shopify를 동시에 지원하는 사이트를 신속하게 시작하려면 이 두 가지 기능을 동시에 설정한 시작 프로그램을 찾아야 한다. 그 중 하나를 사용하고 다른 기능을 설정하거나 처음부터 모든 것을 설정하는 방법을 찾아야 한다.
주제가 이 점을 바꾸었다.우리는 this 또는 that부터 시작할 필요가 없고, this 및 that 을 쉽게 생성할 수 있다.테마는 설정, 덮어쓰기, 조합이 가능하다는 것을 기억하십시오.

시작합시다.

우리는 간단하게 시작할 것이다.처음부터 개츠비 사이트를 구축하고 gatsby-theme-blog 블로그를 신속하게 시작하는 기본 기능을 사용합시다.
전체 코드를 보려면 Github repo 를 보십시오.

디렉터리 설정

우선 우리는 우리의 게이츠비 사이트를 위한 디렉터리를 만들고 그것을 초기화해야 한다.

mkdir first-gatsby-theme
cd first-gatsby-theme
yarn init -y

I'm using yarn, but feel free to use npm if you'd like.

의존 항목 설치

이니시에이터를 사용하려면 gatsby new <STARTER> 명령을 사용할 수 있지만 수동으로 설정하십시오.이것은 쉽게 할 수 있다.
우리는 react, react-dom, gatsby만 있으면 시작할 수 있다.설치합시다.그리고 편의를 위해 루트 디렉터리에 있는 package.json 파일을 열고 스크립트를 추가합니다.

yarn add react react-dom gatsby

// package.json
{
  "name": "first-gatsby-theme",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "react": "...",
    "react-dom": "...",
    "gatsby": "...",
  },
  "scripts": {
    "build": "gatsby build",
    "start": "gatsby develop",
    "clean": "gatsby clean"
  }
}

The ... are just placeholders. Your package.json file will have the specific versions you have installed.

개츠비가 일하고 있는지 확인하세요

우리의 모든 노력이 보답하는 것을 보기 위해 개츠비가 마력을 발휘할 수 있도록 내용을 만들어 보자.
우리는 src/pages에 디렉터리를 세워야 한다.관례에 따라 게이츠비는 이곳에서 내용을 찾아 웹 사이트의 페이지로 전환하고 경로를 처리할 것이다.

mkdir -p src/pages
touch src/pages/index.js

mkdir -p creates all missing directories in the path provided

src/pages/index.js 우리 사이트의 루트 경로 "/"에 매핑됩니다.

// src/pages/index.js

import React from 'react'

export default function HomePage() {
  return (
    <>
      <h1>Welcome</h1>
      <p>Hello, from Gatsby <span role="img" aria-label="hand emoji waving hello">👋</span></p>
    </>
  )
}

지금 게이츠비 사이트를 시작하려면 당신이 해야 할 일은 운행입니다.

yarn start

너는 반드시 이런 물건을 보아야 한다.

알아요. 아주 흥분돼요.

설치 테마

이제 우리는 게이츠비가 일하고 있다는 것을 알고 테마를 설치하자.모든 사람들이 블로그를 갖고 싶다고 말하지만, 시작은 매우 어렵다.좋은 소식은 주제가 당신을 쉽게 시작하게 하고 어떤 핑계도 대지 않는다는 것이다.

yarn add gatsby-theme-blog

프로젝트의 루트 디렉터리에 gatsby-config.js 파일을 만듭니다.

touch gatsby-config.js

다음 항목 추가

module.exports = {
  plugins: [
    'gatsby-theme-blog'
  ]
}

themes가 안정적으로 발표되기 전에, 당신의 테마는 보통 __experimentalThemes라는 추가 속성 아래에 있었지만, 지금은 플러그인처럼 안정되었습니다!
만약 당신이 이때 당신의 게이츠비 사이트를 시작하려고 한다면, 당신은 약간의 오류를 얻을 것이다. (. 우리는 다음 두 부분에서 원인을 찾아내자.

탐색 테마 옵션

현재 게이츠비 테마 블로그의 Github 리턴은 없지만 npm page 을 보면 Usage 이라는 부분을 볼 수 있다.

대부분의 게이츠비 플러그인과 테마는 설정할 수 있는 옵션이 있습니다.gatsby-theme-blog 옵션마다 네 개의 옵션과 기본값이 있습니다. 이것은 우리가 어떤 옵션도 전송할 수 없고 주제가 여전히 유효하다는 것을 의미합니다.
그럼에도 불구하고 그것은 약간의 기대가 있다.현재gatsby-theme-blog는 content/posts 디렉터리에서 가격 인하 또는 MDX 형식으로 블로그 글을 발표하고 avatar 디렉터리에서 content/assets 제목으로 이미지를 발표하기를 기대한다.
만약 이 두 가지 옵션이 없다면, 너는 약간의 은밀한 실수를 범할 것이다. 이것은 좀 사람을 낙담하게 한다.
이제 옵션을 기본값으로 설정합니다.덮어쓰려면 gatsby-config.js 를 변경합니다.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-blog',
      options: {
        contentPath: 'content/posts', // the file path to your blog posts
        basePath: '/', // the url for the root of your blog
        assetPath: 'content/assets', // the file path to your assets folder
        mdx: true, // whether or not to configure mdx for you
      }
    }
  ]
}

기본값이지만 그 값을 변경하려면options 대상에 필요한 값을 설정하십시오.

컨텐트 추가

이제 우리는 왜 우리의 개츠비 사이트가 이 주제를 추가한 후에 실패했는지 알게 되었다. 우리는 기본 옵션을 지침으로 삼아 우리가 무엇을 해야 우리 사이트를 다시 일하게 할 수 있는지 지도하자.
우선 필요한 폴더를 만들어야 합니다.프로젝트의 루트 디렉터리에서 content, content/posts, content/assets 디렉터리를 만들 것입니다.

mkdir -p content/{posts,assets}

the {} here is called brace expansion and is equivalent to running mkdir -p content/posts and mkdir -p content/assets, just in a shorter way.

이제 폴더가 생겼습니다. 블로그 글을 쓰고 화신을 추가해야 합니다.hello-world.md 디렉터리에 content/posts 라는 파일을 만들고 원하는 내용을 추가합니다.

---
title: "Hello, World"
---

The worlds greatest blog post!

다음은 avatar 에 content/assets 라는 사진을 저장합니다.
우리가 해야 할 세 번째 일은 src/pages/index.js 페이지를 잠시 삭제하는 것이다. 왜냐하면 gatsby-theme-blog 기본적으로 블로그의 루트 경로를 "/"루트 경로로 설정하기 때문이다.

mv src/pages/index.js src/pages/_index.js

현재 실행 중인 경우yarn start 모든 것이 정상적이어야 합니다.

웹 사이트 / 작성자 정보

gatsby-theme-blog에서 한 또 다른 일은 gatsby-config.js에서 일부 사이트 메타데이터를 찾는 것이다.
마지막으로 gatsby-config.js 을 열고 정보를 추가합니다.

module.exports = {
  siteMetadata: {
    title: "Awesome Blog", // Enter the title of your blog here
    author: "Matt Hagner", // Change this to your name
    description: "A really cool blog",
    social: [
      {
        name: 'twitter',
        url: 'twitter.com/_hagnerd',
      },
      {
        name: 'github',
        url: 'github.com/hagnerd',
      },
    ]
  },
  plugins: [
    'gatsby-theme-blog',
  ]
}

너무 고통스럽지 않고 테마보다 게이츠를 설치하고 설정하는 속도가 얼마나 빠른지 보여주는 데 도움이 됐으면 합니다.가장 좋은 것은 필요에 따라 더 많은 주제를 설치할 수 있고 사이트의 구조를 근본적으로 바꿀 필요가 없다는 것이다.

다음

우리 블로그의 빠른 설정은 훌륭하지만, 우리가 스타일을 바꾸고 싶다면?또는 일부 기본 구성 요소는 어떻게 나타납니까?이를 위해 우리는 음영이라고 불리는 기능을 사용할 것이다.
문장이 완성된 후에 나는 링크로 문장을 업데이트할 것이다.