gatsby theme amsterdam

개츠비 테마 암스테르담

예술가, 사진가 및 기타 창의적인 사람들을 위한 개츠비 테마입니다.

데모 웹사이트

특징

• 최소한의 반응형 디자인
• 선택적 페이지 전환
• 게시물을 표시하는 다양한 그리드 옵션
• 테마 UI를 통해 사용자 정의 가능한 테마 색상 및 타이포그래피
• MDX 지원
• SEO 친화적인 구성 요소
• 모바일 메뉴
• 선택적 스크롤 진행 표시기
• 색상 모드를 전환하는 옵션 토글
• 스타일 구성 요소 구문을 사용한 감정
• 태그
• 쪽수 매기기
• 오프라인 지원

설치

개츠비 스타터 암스테르담 사용

그러면 Gatsby Theme Amsterdam을 사용하도록 사전 구성된 새 사이트가 생성됩니다.

gatsby new your-themed-site https://github.com/ryanwiemer/gatsby-starter-amsterdam

사이트에 수동으로 추가

1. 테마 설치

npm install --save gatsby-theme-amsterdam

또는

yarn add gatsby-theme-amsterdam

2. gatsby-config.js 에 테마를 추가하세요.

 // gatsby-config.js
module . exports = {
  plugins : [
    {
      resolve : 'gatsby-theme-amsterdam' ,
      options : {
        // See theme options section for more information
      } ,
    } ,
  ] ,
} 

용법

테마 옵션

열쇠	기본값	설명
basePath	/	모든 게시물의 루트 URL입니다.
contentPath	content	게시물에 사용된 마크다운 파일의 위치입니다.
transitions	true	프레이머 모션으로 구동되는 간단한 페이지 전환 포함
postsPerPage	6	각 페이지에 표시되는 게시물 수를 결정합니다. 이는 게시물과 태그 템플릿 모두에 영향을 미칩니다.
grid	basic	게시물 및 태그 템플릿에 사용되는 그리드 유형을 결정합니다. 사용 가능한 두 가지 옵션: basic 및 list .
progressIndicator	true	게시물 템플릿에 진행률 표시기를 포함합니다.
colorToggle	true	색상 모드를 전환하려면 메뉴에 버튼을 포함하세요.

사용 예

 // gatsby-config.js
module . exports = {
  plugins : [
    {
      resolve : 'gatsby-theme-amsterdam' ,
      options : {
        // basePath defaults to '/'
        basePath : 'photography' ,
        // grid defaults to 'basic'
        grid : 'list' ,
      } ,
    } ,
  ] ,
}

추가 구성

테마 옵션 외에도 사이트의 gatsby-config.js 에 있는 siteMetadata 객체를 통해 사용자 정의할 수 있는 몇 가지 항목이 있습니다.

 // gatsby-config.js
module . exports = {
  siteMetadata : {
    // Used for the site title and SEO
    title : 'My Site Title' ,
    // Used for SEO
    description : 'My site description...' ,
    // Used for SEO. Do not include a trailing slash
    url : 'https://www.example.com' ,
    // Used for SEO. Must be the full URL for the default image
    image : 'https://www.example.com/og-image.jpg' ,
    // Used for SEO
    author : 'John Doe' ,
    // Used for an optional intro section at the top of the posts template
    intro : 'John Doe is a photographer....' ,
    // Used for the links in the menu
    menuLinks : [
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    // Used for the links in the footer
    footerLinks : [
      {
        name : 'Dribbble' ,
        url : 'https://www.dribbble.com/johndoe' ,
      } ,
      {
        name : 'Instagram' ,
        url : 'https://www.instagram.com/johndoe' ,
      } ,
    ] ,
  } ,
}

맞춤화

Gatsby Theme Amsterdam은 테마 UI를 활용합니다. 테마 스타일을 사용자 정의하려면 테마 파일을 생성한 다음 기본 amsterdamTheme 값을 재정의해야 합니다. Styled Components 또는 Emotion에 익숙하다면 ThemeProvider 에 전달한 테마를 적용하는 것과 같습니다.

모든 기본값은 여기에서 볼 수 있습니다.

 // src/gatsby-plugin-theme-ui/index.js

import amsterdamTheme from 'gatsby-theme-amsterdam/src/gatsby-plugin-theme-ui'

export default {
  ... amsterdamTheme ,
  colors : {
    ... amsterdamTheme . colors ,
    background : '#FCD5C0' ,
  } ,
}

콘텐츠 작성

게시물은 .md 또는 .mdx 를 사용하여 markdown/mdx 형식으로 작성되며 테마 옵션에 다른 contentPath 정의되지 않는 한 사이트 루트의 content 디렉터리에 배치됩니다. 테마에 사용되는 머리말 변수는 다음과 같이 4개가 있습니다.

 ---
title : Hello World
date : 2019-07-06
cover : cover.jpg
tags : [greeting, blog]
---