gatsby starter saas marketing
1.0.0
การสาธิตสด: https://gatsby-starter-saas-marketing.netlify.com/-
ติดตั้ง 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 และไฟล์ Global Styles ประกอบด้วยสไตล์องค์ประกอบพื้นฐานและสไตล์การรีเซ็ต src/styles/GlobalStyles.js
ผู้เริ่มต้นนี้ใช้ React-anchor-link-smool-scroll และ react-scrollspy ในการเชื่อมโยงรายการการนำทางไปยังส่วนเพียงเพิ่ม ID และค่าสตริงลงในส่วนองค์ประกอบหลักที่สอดคล้องกับค่าสตริงการนำทางเดียวกันใน navigation.jsFeatures เท่านั้นที่เชื่อมโยง ส่วนผลิตภัณฑ์และการกำหนดราคาไม่ได้เชื่อมโยงโดยเจตนาและจะโยน TypeError ในคอนโซลเมื่อคลิก (เพราะไม่มีอยู่ในผู้เริ่มต้น) โปรดติดต่อหากคุณต้องการความช่วยเหลือในการขยายคุณสมบัตินี้
คู่มือการปรับใช้
การจัดการแบบฟอร์มด้วย gatsby.js v2 และ 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>
