gatsby theme amsterdam

ギャツビーのテーマ アムステルダム

アーティスト、写真家、その他のクリエイティブな人々のためのギャツビーのテーマ。

デモウェブサイト

特徴

• 最小限のレスポンシブデザイン
• オプションのページ遷移
• 投稿を表示するための複数のグリッド オプション
• テーマ UI によるカスタマイズ可能なテーマの色とタイポグラフィ
• MDXのサポート
• SEO に優しいコンポーネント
• モバイルメニュー
• オプションのスクロール進行状況インジケーター
• カラーモードを切り替えるオプションのトグル
• スタイル付きコンポーネント構文を使用した感情
• タグ
• ページネーション
• オフラインサポート

インストール

Gatsby Starter アムステルダムを使用する

これにより、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	投稿とタグテンプレートで使用されるグリッドのタイプを決定します。 2 つの使用可能なオプション: 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' ,
  } ,
}

執筆内容

投稿は、テーマ オプションで別のcontentPathが定義されていない限り、 .mdまたは.mdxのマークダウン / mdx 形式で書き込まれ、サイトのルートのcontentディレクトリに配置されます。以下に示すように、テーマで使用される 4 つの前付変数があります。

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