gatsby theme amsterdam

蓋茲比主題阿姆斯特丹

適合藝術家、攝影師和其他創意人士的蓋茲比主題。

示範網站

特徵

• 最小響應式設計
• 可選的頁面轉換
• 顯示貼文的多個網格選項
• 使用主題 UI 可自訂主題顏色和版式
• MDX 支援
• SEO 友善組件
• 手機選單
• 可選的滾動進度指示器
• 可選切換顏色模式
• 使用樣式組件語法的情感
• 標籤
• 分頁
• 離線支援

安裝

使用 Gatsby Starter 阿姆斯特丹

這將產生一個預先配置為使用 Gatsby 主題阿姆斯特丹的新網站。

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	用於帖子的 Markdown 文件的位置。
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 主題阿姆斯特丹使用主題 UI。為了自訂主題樣式，您必須建立主題文件，然後覆寫預設的amsterdamTheme值。如果您熟悉樣式組件或情感，那麼這與調整傳遞給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' ,
  } ,
}

寫作內容

貼文以 markdown / mdx 格式編寫，帶有.md或.mdx並放置在網站根目錄的content目錄中，除非在主題選項中定義了不同的contentPath 。主題中使用了四個 Front Matter 變量，如下所示。

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