gatsby theme amsterdam

แกตสบี้ ธีม อัมสเตอร์ดัม

ธีม Gatsby สำหรับศิลปิน ช่างภาพ และผู้สร้างสรรค์คนอื่นๆ

เว็บไซต์สาธิต

คุณสมบัติ

• การออกแบบที่ตอบสนองน้อยที่สุด
• การเปลี่ยนหน้าเพิ่มเติม
• ตัวเลือกตารางหลายรายการเพื่อแสดงโพสต์
• สีของธีมและการพิมพ์ที่ปรับแต่งได้ด้วย Theme UI
• รองรับ MDX
• องค์ประกอบที่เป็นมิตรกับ SEO
• เมนูมือถือ
• ตัวบ่งชี้ความคืบหน้าการเลื่อนเพิ่มเติม
• สลับตัวเลือกเพื่อสลับโหมดสี
• อารมณ์โดยใช้ไวยากรณ์ส่วนประกอบที่มีสไตล์
• แท็ก
• การแบ่งหน้า
• การสนับสนุนออฟไลน์

การติดตั้ง

ใช้ Gatsby Starter อัมสเตอร์ดัม

สิ่งนี้จะสร้างไซต์ใหม่ที่ได้รับการกำหนดค่าล่วงหน้าเพื่อใช้ Gatsby Theme 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	/	URL รากสำหรับโพสต์ทั้งหมด
contentPath	content	ตำแหน่งของไฟล์มาร์กดาวน์ที่ใช้สำหรับการโพสต์
transitions	true	รวมการเปลี่ยนหน้าอย่างง่ายที่ขับเคลื่อนด้วย framer-motion
postsPerPage	6	กำหนดจำนวนโพสต์ที่แสดงในแต่ละหน้า ซึ่งส่งผลต่อทั้งโพสต์และเทมเพลตแท็ก
grid	basic	กำหนดประเภทของตารางที่ใช้ในโพสต์และเทมเพลตแท็ก มีสองตัวเลือก: basic และ list
progressIndicator	true	รวมตัวบ่งชี้ความคืบหน้าในเทมเพลตโพสต์
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' ,
      } ,
    ] ,
  } ,
}

การปรับแต่ง

Gatsby Theme Amsterdam ใช้ธีม UI ในการปรับแต่งการกำหนดสไตล์ของธีม คุณต้องสร้างไฟล์ธีม จากนั้นแทนที่ค่า amsterdamTheme ดีฟอลต์ หากคุณคุ้นเคยกับ Styled Components หรือ Emotion ก็เหมือนกับการปรับธีมที่คุณส่งไปยัง 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]
---