テンプルの統合-Golang-php.cn

テンプルの統合

王林

リリース： 2024-09-12 10:20:54

オリジナル

561 人が閲覧しました

現在 3 つのファイルが必要なので、これは長くなります。また、favicon.ico、CSS ファイル (CSS の使用を選択した場合)、ロゴ、その他の静的ファイルなどのファイル用の静的ディレクトリも必要です。

net/http ドキュメント。彼らはあなたの親友です。

始めましょう?

インストールとセットアップ

ありがたいことに、Go のセットアップ方法では、これは簡単なプロセスです。
github.com/a-h/templ/cmd/templ@latest
をインストールしてください上記のコマンドは、templ バイナリを取得します (PATH は設定しましたよね?)。
github.com/a-h/templ
を取得してくださいこれにより、templ が go.mod にロードされます。

それだけです。インストールと設定が完了しました。

そして闘争

このプロセスで最も困難な部分は、styles.css を適切にロードすることでした。 CSS ファイルを使用していない場合は、静的ディレクトリに関する行をスキップできます。

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

ログイン後にコピー

実際よりも複雑に見えます。これを一度に一歩ずつ見てみましょう。

port := ":3000"

ログイン後にコピー

port は、まあ、ポートです (ポートが何であるかはご存知だと思います)。ポートを http.ListenAndServe(addr string, handler Handler) に渡すときは、必ず : を含めてください。そうしないと、実行またはビルドが行われません。

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

ログイン後にコピー

home は、home.templ の Home 関数のインスタンスです。

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

ログイン後にコピー

ここで行っているのは、templ の Handler() にホームを渡すことだけです。これは http.Handler() が行うことと同じことを行いますが、少しだけ具体的です。 templ.Handler() のソースは次のとおりです:

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

ログイン後にコピー

このハンドラーはルートディレクトリパターンに割り当てられ、http マルチプレクサーである ServeMux によって使用されます。指定されたトップレベルドメインのすべてのパスを処理すると言う派手な言い方です。

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

ログイン後にコピー

これは長いものですが、簡単に理解できます。 http.Handle(pattern string, handler Handler) については、上で説明しました。この場合のパターンは静的ディレクトリです。ハンドラーは高階関数で構成されます。これは単に、関数がデータとしても扱われ、変数に割り当てたり、パラメーターとして渡したりできることを意味します。

この場合、http.Dir("./static") を渡します。 http.Dir(dir string) は、ネイティブファイルシステムを実装する (ディレクトリを開く) ために使用され、$pwd/$cwd に限定されます。そのため、「.」を渡します。根本から始めます。これは、必要なハンドラーを返す http.FileServer(root FileSystem) ハンドラーに渡されます。次に、それを http.StripPrefix(pattern string, fs FileSystem) に渡します。これはまさにその名の通り、パスからディレクトリ名を削除します。実際の利点は、/static が何を行っているかを考えると、/ になり、これが root になることです。では、CSS はどこに適用されるのでしょうか?ホームページにあります。

それほど悪くはありませんでしたね?

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

ログイン後にコピー

http.ListenAndServe(addr string, handler Handler) エラーは最後の部分です。この関数は非 nil エラー値も返すため、エラー処理を強くお勧めします。 log.Fatal(v ...any) は任意の型を取り、「os.Exit(1) で Print() を呼び出すのと同じ」ソースです。つまり、プログラムが 0 以外の値で終了した場合 (つまり、クラッシュ)、イベントがログに記録されます。

ある時点で、http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) エラーを調査するつもりです。現在、TLS は私のホストによって提供されています (自己ホスト型ではありません)。

これで、main.go はひとまず完成です。

テンプレートテンプレート

最初のテンプレートは、./internal/views/layout.templ になります。このファイルはページの表示方法を処理します。 React または Nextjs から来ている場合、それは 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>
}

ログイン後にコピー

本当に簡単です。

次のテンプレートは home.templ です。これには /.
の内容が含まれます。

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

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

ログイン後にコピー

「Home」を @Layout(title string) に渡すと、ページのタイトルがご想像のとおり、Home に設定されます。

それをまとめる

さて、最初に言ったように、今回は量が多いです。あと 2 つ作業を行うと、templ の実装とテストが完了します。

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

ログイン後にコピー

go/templ Web ページが完全に表示されるはずです。たとえCSSで背景色を変更するのを忘れて網膜が焼けてしまったとしても。