gatsby theme amsterdam

Tema de Gatsby Ámsterdam

Un tema de Gatsby para artistas, fotógrafos y otras personas creativas.

Sitio web de demostración

Características

• Diseño responsivo mínimo
• Transiciones de página opcionales
• Múltiples opciones de cuadrícula para mostrar publicaciones
• Colores y tipografía del tema personalizables con la interfaz de usuario del tema
• Soporte MDX
• Componente compatible con SEO
• Menú móvil
• Indicador de progreso de desplazamiento opcional
• Alternar opcional para cambiar los modos de color
• Emoción usando la sintaxis de componentes con estilo
• Etiquetas
• Paginación
• Soporte sin conexión

Instalación

Utilice Gatsby Starter Ámsterdam

Esto generará un nuevo sitio preconfigurado para usar Gatsby Theme Amsterdam.

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

Agregar manualmente a su sitio

1. Instalar el tema

npm install --save gatsby-theme-amsterdam

o

yarn add gatsby-theme-amsterdam

2. Agrega el tema a tu gatsby-config.js

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

Uso

Opciones de tema

Llave	Valor predeterminado	Descripción
basePath	/	URL raíz para todas las publicaciones.
contentPath	content	Ubicación de los archivos de rebajas utilizados para las publicaciones.
transitions	true	Incluya transiciones de página simples impulsadas con framer-motion
postsPerPage	6	Determina el número de publicaciones que se muestran en cada página. Esto afecta tanto a las publicaciones como a la plantilla de etiquetas.
grid	basic	Determina el tipo de cuadrícula utilizada en las publicaciones y plantillas de etiquetas. Dos opciones disponibles: basic y list .
progressIndicator	true	Incluya un indicador de progreso en la plantilla de publicación.
colorToggle	true	Incluya un botón en el menú para alternar los modos de color.

Uso de ejemplo

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

Configuración adicional

Además de las opciones del tema, hay algunos elementos que puede personalizar a través del objeto siteMetadata en gatsby-config.js de su sitio.

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

Personalización

Gatsby Theme Amsterdam utiliza la interfaz de usuario del tema. Para personalizar el estilo del tema, debe crear un archivo de tema y luego anular los valores predeterminados amsterdamTheme . Si está familiarizado con Styled Components o Emotion, es lo mismo que adaptar el tema que pasa a ThemeProvider .

Todos los valores predeterminados se pueden ver aquí.

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

Escribir contenido

Las publicaciones se escriben en formato Markdown/mdx con .md o .mdx y se colocan en el directorio content en la raíz del sitio, a menos que se defina una contentPath diferente en las opciones del tema. Hay cuatro variables iniciales utilizadas en el tema que se muestran a continuación.

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