elastiq

elastiq.ch

https://elastiq.ch/ เว็บไซต์

แก้ไขเนื้อหา

แก้ไขเว็บไซต์ที่นี่

การติดตั้งในท้องถิ่น

การตั้งค่านี้ใช้โหนดและ NPM เพื่อสร้างเว็บไซต์แบบคงที่

1. ติดตั้งโหนดและ npm (https://nodejs.org/en/)
2. ใช้เทอร์มินัล/บรรทัดคำสั่งเพื่อนำทางไปยังโฟลเดอร์ที่คุณเช็คเอาท์โปรเจ็กต์
3. ติดตั้ง deps โดยพิมพ์ npm install
4. เมื่อเสร็จแล้วให้พิมพ์ npm start ทำงานกับโปรเจ็กต์

การตั้งค่า

• parcel.js สร้างทุกอย่าง
• posthtml-expressions ปลั๊กอินนี้มีไวยากรณ์สำหรับรวมตัวแปรและนิพจน์ในเครื่องในเทมเพลตของคุณ และยังขยายแท็กที่กำหนดเองเพื่อทำหน้าที่เป็นผู้ช่วยเหลือสำหรับเงื่อนไขและการวนซ้ำ ส่วนใหญ่ใช้เพื่อรวมเนื้อหาจาก data.yml posthtml-load-config ทำให้แน่ใจว่า .posthtmlrc.js ข้อมูลจาก YML จบลงใน locals จาก posthtml-expressions
• .browserslistrc ตั้งค่าความเข้ากันได้ของเบราว์เซอร์สำหรับคำนำหน้าอัตโนมัติ

 ┌──────────┐    ┌────────────────────┐
│ data.yml │───▶│posthtml-expressions│──┐
└──────────┘    └────────────────────┘  │
┌──────────┐    ┌───────────────────┐   │
│style.scss│───▶│  sass & postCSS   │──┐│  ┌─────────────┐
└──────────┘    └───────────────────┘  ├┴─▶│ /index.html │
┌──────────┐    ┌───────────────────┐  │   └──────┬──────┘
│ main.js  │───▶│     babel.js      │──┤         ┌┘
└──────────┘    └───────────────────┘  │         │
                         ┌──────────┐  │         ▼
                         │  images  │──┘    ┌─────────┐
                         └──────────┘       │ Magic * │
                                            └─────────┘
                                                 │
                                                 │
                                                 │
     * Magic = parcel.js             ┌───────────▼─────────┐
                                     │       ./dist        │
                                    ┌┴─────────────────────┴┐
                                    │      index.html       │
                                    ├───────────────────────┤
                                    │       style.css       │
                                    ├───────────────────────┤
                                    │  *.{jpg|png|gif...}   │
                                    └┬─────────────────────┬┘
                                     └─────────────────────┘

ใบอนุญาต

© David Aerne อย่าลังเลที่จะทำทุกอย่างกับแหล่งที่มา ยกเว้นภาพประกอบ.. อย่าแบ่งปันหรือใช้ซ้ำ