テンプルの統合
- 王林オリジナル
- 2024-09-12 10:20:54563ブラウズ
現在 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で背景色を変更するのを忘れて網膜が焼けてしまったとしても。
補遺
jsx タグを templ テンプレートとして使用することを選択した場合は、コンテンツ templ.Component をパラメーターとして渡すことができます。同様に、templ はカスタム テンプレート用の CSS コンポーネントも提供します。
正誤表
エラーを見つけた場合、問題が発生している場合、または何かを見逃した場合は、お気軽にコメントを残してください。更新したりサポートしたりできるよう最善を尽くします。
次へ
Web サイトが変更される (コンテンツが追加される) ため、ファイルの構築とコミットを処理してデプロイできるように GitHub-Hosted Runner をセットアップする手順を実行します。
将来的には、このプロジェクトの git リポジトリを追加する予定です。これには、私たちが作成しているすべてのファイルと、GitHub Actions 用の .github/go.yml ファイルが含まれます。
以上がテンプルの統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。