gatsby theme amsterdam

Thème Gatsby Amsterdam

Un thème Gatsby pour les artistes, photographes et autres créatifs.

Site Web de démonstration

Caractéristiques

• Conception réactive minimale
• Transitions de page facultatives
• Plusieurs options de grille pour afficher les publications
• Couleurs de thème et typographie personnalisables avec Theme UI
• Prise en charge MDX
• Composant optimisé pour le référencement
• Menu mobile
• Indicateur de progression du défilement en option
• Bascule facultative pour changer de mode de couleur
• Émotion utilisant la syntaxe des composants stylisés
• Balises
• Pagination
• Assistance hors ligne

Installation

Utilisez Gatsby Starter Amsterdam

Cela générera un nouveau site préconfiguré pour utiliser Gatsby Theme Amsterdam.

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

Ajouter manuellement à votre site

1. Installez le thème

npm install --save gatsby-theme-amsterdam

ou

yarn add gatsby-theme-amsterdam

2. Ajoutez le thème à votre gatsby-config.js

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

Usage

Options de thème

Clé	Valeur par défaut	Description
basePath	/	URL racine de toutes les publications.
contentPath	content	Emplacement des fichiers de démarques utilisés pour les publications.
transitions	true	Incluez des transitions de page simples optimisées par framer-motion
postsPerPage	6	Détermine le nombre de publications affichées sur chaque page. Cela affecte à la fois les publications et le modèle de balise.
grid	basic	Détermine le type de grille utilisé sur les publications et les modèles de balises. Deux options disponibles : basic et list .
progressIndicator	true	Incluez un indicateur de progression sur le modèle de publication.
colorToggle	true	Incluez un bouton dans le menu pour basculer les modes de couleur.

Exemple d'utilisation

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

Configuration supplémentaire

En plus des options de thème, il existe une poignée d'éléments que vous pouvez personnaliser via l'objet siteMetadata dans le gatsby-config.js de votre 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' ,
      } ,
    ] ,
  } ,
}

Personnalisation

Gatsby Theme Amsterdam utilise l'interface utilisateur du thème. Afin de personnaliser le style du thème, vous devez créer un fichier de thème, puis remplacer les valeurs amsterdamTheme par défaut. Si vous êtes familier avec Styled Components ou Emotion, cela revient à adapter le thème que vous transmettez à ThemeProvider .

Toutes les valeurs par défaut peuvent être consultées ici.

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

Rédaction de contenu

Les publications sont écrites au format markdown/mdx avec .md ou .mdx et placées dans le répertoire content à la racine du site, sauf si un contentPath différent est défini dans les options du thème. Il y a quatre variables préliminaires utilisées dans le thème qui sont présentées ci-dessous.

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