Intégration du modèle

Cela va être plus long car nous avons besoin de trois (3) fichiers maintenant. De plus, nous avons besoin d'un répertoire statique pour les fichiers comme favicon.ico, un fichier CSS (si vous choisissez d'utiliser CSS), un logo ou tout autre fichier statique.

documents net/http. Ce sont vos meilleurs amis.

Commençons, d'accord ?

Installer et configurer

Heureusement, la façon dont Go est configuré, il s'agit d'un processus simple.
allez installer github.com/a-h/templ/cmd/templ@latest
La commande ci-dessus vous obtient le binaire templ (vous avez défini votre PATH, n'est-ce pas ?).
allez chercher github.com/a-h/templ
Celui-ci charge le modèle dans votre go.mod.

C'est tout. L'installation et la configuration sont terminées.

Et la lutte

La partie la plus difficile de ce processus a été de charger correctement styles.css. Si vous n'utilisez pas de fichier CSS, vous pouvez ignorer la ligne concernant le répertoire statique.

// 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))
}

Cela a l’air plus compliqué qu’il ne l’est en réalité. Regardons cela étape par étape.

port := ":3000"

le port est, eh bien, le port (je suppose que vous savez ce qu'est un port). Lorsque vous transmettez le port à http.ListenAndServe (chaîne d'adresse, gestionnaire Handler), assurez-vous d'inclure :, sinon il ne sera pas exécuté ni construit.

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

home est une instance de la fonction Home de home.templ.

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

Tout ce que nous faisons ici, c'est passer au Handler() de templ, qui fait la même chose que http.Handler(), seulement un peu plus spécifique. Voici la source de templ.Handler() :

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

Ce gestionnaire est affecté au modèle du répertoire racine puis utilisé par ServeMux, le multiplexeur http. Une façon élégante de dire qu'il gère tous les chemins pour un domaine de premier niveau donné.

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

C'est long mais peut être facilement digéré. http.Handle (chaîne de modèle, gestionnaire Handler) que nous avons examiné ci-dessus. Le modèle, dans ce cas, est le répertoire statique. Le gestionnaire est composé de fonctions d’ordre supérieur. Cela signifie simplement que les fonctions sont également traitées comme des données et peuvent être affectées à des variables et/ou transmises en tant que paramètre.

Dans ce cas, nous transmettons http.Dir("./static"). http.Dir(dir string) est utilisé pour implémenter un système de fichiers natif (ouvre le répertoire) et est limité au $pwd/$cwd. C'est pourquoi nous passons ".". Nous partons de la racine. Ceci est transmis au gestionnaire http.FileServer (root FileSystem) qui renvoie le gestionnaire nécessaire. Ensuite, nous transmettons cela dans http.StripPrefix (pattern string, fs FileSystem) qui fait exactement ce à quoi cela ressemble, supprime le nom du répertoire du chemin. Le véritable avantage, quand on pense à ce qu'il fait, /static est maintenant /, qui est root. Alors, où s'applique le CSS ? Sur la page d'accueil.

Ce n'était pas si mal, n'est-ce pas ?

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

L'erreur http.ListenAndServe(addr string, handler Handler) est la dernière partie. Cette fonction renvoie également des valeurs d'erreur non nulles, la gestion des erreurs est donc FORTEMENT conseillée. log.Fatal(v ...any) prend n'importe quel type et est "équivalent à appeler Print() sur la source os.Exit(1)". Cela signifie que si le programme se termine avec une valeur autre que 0 (c'est-à-dire un crash), il enregistrera l'événement.

À un moment donné, je vais examiner l'erreur http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler). À l'heure actuelle, TLS est servi par mon hôte (et non auto-hébergé).

Et avec ça, main.go est terminé pour le moment.

Modèles de modèles

Notre premier modèle sera ./internal/views/layout.templ. Ce fichier gérera la façon dont la page est affichée. Si vous venez de React ou Nextjs, c'est votre fichier page.tsx.

// 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>
}

Vraiment simple.

Le modèle suivant est home.templ. Celui-ci contiendra le contenu de /.

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

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

Passer "Accueil" dans @Layout (chaîne de titre) définit le titre de la page, vous l'aurez deviné, Accueil.

L'emballer

D'accord, comme je l'ai dit au début, c'est beaucoup cette fois. Encore deux (2) choses et nous avons fini d'implémenter et de tester le modèle.

# 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/.

Vous devriez voir votre page Web go/templ dans toute sa splendeur ; même si ça vous brûle les rétines parce que vous avez oublié de changer la couleur de fond dans votre CSS.

Addenda

Vous pouvez transmettre le contenu templ.Component en tant que paramètre si vous choisissez d'utiliser les balises jsx comme modèles templ. De même, templ fournit également des composants CSS pour les modèles personnalisés.

Errata

Si vous repérez une erreur, rencontrez des problèmes ou si j'ai raté quelque chose, n'hésitez pas à laisser un commentaire et je ferai de mon mieux pour mettre à jour et/ou vous aider.

Suivant

Étant donné que nos sites Web vont changer (ajout de contenu), nous allons suivre les étapes de configuration d'un coureur hébergé sur GitHub pour gérer la création des fichiers et leur validation afin que nous puissions les déployer.

J'ajouterai un dépôt git pour ce projet, à l'avenir. Il contiendra tous les fichiers que nous écrivons et un fichier .github/go.yml pour les actions GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!