gatsby emotion tailwind starter

Gatsby Emotion Tailwind Starter

** โปรดทราบว่าเทมเพลตนี้ไม่ได้รับการดูแลอีกต่อไป **

เทมเพลตสตาร์ทเตอร์เพื่อสร้างเว็บไซต์คงที่แบบลดน้ำหนักอย่างรวดเร็ว มาก่อนสร้างด้วย Gatsby อารมณ์และ Tailwind เพื่อให้คุณได้รับการวิ่งอย่างรวดเร็ว แรงบันดาลใจจากบล็อก Gatsby-Starter

การสาธิตโฮสต์บน Netlify

คุณสมบัติ

• ตอบสนองเครื่องกำเนิดไฟฟ้าคงที่ Gatsbyjs v2
• CSS-in-JS Emotion Emotion สำหรับส่วนประกอบสไตล์ของคุณ
• CSS Utility Framework Tailwind CSS เพื่อเพิ่มสไตล์ได้อย่างรวดเร็ว
• การสนับสนุนออฟไลน์
• แอปพลิเคชันเว็บแบบก้าวหน้า
• ขี้เกียจกำลังโหลดรูปภาพด้วยการสนับสนุน webp
• แผนผังไซต์ที่สร้างโดยอัตโนมัติ
• ตัวแปร 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

ใช้อารมณ์และ tailwind

ด้วย 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 config เปิดไฟล์ 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 array เพื่อที่จะใช้กับยูทิลิตี้ tailwind

• ส่วนประกอบ SEO นำมาจาก Gatsby-Starter-Blog ช่วยให้คุณสามารถเพิ่มคำอธิบาย SEO และชื่อเรื่องของคุณ

• Favicon สร้างอัตโนมัติจาก Gatsby-Plugin-Manifest Set ใน gatsby-config.js แทนที่ Favicon ปัจจุบัน ( src/images/icon/logo.png ) ด้วยไอคอน 512x512 ของคุณเอง