skeleventy

โครงกระดูกเริ่มต้นสิบเอ็ด

Skeleventy ให้รากฐานที่แข็งแกร่งของคุณในการสร้างเว็บไซต์คงที่ที่รวดเร็วและเข้าถึงได้ ดูไซต์สาธิต

คุณสมบัติ

• ท่อส่งข้อมูลที่สะอาดและน้อยที่สุดพร้อม SCSS และ Laravel Mix สำหรับการรวบรวมสินทรัพย์
• Gorko เครื่องกำเนิดไฟฟ้าระดับยูทิลิตี้
• purgecss เพื่อลบ CSS ที่ไม่ได้ใช้
• html minifier
• รองรับ ES2017 JavaScript ด้วยการรวบรวม Babel
• Meta หน้าเป็นมิตรของ SEO รวมถึง Open กราฟและ Twitter
• ภาพขี้เกียจกำลังโหลด
• การนำทางมือถือ
• XML Sitemap
• บล็อกที่สะอาดและเรียบง่ายพร้อมหมวดหมู่และภาพที่โดดเด่น

เริ่มต้น

ข้อกำหนดเบื้องต้น

โหนด v10+

การติดตั้ง

1. โคลน repo git clone https://github.com/josephdyer/skeleventy.git
2. cd ลงในโฟลเดอร์โครงการและเรียกใช้ npm install
3. เริ่มต้นเซิร์ฟเวอร์การพัฒนาท้องถิ่นโดยเรียกใช้ npm run dev TIP: Eleventy มีการโหลดสดสดใหม่!

โครงสร้างโฟลเดอร์

สิบเอ็ด

• site/ มีข้อมูลทั่วโลกเทมเพลตและเนื้อหาทั้งหมด
• utilities/ มี filters ตัวช่วยและ transforms
• แต่ละหน้าควรมีโฟลเดอร์ที่เกี่ยวข้องกับตัวเองที่มีไฟล์ index.md
• จากนั้นคุณสามารถเลือกเค้าโครงที่เหมาะสมที่สุดสำหรับแต่ละหน้า (หรือสร้างเพิ่มเติมหากคุณต้องการ)
• การนำทางใช้พลังงานจากปลั๊กอินการนำทางอย่างเป็นทางการ

สินทรัพย์

• css/ สำหรับ CSS ที่รวบรวม
• js/ สำหรับ JavaScript ที่รวบรวม
• images/ มีรูปภาพของไซต์ของเราไอคอนสไปรต์ SVG และโฟลเดอร์สำหรับภาพเมตา (OG, Twitter ฯลฯ )

ท่อส่ง

Laravel Mix ช่วยให้เรามีชั้น API ที่ดีที่ด้านบนของ Webpack Skeleventy ใช้การตั้งค่าที่ง่าย แต่คุณ สามารถ ใช้ประโยชน์จากการขยายการผสมผสานกับการกำหนดค่า WebPack ที่กำหนดเองการแยกรหัสและปลั๊กอินเช่น postCSS หากคุณต้องการ

คุณจะพบ SCSS และ JS ที่ไม่มีการรวบรวมของเว็บไซต์ภายใน resources/ ที่ซึ่ง MIX จะดูไดเรกทอรีเหล่านี้สำหรับการเปลี่ยนแปลงใด ๆ เคล็ดลับ: เป็นการดีที่สุดที่จะรีสตาร์ทเซิร์ฟเวอร์เสมอเมื่อสร้างส่วนหรือโฟลเดอร์ใหม่ ๆ

SCSS

• scss/ มีโครงสร้างเป็นโฟลเดอร์ย่อยที่มีความคิดเห็น
• ไฟล์ _config.scss เป็นที่ที่คุณสามารถเปลี่ยนสีของไซต์และคลาสยูทิลิตี้ที่สร้างโดย Gorko
• มาตราส่วนตัวอักษรได้รับการตั้งค่าโดยใช้มาตราส่วน ที่สามที่สำคัญ ที่ฉันโปรดปราน
• เคล็ดลับ: สำหรับเครื่องชั่งเพิ่มเติมลองดูสเกลประเภท

กอร์โก

ฉันตัดสินใจที่จะลบ tailwind เพื่อสนับสนุน Gorko อย่างหมดจดเพื่อความเรียบง่ายและการบำรุงรักษา (โดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาใหม่) การไม่มี มากเกินไป ที่จะเริ่มต้นและเพิ่มสิ่งที่คุณต้องการจะนำไปสู่ ​​codebase ที่ง่ายกว่าและบำรุงรักษาได้มากขึ้น Gorko ช่วยให้คุณเพิ่มคลาสยูทิลิตี้ที่นำกลับมาใช้ใหม่ได้เพื่อช่วยให้รหัสของคุณแห้ง ให้เครดิตกับ Andy Bell สำหรับการสร้างเครื่องมือเล็ก ๆ ที่มีประโยชน์นี้

จาวาสคริปต์

• utilities/ มีฟังก์ชั่นยูทิลิตี้/ ผู้ช่วยทั่วโลก
• modules/ มีจาวาสคริปต์ที่แท้จริงของไซต์ของคุณทั้งหมดยังคงเรียบร้อยและเป็นระเบียบภายในโฟลเดอร์ย่อย ของโมดูลาร์
• คุณสามารถนำเข้าโฟลเดอร์ย่อยเหล่านี้ไปยัง main.js โดยใช้ import '@modules/example-module'
• เคล็ดลับ: คุณสามารถตั้งค่านามแฝงนำเข้าเสริมผ่านไฟล์ webpack.mix.js

หมายเหตุเกี่ยวกับภาพที่ตอบสนอง

Skeleventy ไม่มีภาพที่ตอบสนองต่อการอบเหตุผลหลักคือ: เป็นการดีที่สุดที่ใช้ CDN ตรวจสอบบทช่วยสอนนี้เกี่ยวกับการตั้งค่าที่สูงขึ้นยี่สิบด้วย Cloudinary