หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

⚡คงที่ - พลังอันบริสุทธิ์ของความเรียบง่าย

เครื่องกำเนิดไซต์คงที่ที่คุณจะรัก ไม่มีการกำหนดค่าที่ซับซ้อนอีกต่อไปเฟรมเวิร์กป่องหรือรู้สึกเหมือนคุณถูกเตะด้วยม้า! นี่คือ Spiel:

  • คงที่เป็น เรื่องง่าย
  • HTML เป็น เรื่องง่าย
  • แต่อย่างใดเราก็สูญเสียศิลปะ การประดิษฐ์เว็บไซต์ HTML แบบคงที่อย่างง่าย

จะไม่ยืนอีกต่อไป! คง ที่อยู่ที่นี่เพื่อเรียกคืนบัลลังก์แห่งความเรียบง่าย!

การตั้งค่าในสแน็ป

ตรวจสอบให้แน่ใจว่าคุณติดตั้งโหนดบนเครื่องของคุณแล้วคัดลอก/วางคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ: 

 npm install -g @devdojo/static

ตอนนี้คุณจะมีคำสั่ง แบบคงที่ ในเครื่องของคุณช่วยให้คุณสามารถเรียกใช้สิ่งต่อไปนี้:

  • โฟลเดอร์ใหม่แบบคงที่ - สร้างเว็บไซต์ใหม่ด้วยเทมเพลต Static Starter
  • Static Dev - เริ่มต้นสภาพแวดล้อมการพัฒนาของเว็บไซต์คงที่ของคุณ
  • Build Static - สร้างเว็บไซต์พร้อมการผลิตของคุณ (มีอยู่ในไดเรกทอรี _site )

ถัดไปตรงไปที่เอกสารอย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างเว็บไซต์ของคุณ

️เหตุผลห้าประการนี้อาจเป็นแยมของคุณ!

1. การกำหนดเส้นทางตามหน้าเว็บ

แต่ละไฟล์ภายในไดเรกทอรี pages ตรงกับเส้นทางบนเว็บไซต์ของคุณ ด้วยโครงสร้างเช่นนี้: 

 pages
├── index.html
├── about.html
├── contact
│   ├── index.html
│   ├── form
│   │   ├── index.html

ไซต์ใหม่ของคุณจะมีเส้นทางต่อไปนี้: 

 http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form

2. เลย์เอาต์

การออกแบบ เลย์เอาต์ ที่หลายหน้าสามารถใช้ประโยชน์ได้ 

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
    < title > {title} </ title >
</ head >
< body >
    {slot}
</ body >
</ html >

จากนั้นใช้ในหน้าใดก็ได้ 

 <layout title="Radical Righteousness" src="main.html">

    <h1>?‍♂️ Totally Tubuloso Website</h1>
    
</layout>

3. รวมถึง

สร้าง Partials HTML ที่ใช้ซ้ำได้ด้วยแท็ก <include> ระบุไฟล์ HTML ด้วยแอตทริบิวต์ src 

 <layout title="Behind the Scenes!" src="main.html">

    <include src="about-header.html"></include>
    <include src="about-copy.html"></include>

</layout>

4. การรวม Tailwindcss

เพิ่ม รหัสย่อ tailwindcss ลงใน <head> ของเค้าโครงใด ๆ และจะถูกฉีดโดยอัตโนมัติ ตัวอย่าง: 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    {tailwindcss}
</head>
<body>
    {slot}
</body>
</html>

มันจะถูกแทนที่ด้วยลิงก์ CDN tailwind ใน dev และไฟล์ CSS ที่ย่อมาจากการสร้างในระหว่าง build

5. คอลเลกชัน

เพิ่มคอลเลกชันของข้อมูลลงในแอปพลิเคชันของคุณ นี่คือคอลเลกชันตัวอย่างที่อยู่ที่ คอลเลกชัน/เมนู json 

 [
    {
        "title" : "Home",
        "link" : "/"
    },
    {
        "title" : "About",
        "link" : "/about"
    }
]

ตอนนี้คุณสามารถวนลูปผ่านคอลเลกชันนี้ได้อย่างง่ายดาย: 

 <ForEach collection="menu">
    <li>{menu.title}</h1>
</ForEach>

นี่เป็นเพียงไม่กี่คุณสมบัติที่ร้อนแรง แต่มีอีกมากมายที่จะเปิดเผยและเรียนรู้

เรียนรู้เพิ่มเติม

คุณสามารถเรียนรู้เกี่ยวกับคุณสมบัติทั้งหมดที่มีอยู่ในแบบคงที่โดยไปที่เอกสารอย่างเป็นทางการ คุณอาจสนใจที่จะตรวจสอบเทมเพลตบางส่วนที่นี่

HTML คงที่เป็นราชาหรือไม่?

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด