gatsby theme amsterdam

Gatsby-Thema Amsterdam

Ein Gatsby-Thema für Künstler, Fotografen und andere Kreative.

Demo-Website

Merkmale

• Minimales responsives Design
• Optionale Seitenübergänge
• Mehrere Rasteroptionen zum Anzeigen von Beiträgen
• Anpassbare Designfarben und Typografie mit der Design-Benutzeroberfläche
• MDX-Unterstützung
• SEO-freundliche Komponente
• Mobiles Menü
• Optionale Scroll-Fortschrittsanzeige
• Optionaler Schalter zum Wechseln des Farbmodus
• Emotion mit Styled-Components-Syntax
• Schlagworte
• Pagination
• Offline-Unterstützung

Installation

Verwenden Sie Gatsby Starter Amsterdam

Dadurch wird eine neue Website erstellt, die für die Verwendung des Gatsby Theme Amsterdam vorkonfiguriert ist.

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

Manuell zu Ihrer Website hinzufügen

1. Installieren Sie das Theme

npm install --save gatsby-theme-amsterdam

oder

yarn add gatsby-theme-amsterdam

2. Fügen Sie das Thema zu Ihrer gatsby-config.js hinzu

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

Verwendung

Themenoptionen

Schlüssel	Standardwert	Beschreibung
basePath	/	Stamm-URL für alle Beiträge.
contentPath	content	Speicherort der für die Beiträge verwendeten Markdown-Dateien.
transitions	true	Integrieren Sie einfache Seitenübergänge mit Framer-Motion
postsPerPage	6	Bestimmt die Anzahl der auf jeder Seite angezeigten Beiträge. Dies wirkt sich sowohl auf die Beiträge als auch auf die Tag-Vorlage aus.
grid	basic	Bestimmt die Art des Rasters, das in den Beiträgen und Tag-Vorlagen verwendet wird. Zwei verfügbare Optionen: basic und list .
progressIndicator	true	Fügen Sie der Beitragsvorlage eine Fortschrittsanzeige hinzu.
colorToggle	true	Fügen Sie eine Schaltfläche in das Menü ein, um die Farbmodi umzuschalten.

Beispielverwendung

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

Zusätzliche Konfiguration

Zusätzlich zu den Designoptionen gibt es eine Handvoll Elemente, die Sie über das siteMetadata Objekt in der gatsby-config.js Ihrer Site anpassen können.

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

Anpassung

Gatsby Theme Amsterdam nutzt die Theme-Benutzeroberfläche. Um den Theme-Stil anzupassen, müssen Sie eine Theme-Datei erstellen und dann die Standardwerte amsterdamTheme überschreiben. Wenn Sie mit Styled Components oder Emotion vertraut sind, ist dies dasselbe wie das Anpassen des Themas, das Sie an ThemeProvider übergeben.

Alle Standardwerte können hier eingesehen werden.

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

Inhalte schreiben

Beiträge werden im Markdown-/mdx-Format mit entweder .md oder .mdx geschrieben und im content im Stammverzeichnis der Website abgelegt, sofern in den Designoptionen kein anderer contentPath definiert ist. Im Thema werden vier Frontmaterie-Variablen verwendet, die unten aufgeführt sind.

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