gatsby theme amsterdam

Tema Gatsby Amsterdã

Um tema Gatsby para artistas, fotógrafos e outras pessoas criativas.

Site de demonstração

Características

• Design responsivo mínimo
• Transições de página opcionais
• Várias opções de grade para exibir postagens
• Cores de tema e tipografia personalizáveis ​​com UI de tema
• Suporte MDX
• Componente amigável para SEO
• Menu móvel
• Indicador de progresso de rolagem opcional
• Alternar opcional para alternar os modos de cor
• Emoção usando sintaxe de componentes estilizados
• Etiquetas
• Paginação
• Suporte off-line

Instalação

Use Gatsby Starter Amsterdã

Isso irá gerar um novo site pré-configurado para usar o Gatsby Theme Amsterdam.

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

Adicionar manualmente ao seu site

1. Instale o tema

npm install --save gatsby-theme-amsterdam

ou

yarn add gatsby-theme-amsterdam

2. Adicione o tema ao seu gatsby-config.js

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

Uso

Opções de tema

Chave	Valor padrão	Descrição
basePath	/	URL raiz para todas as postagens.
contentPath	content	Localização dos arquivos markdown usados ​​para as postagens.
transitions	true	Inclui transições de página simples com framer-motion
postsPerPage	6	Determina o número de postagens mostradas em cada página. Isso afeta as postagens e o modelo de tag.
grid	basic	Determina o tipo de grade usada nas postagens e nos modelos de tags. Duas opções disponíveis: basic e list .
progressIndicator	true	Inclua um indicador de progresso no modelo de postagem.
colorToggle	true	Inclua um botão no menu para alternar os modos de cores.

Exemplo de uso

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

Configuração Adicional

Além das opções de tema, há vários itens que você pode personalizar por meio do objeto siteMetadata no gatsby-config.js do seu site.

 // 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' ,
      } ,
    ] ,
  } ,
}

Personalização

Gatsby Theme Amsterdam utiliza Theme UI. Para personalizar o estilo do tema, você deve criar um arquivo de tema e, em seguida, substituir os valores padrão amsterdamTheme . Se você estiver familiarizado com Styled Components ou Emotion é o mesmo que adaptar o tema que você passa para ThemeProvider .

Todos os valores padrão podem ser visualizados aqui.

 // 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' ,
  } ,
}

Escrevendo conteúdo

As postagens são escritas no formato markdown/mdx com .md ou .mdx e colocadas no diretório content na raiz do site, a menos que um contentPath diferente seja definido nas opções do tema. Existem quatro variáveis ​​de front-matéria usadas no tema que são mostradas abaixo.

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