gatsby starter saas marketing

☁ بداية بسيطة لموقع تسويق صفحة واحدة لشركات SaaS والمتسللين المستقلين.

العرض التوضيحي المباشر: https://gatsby-starter-saas-marketing.netlify.com/- ️ لم يعد النشر التجريبي المباشر متاحًا على NetLify.

ابدء ؟

تثبيت Gatsby CLI - مزيد من المعلومات

npm install -g gatsby-cli

أو

yarn global add gatsby-cli

قم بتثبيت المبتدئ محليًا:

gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing

تثبيت التبعيات:

yarn install

ابدأ خادم التطوير:

gatsby develop

في جذر المشروع ، قم بتجميع طلبك للنشر:

gatsby build

قم بتنظيف ذاكرة التخزين المؤقت لإصلاح بعض الأخطاء - قم بتشغيل الأمر Clean قبل بدء تشغيل خادم DEV:

gatsby clean

في جذر المشروع ، تخدم بنية إنتاج موقعك:

gatsby serve

أنماط

يستخدم هذا المبتدئة المكافآت المصممة. يحتوي ملف السمة على الأنماط الأساسية src/styles/theme.js ، ويحتوي ملف الأنماط العالمية على أنماط العناصر الأساسية وأنماط إعادة تعيين src/styles/GlobalStyles.js .

ملاحة

يستخدم هذا المبتدئات React-Mancor-Link-Smooth-Scroll و React-Scrollspy. لربط عنصر التنقل بقسم ما ، ما عليك سوى إضافة معرف وقيمة سلسلة إلى عنصر الأصل القسم يتوافق مع نفس قيمة سلسلة التنقل في navigation.js

️ يتم ربط قسم Features فقط. لا يتم ربط أقسام المنتجات والتسعير عن قصد وستقوم برمي TypeError في وحدة التحكم عند النقر عليها (لأنها غير موجودة في البداية). يرجى التواصل إذا كنت تريد مساعدة تمديد هذه الميزة.

نشر إلى NetLify

دليل النشر

جمع رسائل البريد الإلكتروني مع نماذج NetLify

معالجة النموذج مع gatsby.js v2 و netlify

مثال استخدام نموذج netlify

في header.js استبدال مكونات <HeaderForm>...</HeaderForm> مع ما يلي ، يجب أن يوفر مثالًا يعمل بمجرد نشر موقعك:

 <HeaderForm
 name="early-access"
 method="post"
 data-netlify-honeypot="bot-field"
 data-netlify="true"
>
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="early-access" />
  <HeaderInput
   type="email"
   placeholder="Your email"
   name="email"
   id="email"
   required
  />
  <HeaderButton>Early access</HeaderButton>
</HeaderForm>