gatsby theme amsterdam

Tema Gatsby Amsterdam

Tema Gatsby untuk seniman, fotografer, dan orang kreatif lainnya.

Situs Demo

Fitur

• Desain responsif minimal
• Transisi halaman opsional
• Beberapa opsi kisi untuk menampilkan postingan
• Warna tema dan tipografi yang dapat disesuaikan dengan Theme UI
• dukungan MDX
• Komponen ramah SEO
• Menu seluler
• Indikator kemajuan gulir opsional
• Tombol opsional untuk mengganti mode warna
• Emosi menggunakan sintaksis komponen gaya
• Tag
• Paginasi
• Dukungan luring

Instalasi

Gunakan Gatsby Pemula Amsterdam

Ini akan menghasilkan situs baru yang telah dikonfigurasi sebelumnya untuk menggunakan Gatsby Theme Amsterdam.

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

Tambahkan Secara Manual Ke Situs Anda

1. Instal temanya

npm install --save gatsby-theme-amsterdam

atau

yarn add gatsby-theme-amsterdam

2. Tambahkan tema ke gatsby-config.js Anda

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

Penggunaan

Pilihan Tema

Kunci	Nilai Bawaan	Keterangan
basePath	/	URL root untuk semua posting.
contentPath	content	Lokasi file penurunan harga yang digunakan untuk postingan.
transitions	true	Sertakan transisi halaman sederhana yang didukung dengan gerakan pembingkai
postsPerPage	6	Menentukan jumlah posting yang ditampilkan pada setiap halaman. Ini mempengaruhi postingan dan template tag.
grid	basic	Menentukan jenis kisi yang digunakan pada postingan dan templat tag. Dua opsi yang tersedia: basic dan list .
progressIndicator	true	Sertakan indikator kemajuan pada templat posting.
colorToggle	true	Sertakan tombol di menu untuk mengganti mode warna.

Contoh Penggunaan

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

Konfigurasi Tambahan

Selain opsi tema, ada beberapa item yang dapat Anda sesuaikan melalui objek siteMetadata di gatsby-config.js situs Anda.

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

Kustomisasi

Gatsby Theme Amsterdam menggunakan Tema UI. Untuk menyesuaikan gaya tema, Anda harus membuat file tema dan kemudian mengganti nilai default amsterdamTheme . Jika Anda familiar dengan Styled Components atau Emotion, itu sama saja dengan mengadaptasi tema yang Anda teruskan ke ThemeProvider .

Semua nilai default dapat dilihat di sini.

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

Menulis Konten

Posting ditulis dalam format penurunan harga / mdx dengan .md atau .mdx dan ditempatkan di direktori content di akar situs kecuali contentPath yang berbeda ditentukan dalam opsi tema. Ada empat variabel front matter yang digunakan dalam tema yang ditunjukkan di bawah ini.

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