static Download - static Quellcode -Download

static

Website-Daten

1.0.0

Herunterladen

⚡️ Statisch - Die reine Kraft der Einfachheit.

Ein statischer Site -Generator, den Sie lieben werden. Keine komplizierten Konfigurationen, aufgeblähten Frameworks oder das Gefühl, von einem Pferd ins Gesicht geworden zu sein! Hier ist das Spiel:

Statisch ist einfach .
HTML ist einfach .
Doch irgendwie haben wir die Kunst verloren, einfache statische HTML -Websites zu erstellen

Dies wird nicht mehr stehen! Static ist hier, um den Thron der Einfachheit zurückzugewinnen!

Einrichten in einem Schnappschuss

Stellen Sie sicher, dass Sie den Knoten auf Ihrem Computer installiert haben, und kopieren Sie den folgenden Befehl in Ihrem Terminal: Kopieren Sie den folgenden Befehl:

 npm install -g @devdojo/static

Jetzt haben Sie den statischen Befehl auf Ihrem Computer, sodass Sie Folgendes ausführen können:

Statische neue Ordnername - Erstellen Sie eine neue Website mit der statischen Startervorlage
Statische Dev - Starten Sie eine Entwicklerumgebung Ihrer statischen Website
Statische Build - Erstellen Sie eine Produktionsversion Ihrer Website (verfügbar im Verzeichnis _site )

Gehen Sie als nächstes in die offizielle Dokumentation, um mehr über den Aufbau Ihrer Website zu erfahren.

? ️ Fünf Gründe, warum dies nur Ihr Marmelade sein könnte!

1. Seitenbasierte Routing

Jede Datei im Verzeichnis pages entspricht einer Route auf Ihrer Website. Mit einer solchen Struktur:

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

In Ihrer neuen Website stehen die folgenden Routen zur Verfügung:

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

2. Layouts

Entwurfslayouts , die mehrere Seiten verwenden können.

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

Verwenden Sie es dann auf jeder Seite.

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

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

3. Inklusive

Erstellen Sie mit dem <include> Tag wiederverwendbare HTML-Partials. Geben Sie die HTML -Datei mit dem src -Attribut an.

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

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

</layout>

4. Tailwindcss Integration

Fügen Sie den TailwindCSS -Shortcode zum <head> eines beliebigen Layouts hinzu und es wird automatisch injiziert. Beispiel:

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

Es wird durch den Link CDN in dev ersetzt, und eine minifizierte CSS -Datei wird während build kompiliert.

5. Sammlungen

Fügen Sie Ihrer Anwendung Datensammlungen hinzu. Hier ist eine Beispielsammlung bei Collections/Menu.json

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

Jetzt können Sie diese Sammlung leicht durchlaufen:

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

Dies sind nur einige der heißen Funktionen, die verfügbar sind, aber es gibt so viel mehr zu entdecken und zu lernen.

Erfahren Sie mehr

Sie können über alle in statischen verfügbaren Funktionen erfahren, indem Sie die offizielle Dokumentation besuchen. Möglicherweise sind Sie auch daran interessiert, einige der Vorlagen hier zu überprüfen.

Statische HTML ist König?

Expandieren

Zusätzliche Informationen