gatsby theme amsterdam

موضوع غاتسبي أمستردام

موضوع غاتسبي للفنانين والمصورين وغيرهم من المبدعين.

موقع تجريبي

سمات

• الحد الأدنى من التصميم المستجيب
• انتقالات الصفحة الاختيارية
• خيارات شبكة متعددة لعرض المشاركات
• ألوان السمات والطباعة القابلة للتخصيص باستخدام Theme UI
• دعم ام دي اكس
• مكون صديق لكبار المسئولين الاقتصاديين
• قائمة الجوال
• مؤشر تقدم التمرير الاختياري
• تبديل اختياري لتبديل أوضاع الألوان
• العاطفة باستخدام بناء جملة المكونات المصممة
• العلامات
• ترقيم الصفحات
• دعم دون اتصال

تثبيت

استخدم غاتسبي ستارتر أمستردام

سيؤدي هذا إلى إنشاء موقع جديد تم تكوينه مسبقًا لاستخدام 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	قم بتضمين انتقالات بسيطة للصفحة مدعومة بحركة الإطارات
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 موضوع واجهة المستخدم. من أجل تخصيص تصميم السمة، يجب عليك إنشاء ملف سمة ثم تجاوز قيم 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]
---