gatsby emotion tailwind starter

جاتسبي العاطفة بداية

** يرجى ملاحظة أن هذا القالب في لم يعد يتم الحفاظ عليه **

قالب بداية لإنشاء موقع ويب ثابت بسرعة. يأتي مسبقًا مع Gatsby ، والعاطفة ، والواحد الخلفي لتجعلك تعمل بسرعة. مستوحاة من المجلس المجلس المجلس الغاتسبي

Demo استضافته على NetLify.

سمات

• رد فعل مولد ثابت Gatsbyjs V2
• مشاعر مكتبة CSS-in-JS لمكوناتك المصممة
• CSS فائدة إطار عمل css tailwind لإضافة النمط بسرعة
• الدعم دون اتصال
• تطبيق الويب التقدمي
• تحميل الصور الكسول مع دعم الويب
• خريطة sitemap التي تم إنشاؤها تلقائيًا
• وضع Dark Mode Tailwind CSS المتغير

ابدء

 # download the template zip via dropdown or
git clone https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter.git

ابدأ في التطور

انتقل إلى دليل القالب

 # install dependencies
npm install
# yarn
yarn

# development with hot re-load
npm run dev
# yarn
yarn dev

# build for production
npm run build
# yarn
yarn build

باستخدام العاطفة والذنب

باستخدام CSS Utility Library Tailwind ، يمكنك إضافة أنماط وتصميم متجاوب بسرعة ، كل ذلك دون الحاجة إلى كتابة أي CSS. تتيح لك العاطفة تسمية ونمط عناصر ضمن ملفات JS الخاصة بك.

 /*
  import tw, { styled } from 'twin.macro';

  ** Creating a styled div, centering children via flex-box **
*/

const StyledDiv = styled . div `
  ${ tw `flex justify-center items-center` }
`

/*
  ** Or with grid **
*/
const AltStyledDiv = tw . div `grid place-content-center place-items-center`

return (
 < >
    < StyledDiv >
      < p > I'm centred </ p >
      < p > Me too! </ p >
    </ StyledDiv >
    < AltStyledDiv >
      < p > Same here </ p >
    </ AltStyledDiv >
 </ >
) ;

تعد مستندات Tailwind مورد رائع لتبدأ. يستخدم المبتدئين Twin.Macro وهي مكتبة رائعة ، وتتضمن العديد من المتغيرات الإضافية.

التخصيص

• تكوين Tailwind. افتح ملف tailwind.config.js لتعيين تفضيلات ومتطلبات المشروع الخاصة بك ، مثل نقاط الاستراحة والألوان والخطوط.

• يتم استخدام مكون تخطيط ( src/components/Layout.js ) لتشكيل تخطيط افتراضي موحد لالتفاف الصفحات.

• وضع الظلام والضوء. افتح src/components/styled/baseStyles.js و tailwind.config.js لمعرفة أين/كيف تتم إضافة متغيرات CSS المخصصة. يمكنك أيضًا استخدام البديل المظلم لـ Tailwinds داخل المكونات المصممة ، كما هو موضح في src/components/home/styled/card.js مع متغير مظلم ، ومكونات src/components/styled/socialList.js لمتغير خفيف.

• يستخدم هذا القالب محارف البرنامج المساعد لتحسين توصيل الخط. يتطلب تغيير الخطوط (الخطوط) ببساطة تثبيت المحرف المفضل لديك والاستيراد إلى gatsby-browser.js . تذكر أن تضيف خطاتك (الخطوط) إلى tailwind.config.js ، إما خطوط Sans/Serif ، من أجل استخدامها مع أدوات التوقيف.

• مكون مُحسّنات محرّكات البحث ، مأخوذة من Gatsby-Starter-Blog ، مما يسمح لك بإضافة أوصاف SEO والعنوان.

• فافيكون. تم إنشاؤه تلقائيًا من Gatsby-Plugin-Manifest في gatsby-config.js . استبدل Favicon الحالي ( src/images/icon/logo.png ) برمز 512x512 الخاص بك