Unduh static - Unduh Kode Sumber static

static

Data situs web

1.0.0

Unduh

⚡️ Static - Kekuatan kesederhanaan murni.

Generator situs statis yang akan Anda sukai. Tidak ada lagi konfigurasi yang rumit, kerangka kerja membengkak, atau merasa seperti Anda ditendang di wajah oleh seekor kuda! Inilah spielnya:

Statis itu mudah .
HTML mudah .
Namun, entah bagaimana kami kehilangan seni membuat situs web html statis sederhana

Tidak lagi berdiri! Static ada di sini untuk merebut kembali tahta kesederhanaan!

Siapkan dalam sekejap

Pastikan Anda memiliki simpul yang diinstal pada mesin Anda, dan kemudian salin/tempel perintah berikut di terminal Anda:

 npm install -g @devdojo/static

Sekarang Anda akan memiliki perintah statis yang tersedia di mesin Anda, memungkinkan Anda untuk menjalankan yang berikut:

Statis -nama folder baru - Buat situs web baru dengan template starter statis
Static Dev - Mulai lingkungan dev dari situs web statis Anda
Static Build - Bangun Versi Siap Produksi Situs Web Anda (Tersedia di Direktori _site )

Selanjutnya, pergilah ke dokumentasi resmi untuk mempelajari lebih lanjut tentang membangun situs Anda.

? John lima alasan ini mungkin saja kemacetan Anda!

1. Routing berbasis halaman

Setiap file dalam direktori pages sesuai dengan rute di situs web Anda. Dengan struktur seperti ini:

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

Situs baru Anda akan memiliki rute berikut yang tersedia:

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

2. Tata letak

Desain tata letak yang dapat digunakan oleh banyak halaman.

 <!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 >

Kemudian, gunakan di halaman apa pun.

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

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

3. Termasuk

Buat parsial HTML yang dapat digunakan kembali dengan tag <include> . Tentukan file HTML dengan atribut src .

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

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

</layout>

4. Integrasi Tailwindcss

Tambahkan kode pendek TailwindCSS ke <head> dari tata letak apa pun dan secara otomatis akan disuntikkan. Contoh:

 <!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>

Ini akan diganti dengan tautan CDN tailwind di dev , dan file CSS yang lebih kecil akan dikompilasi selama build .

5. Koleksi

Tambahkan koleksi data ke aplikasi Anda. Berikut adalah contoh koleksi yang terletak di collections/menu.json

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

Sekarang, Anda dapat dengan mudah mengulangi koleksi ini:

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

Itu hanya beberapa fitur panas yang tersedia, tetapi ada banyak lagi yang harus diungkap dan dipelajari.

Pelajari lebih lanjut

Anda dapat mempelajari semua fitur yang tersedia secara statis dengan mengunjungi dokumentasi resmi. Anda mungkin juga tertarik untuk memeriksa beberapa templat di sini.

HTML statis adalah raja?

Memperluas

Informasi Tambahan