gatsby theme amsterdam

Гэтсби Тема Амстердам

Тема Гэтсби для артистов, фотографов и других творческих людей.

Демонстрационный сайт

Функции

• Минимальный отзывчивый дизайн
• Дополнительные переходы страниц
• Несколько параметров сетки для отображения сообщений
• Настраиваемые цвета темы и типография с темой пользовательского интерфейса
• Поддержка MDX
• SEO -дружелюбный компонент
• Мобильное меню
• Дополнительный индикатор прогресса прокрутки
• Дополнительный переключатель для переключения режимов цвета
• Эмоции с использованием синтаксиса стиля компонентов
• Теги
• Страница
• Офлайн -поддержка

Установка

Используйте Gatsby Starter Amsterdam

Это генерирует новый сайт, предварительно настроенный для использования темы Gatsby Amsterdam.

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	/	Root URL для всех сообщений.
contentPath	content	Расположение файлов разметки, используемых для сообщений.
transitions	true	Включите простые переходы страниц, оснащенные движением кадров
postsPerPage	6	Определяет количество сообщений, показанных на каждой странице. Это влияет как на посты, так и шаблон тегов.
grid	basic	Определяет тип сетки, используемой на постах и ​​шаблонах тегов. Два доступных параметра: basic и list .
progressIndicator	true	Включите индикатор прогресса в шаблон Post.
colorToggle	true	Включите кнопку в меню, чтобы переключить режимы цвета.

Пример использования

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

Дополнительная конфигурация

В дополнение к вариантам темы, есть несколько элементов, которые вы можете настроить через объект siteMetadata в gatsby-config.js на вашем сайте.

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

Настройка

Тема Гэтсби Амстердам использует тему пользовательского интерфейса. Чтобы настроить стиль темы, вы должны создать файл темы, а затем переопределить значения 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 не определен в параметрах темы. В теме используются четыре переменные передней материи, которые показаны ниже.

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