Startseite>ASP-Quellcode>Andere Kategorien
Herunterladen

Understanding Astro


Willkommen bei Understanding Astro!

Dieses Buch ist der ultimative Leitfaden für Astro, das auf Geschwindigkeit ausgelegte Web-Framework der nächsten Generation

Astro zu verstehen ist das Ergebnis monatelanger Beschäftigung mit Astro und der Vermittlung der Ergebnisse auf praktische und leicht verständliche Weise.

Wenn Sie Astro verstehen wollen, sind Sie bei uns genau richtig.

Lernen Sie nicht einfach ein anderes Framework. Verstehe es.

Möchten Sie die E-Books herunterladen?

Inhaltsverzeichnis

Im Folgenden finden Sie ein detailliertes Inhaltsverzeichnis für Understanding Astro.


Einführung

Einführung

  • Seien Sie nicht unzufrieden

  • Unterschiede zur offiziellen Dokumentation

  • Wie das Buch aufgebaut ist

  • Kapitelübersicht

  • Voraussetzungen

  • Typografische Konventionen


Kapitel 1: Erstellen Sie Ihre erste Astro-Anwendung

Kapitel 1: Erstellen Sie Ihre erste Astro-Anwendung

  • Was Sie lernen werden

  • Projektübersicht

  • Erste Schritte

    • Installieren Sie Node.js

    • Einrichten Ihres Code-Editors

  • Projektstruktur

    • tsconfig.json

    • package.json

    • package-lock.json

    • astro.config.mjs

    • src/env.d.ts

    • src/pages/index.astro

  • Einführung in Astro-Seiten

  • Anatomie einer Astro-Komponente

  • Komponentenstile

  • Seitenlayouts

  • Rendern von Komponenten und Slots

  • Komponentennamen groß schreiben

  • Die globale Stilrichtlinie

  • Benutzerdefinierte Schriftarten und globales CSS

  • Unabhängige Astro-Komponenten

  • Hinzufügen interaktiver Skripte

  • Interaktiver Themenwechsel

  • Der :global()-Selektor

  • Ereignisbehandlung

  • Theming über CSS-Variablen

  • Zugriff auf globale Clientobjekte

  • Die Magie der Drehbücher

  • Nutzung von Inline-Skripten

  • Globale Selektoren in Skripten

  • Markdown-Seiten

  • Navigieren zwischen Seiten

  • Markdown-Layouts

  • Verfassen von Layouts

  • Komponenten-Requisiten

  • Nutzung der Markdown-Frontmatter-Eigenschaften

  • Interaktiver Navigationsstatus

  • Komponentenzusammensetzung

  • Der Vorlagendatenfluss

  • Die dunkle Seite von define:vars

  • Laden mehrerer lokaler Dateien

  • Bereitstellen einer statischen Astro-Site

    • 1. Erstellen Sie statische Produktionsressourcen

    • 2. Stellen Sie die statischen Assets über einen statischen Webserver bereit

    • Das Problem bei manuellen Bereitstellungen

    • Automatisierung der Bereitstellung einer statischen Website

  • Wie schnell ist unsere Astro-Website?

  • Abschluss


Kapitel 2: Astro-Komponenten im Detail

  • Kapitel 2: Astro-Komponenten im Detail

  • Was Sie lernen werden

  • Einführung

  • Das Rückgrat von Astro

    • Die Javascript-Laufzeitmüdigkeit

    • Verzicht auf die Laufzeit

  • Was ist eine Astro-Komponente?

    • 1. Stile sind standardmäßig lokal

    • 2. Das HTML-Element ist immer vorhanden

    • 3. Stile und Skripte werden gehisst

    • 4. Das <head>-Element und seine untergeordneten Elemente werden nicht angehoben

    • Eine Astro-Komponente ist eine .astro-Datei, die jedes gültige HTML wiedergeben kann

    • Astro-Komponenten können zu komplexen Seiten zusammengestellt werden

  • Astro-Komponenten können eine leistungsstarke Vorlagensyntax nutzen

    • Variablen konsumieren
    • Erstellen Sie dynamische Attribute
    • Dynamisches HTML
    • Dynamische Tags
    • Slots erneut besuchen
    • Nicht ganz JSX
    • 1. Variablen erstellen oder referenzieren
    • 2. Abwicklung von Importen
    • 3. Daten abrufen

    • Komponentenskript

    • Komponentenvorlage

  • Abschluss


Kapitel 3: Erstellen Sie Ihre eigene Komponenteninsel

  • Kapitel 3: Erstellen Sie Ihre eigene Komponenteninsel

  • Was Sie lernen werden

  • Eine kurze Geschichte, wie wir hierher gekommen sind

    • Die Vorteile einer teilweisen Flüssigkeitszufuhr

    • Die Nachteile einer teilweisen Flüssigkeitszufuhr

    • Die Vorteile des serverseitigen Renderings mit clientseitiger Hydratation

    • Die Nachteile des serverseitigen Renderings mit clientseitiger Hydratation

    • Die Vorteile des serverseitigen Renderings

    • Die Nachteile des serverseitigen Renderings

    • Die Vorteile des clientseitigen Renderings (CSR)

    • Die Nachteile des clientseitigen Renderings

    • Wo alles beginnt

    • Clientseitiges Rendering (CSR)

    • Serverseitiges Rendering

    • Serverseitiges Rendering mit clientseitiger Hydratation

    • Teilweise Flüssigkeitszufuhr für den Sieg

    • Woher kommt die Inselarchitektur?

  • Eine teilweise Implementierung der Hydratationsinsel-Architektur

    • Vue

    • Petite-vue

    • Präagieren

    • Unterstützt die Bedingungen client:idle und client:media

    • waitForIdle

    • waitForMedia

    • Ziele

    • Installation

    • API-Design

    • Erste Schritte

    • Nutzung des Inhaltsvorlagenelements

    • Umgang mit verzögerter Flüssigkeitszufuhr über „client:“-Attribute

    • Unterstützende Frameworks: Vue, Petite-vue und Preact

  • Abschluss



Möchten Sie die E-Books herunterladen? klicken Sie hier



Kapitel 4: Erstellen Sie Ihre eigene Komponenteninsel

  • Kapitel 4: Das geheime Leben der Astro Component Islands

  • Was Sie lernen werden

  • Wie Inseln in Astro funktionieren

    • Es ist kein Fehler. Es ist eine Funktion.

    • Schritt 1: Erstellen Sie eine Astro-Site

    • Schritt 2: Installieren Sie die Framework-Integration

    • Schritt 3: Schreiben Sie das Komponenten-Framework

    • Schritt 4: Rendern Sie das Komponentengerüst

  • Verantwortungsvolle Flüssigkeitszufuhr

    • Kunde:Laden

    • Kunde:nur

    • Kunde:sichtbar

    • Kunde:Medien

    • Kunde: im Leerlauf

  • Verwendung mehrerer Frameworks

    • Ein Upvote-Zähler in Vue

    • Rendern verschiedener Framework-Komponenten

  • Gemeinsamer Status zwischen Komponenteninseln

    • So funktioniert der Nano Store

    • Installieren Sie den Nano Store

    • Erstellen Sie den Statuswert

    • Verwendung des Statuswerts in Framework-Komponenten

  • Übergabe von Requisiten und untergeordneten Elementen an Framework-Komponenten

  • Verschachtelte Framework-Komponenten

  • Fallstricke bei Astro Island

    • 1. Verwenden Sie keine Astro-Komponente in einer Framework-Komponente

    • 2. Befeuchten Sie eine Astro-Komponente nicht

  • Warum Inseln?

    • 1. Leistung

    • 2. Verantwortungsvolle Flüssigkeitszufuhr

    • 3. Paralleles Laden

  • Abschluss


Oh meine Reaktion! (Klon der React-Dokumentationsseite)

  • Kapitel 5: Oh meine Reaktion! (Klon der React-Dokumentationsseite)

  • Was Sie lernen werden

  • Richten Sie das Starterprojekt ein

  • Abhängigkeiten installieren

  • Astro-Projekte mit Tailwind gestalten

    • Rückenwind installieren

    • Wie funktioniert Tailwind?

    • Rückenwind-Konfiguration

  • Typescript-Importalias

  • Inseln und gemeinsame Seitenkomponenten

  • Syntaxhervorhebung

    • Vorteile

    • Nachteile

    • Vorteile

    • Nachteile

    • Die Standardcodekomponente

    • Bringen Sie Ihr Thema mit

    • Umgang mit hellen und dunklen Themen

  • Erste Schritte mit Inhaltssammlungen

    • Schnell Zod

    • Der .astro-Ordner

    • Welche Probleme lösen Inhaltssammlungen?

    • Organisieren von Inhaltssammlungen

    • Inhalte mit MDX erstellen

    • Inhaltssammlungen konfigurieren

  • Inhaltssammlungen abfragen und rendern

  • Dynamisches Routing

    • 1. Benannte Parameter

    • 2. Ruheparameter

    • Prioritätsreihenfolge

  • Generieren Sie Routen mit Inhaltssammlungen

    • Rendern jedes Blog-Inhalts

  • MDX-Komponenten

    • Angepasste HTML-Elemente

    • Interne Komponenten

    • Externe Importe

    • AutoImport

  • Integrations-Spotlight: Astro SEO

  • Benutzerdefinierte 404-Seiten in Astro

  • Abschluss


Kapitel 6: Serverseitiges Rendering (SSR) in Astro

  • Kapitel 6: Serverseitiges Rendering (SSR) in Astro

  • Was Sie lernen werden

  • Wann benötigen Sie SSR?

  • So aktivieren Sie SSR

  • Bereitstellen eines SSR-Projekts

  • Verwenden Sie den richtigen Adapter

  • SSR mit statischen Seiten

  • Von der Anfrage zur Antwort

    • Das Request-Objekt

    • Das Response-Objekt

    • Antwort umleiten

    • Dienstprogramme zum Bearbeiten von Cookies

    • Die IP-Adresse der Anfrage

  • Umgebungsvariablen

    • Umgebungsvariablen abrufen

    • Standardumgebungsvariablen

    • Umgebungsvariablen erstellen

    • Typoskript IntelliSense

  • Dynamische Routen

    • 1. Benannte Parameter

    • 2. Ruheparameter

    • Prioritätsreihenfolge

  • Serverendpunkte

    • Serverendpunkte erstellen

    • Details anfordern

    • Dynamische API-Routen

    • Dediziertes API-Verzeichnis

    • Unterstützung anderer HTTP-Methoden

  • Streams, oh Streams

    • Was ist Server-Streaming?

    • Warum sollten wir uns die Mühe machen?

    • Streaming ist einfach, aber schwierig

    • Server-Streaming in Astro

    • Die Vorteile des Streamings nutzen

  • Abschluss


Kapitel 7: Seien Sie hörbar! (Fullstack Astro-Projekt)

Kapitel 7: Seien Sie hörbar! (Fullstack Astro-Projekt)

  • Was Sie lernen werden

  • Projektaufbau

  • Projektübersicht

    • Die Homepage

    • Die Datensatzseite

    • Die Anmeldeseite

    • Die Anmeldeseite

    • Hilfskomponenten und Dienstprogramme

  • Technologieentscheidungen

  • Backend-Setup

  • Umgang mit der Authentifizierung

    • Firebase wird auf dem Client initialisiert

    • Verwendung der Firebase-Emulatoren

    • Bearbeitung von Benutzeranmeldungen

    • Handhabung der Benutzeranmeldung

  • Implementierung geschützter Seiten

    • Firebase auf dem Server initialisieren

    • Schutz der Homepage-Route

    • Aktualisieren der Weiterleitungs-URL

    • Melden Sie einen Benutzer von der geschützten Seite ab

  • Einrichtung des Cloud-Speichers

  • Audioaufnahmen hochladen

    • Abwicklung von Uploads über eine API-Route

    • Hochladen von Aufzeichnungen vom Client

    • Reagieren auf UI-Änderungen in Framework-Komponenten

  • Daten vom Server abrufen

  • Senden von HTML-Formularen

  • Abschluss


Kapitel 1: Erstellen Sie Ihre erste Astro-Anwendung

  • Kapitel 8: Erstellen Sie Ihre eigenen Astro-Integrationen

  • Was Sie lernen werden

  • Astro und Vite

  • Was sind Astro-Integrationen?

  • Hallo Welt. Entschuldigung, Hallo, Integration

    • Projektziel

    • Ihre erste benutzerdefinierte Integration

    • Drucken einer Nachricht an die Serverkonsole

    • Benutzerdefinierte Integrationen als Factory-Funktionen

  • Der Lebenszyklus von Astro-Hooks

    • Das Wann und Warum von Hooks

    • Untersuchen der Hook-Bewertungsreihenfolge

  • Erstellen Sie eine Standard-Prerender-Integration

    • Projektziel

    • Integrations-API

    • Technische Lösungsübersicht

    • Projekte über CLI-Flags initialisieren

    • Einrichten der Integration

    • Validieren einer aufgelösten Astro-Konfiguration

    • Anwenden von Vite-Plugins in benutzerdefinierten Integrationen

    • Schreiben von Vite-Plugins für Astro

    • Parsen und Transformieren von ASTs

    • Manuelles Testen

  • Erstellen von Renderern und Bibliotheksintegrationen

  • Abschluss


Abschluss

Abschluss



Möchten Sie die E-Books herunterladen? klicken Sie hier


Lizenz

Dieses Projekt ist unter der Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License lizenziert. Weitere Informationen finden Sie in der Datei LICENSE.md.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle