Integrieren von Templ

Das wird länger, da wir jetzt drei (3) Dateien benötigen. Außerdem benötigen wir ein statisches Verzeichnis für Dateien wie favicon.ico, eine CSS-Datei (wenn Sie sich für die Verwendung von CSS entscheiden), ein Logo oder eine andere statische Datei.

net/http-Dokumente. Das sind deine besten Freunde.

Lasst uns anfangen, sollen wir?

Installieren und einrichten

Zum Glück ist dies so, wie Go eingerichtet ist, ein unkomplizierter Prozess.
Gehen Sie und installieren Sie github.com/a-h/templ/cmd/templ@latest
Mit dem obigen Befehl erhalten Sie die Templ-Binärdatei (Sie haben Ihren PATH festgelegt, oder?).
Holen Sie sich github.com/a-h/templ
Dieser lädt templ in deinen go.mod.

Das ist es. Installation und Einrichtung sind abgeschlossen.

Und der Kampf

Der schwierigste Teil dieses Prozesses bestand darin, die Datei „styles.css“ richtig zu laden. Wenn Sie keine CSS-Datei verwenden, können Sie die Zeile bezüglich des statischen Verzeichnisses überspringen.

// File: /root/cmd/server/main.go
package main

import (
    [go mod module name]/internal/views
)
func main(){
    port := ":3000"
    home := templ.Component(views.Home())

    http.Handle("/", templ.Handler(home))
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

    log.Fatal(http.ListenAndServe(port, nil))
}

Es sieht komplizierter aus, als es wirklich ist. Schauen wir uns das Schritt für Schritt an.

port := ":3000"

Port ist, nun ja, der Port (ich gehe davon aus, dass Sie wissen, was ein Port ist). Stellen Sie beim Übergeben des Ports an http.ListenAndServe(addr string, handler Handler) sicher, dass Sie Folgendes angeben, andernfalls wird er weder ausgeführt noch erstellt.

home := templ.Component(views.Home())

home ist eine Instanz der Home-Funktion von home.templ.

http.Handle("/", templ.Handler(home))

Alles, was wir hier tun, ist die Übergabe an templs Handler(), der das Gleiche tut wie http.Handler(), nur etwas spezifischer. Hier ist die Quelle für templ.Handler():

type Handler struct {
    h slog.Handler
    m *sync.Mutex
    w io.Writer
}

Dieser Handler wird dem Root-Verzeichnismuster zugewiesen und dann von ServeMux, dem http-Multiplexer, verwendet. Eine schicke Art auszudrücken, dass es alle Pfade für eine bestimmte Top-Level-Domain verwaltet.

http.Handle("/static", http.StripPrefix("/static", http.FileServer(http.Dir("./static"))))

Das ist lang, kann aber leicht verdaut werden. http.Handle(pattern string, handler Handler) haben wir oben besprochen. Das Muster ist in diesem Fall das statische Verzeichnis. Der Handler besteht aus Funktionen höherer Ordnung. Das bedeutet einfach, dass auch Funktionen als Daten behandelt werden und Variablen zugewiesen und/oder als Parameter übergeben werden können.

In diesem Fall übergeben wir http.Dir("./static"). http.Dir(dir string) wird zum Implementieren eines nativen Dateisystems verwendet (öffnet das Verzeichnis) und ist auf $pwd/$cwd beschränkt. Deshalb überspringen wir „.“. Wir fangen bei der Wurzel an. Dies wird an den Handler http.FileServer(root FileSystem) übergeben, der den benötigten Handler zurückgibt. Dann übergeben wir das an http.StripPrefix(pattern string, fs FileSystem), das genau das tut, wonach es sich anhört: den Verzeichnisnamen aus dem Pfad entfernt. Der eigentliche Vorteil, wenn man darüber nachdenkt, was es tut, ist, dass /static jetzt / ist, was root ist. Wo gilt also das CSS? Auf der Startseite.

Das war doch nicht so schlimm, oder?

log.Fatal(http.ListenAndServe(port, nil))

http.ListenAndServe(addr string, handler Handler) error ist der letzte Teil. Diese Funktion gibt auch Fehlerwerte ungleich Null zurück, daher wird eine Fehlerbehandlung DRINGEND empfohlen. log.Fatal(v ...any) nimmt jeden Typ an und ist „äquivalent zum Aufruf von Print() auf os.Exit(1)“Quelle. Das heißt, wenn das Programm mit einem anderen Wert als 0 beendet wird (z. B. Absturz), wird das Ereignis protokolliert.

Irgendwann werde ich mir den Fehler http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) ansehen. Im Moment wird TLS von meinem Host bereitgestellt (nicht selbst gehostet).

Und damit ist main.go vorerst fertig.

Tempelvorlagen

Unsere erste Vorlage wird ./internal/views/layout.templ sein. Diese Datei verwaltet die Art und Weise, wie die Seite angezeigt wird. Wenn Sie von React oder Nextjs kommen, ist es Ihre page.tsx-Datei.

// File: /root/internal/views/layout.templ
package views

templ Layout( title string ){
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <link rel="icon" type="image/x-icon" href="/static/favicon.ico"/>
            <link rel="stylesheet" type="text/css" href="/static/styles.css"/>
            <title>{title}</title>
        </head>
        <body>
            {children ...}
        </body>
    </html>
}

Ganz unkompliziert.

Die nächste Vorlage ist home.templ. Dies enthält den Inhalt von /.

// File: /root/internal/views/home.templ
package views

templ Home(){
    @Layout("Home")
}

Durch die Übergabe von „Home“ an @Layout(Titelzeichenfolge) wird der Seitentitel, wie Sie es erraten haben, auf „Home“ gesetzt.

Ich schließe es ab

Okay, wie ich am Anfang sagte, dieses Mal ist es viel. Noch zwei (2) Dinge und wir sind mit der Implementierung und dem Testen der Vorlage fertig.

# 1 - make sure `go.sum` is up-to-date
go mod tidy
# 2 - have templ generate go files
templ generate
# 3a - build it out
go build ./cmd/server/main.go
./main
# 3b - or test it out
go run ./cmd/server/main.go
# you can shorten the path to
go run ./cmd/server/.

Sie sollten Ihre go/templ-Webseite in ihrer ganzen Pracht sehen; Auch wenn es Ihnen auf der Netzhaut brennt, weil Sie vergessen haben, die Hintergrundfarbe in Ihrem CSS zu ändern.

Nachtrag

Sie können Inhalte templ.Component als Parameter übergeben, wenn Sie jsx-Tags als Templ-Vorlagen verwenden möchten. Ebenso stellt templ auch CSS-Komponenten für benutzerdefinierte Vorlagen bereit.

Errata

Wenn Sie einen Fehler entdecken, Probleme haben oder ich etwas verpasst habe, hinterlassen Sie bitte einen Kommentar. Ich werde mein Bestes tun, um zu aktualisieren und/oder zu helfen.

Als nächstes

Da sich unsere Websites ändern werden (Inhalte hinzufügen), werden wir die Schritte zum Einrichten eines von GitHub gehosteten Runners durchgehen, der die Dateien erstellt und festschreibt, damit wir sie bereitstellen können.

Ich werde in Zukunft ein Git-Repo für dieses Projekt hinzufügen. Es enthält alle Dateien, die wir schreiben, und eine .github/go.yml-Datei für GitHub-Aktionen.

Das obige ist der detaillierte Inhalt vonIntegrieren von Templ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!