Mengintegrasikan Templ

Ini akan menjadi lebih panjang kerana kami memerlukan tiga (3) fail sekarang. Selain itu, kami memerlukan direktori statik untuk fail seperti favicon.ico, fail css (jika anda memilih untuk menggunakan css), logo atau mana-mana fail statik lain.

dokumen bersih/http. Ini adalah kawan baik anda.

Mari kita mulakan, boleh?

Pasang dan Sediakan

Syukurlah, cara Go disediakan, ini adalah proses lurus ke hadapan.
pergi pasang github.com/a-h/templ/cmd/templ@latest
Perintah di atas memberi anda binari templ (anda telah menetapkan PATH anda, bukan?).
pergi dapatkan github.com/a-h/templ
Yang ini memuatkan templ ke dalam go.mod anda.

Itu sahaja. Pemasangan dan persediaan telah selesai.

Dan perjuangan

Bahagian paling sukar dalam proses ini, ialah mendapatkan styles.css untuk dimuatkan dengan betul. Jika anda tidak menggunakan fail css, anda boleh melangkau baris mengenai direktori statik.

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

Ia kelihatan lebih rumit daripada yang sebenarnya. Mari lihat langkah ini pada satu masa.

port := ":3000"

port ialah pelabuhan (saya rasa anda tahu apa itu port). Apabila menghantar port ke http.ListenAndServe(rentetan tambah, Pengendali pengendali), pastikan anda memasukkan :, jika tidak, ia tidak akan dijalankan atau dibina.

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

home ialah contoh fungsi Home from home.templ.

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

Apa yang kami lakukan di sini, menghantar pulang ke templ's Handler(), yang melakukan perkara yang sama http.Handler() lakukan, hanya sedikit lebih spesifik. Berikut ialah sumber untuk templ.Handler():

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

Pengendali ini diberikan kepada corak dir akar dan kemudian digunakan oleh ServeMux, pemultipleks http. Cara mewah untuk mengatakan ia mengendalikan semua laluan untuk Domain Tahap Teratas tertentu.

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

Ini panjang tetapi mudah dihadam. http.Handle(rentetan corak, Pengendali pengendali) kami pergi ke, di atas. Corak, dalam kes ini, ialah direktori statik. Pengendali diperbuat daripada Fungsi Pesanan Tinggi. Ini bermakna fungsi juga dianggap sebagai data dan boleh diberikan kepada pembolehubah dan/atau diluluskan sebagai parameter.

Dalam kes ini, kami melepasi http.Dir("./static"). http.Dir(rentetan dir) digunakan untuk melaksanakan FileSystem asli (membuka dir), dan terhad kepada $pwd/$cwd. Itulah sebabnya kita lulus ".". Kami bermula dari akar. Ini dihantar ke http.FileServer(root FileSystem) Pengendali yang mengembalikan Pengendali yang diperlukan. Kemudian kami menghantarnya ke dalam http.StripPrefix(rentetan corak, fs FileSystem) yang melakukan apa yang sebenarnya, mengalih keluar nama direktori daripada laluan. Faedah sebenar, apabila anda berfikir tentang apa yang dilakukannya, /statik sekarang /, iaitu akar. Jadi di manakah css digunakan? Di halaman utama.

Itu tidak begitu teruk, bukan?

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

Ralat http.ListenAndServe(rentetan addr, Pengendali pengendali) ialah bahagian terakhir. Fungsi ini juga mengembalikan nilai ralat bukan nol, jadi pengendalian ralat SANGAT dinasihatkan. log.Fatal(v ...any) mengambil sebarang jenis dan "bersamaan dengan memanggil Print() pada os.Exit(1)"sumber. Bermaksud, jika program keluar dengan sebarang nilai selain 0 (iaitu ranap sistem), ia akan merekodkan acara tersebut.

Pada satu ketika, saya akan melihat ralat http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler). Buat masa ini, TLS sedang dilayan oleh hos saya (bukan dihoskan sendiri).

Dan dengan itu, main.go selesai buat masa ini.

Templat templ

Templat pertama kami, ialah ./internal/views/layout.templ. Fail ini akan mengendalikan cara halaman dipaparkan. Jika anda datang dari React atau Nextjs, ia adalah fail page.tsx anda.

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

Betul-betul lurus ke hadapan.

Templat seterusnya ialah home.templ. Ini akan mengandungi kandungan /.

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

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

Melalukan "Laman Utama" ke @Layout(rentetan tajuk) menetapkan tajuk halaman kepada, anda rasa, Laman Utama.

Membungkusnya

Baiklah, macam saya cakap awal-awal, kali ni banyak. Dua (2) perkara lagi dan kami telah selesai melaksanakan dan menguji 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/.

Anda sepatutnya melihat halaman web go/templ anda dalam semua kemuliaannya; walaupun ia membakar retina anda kerana anda terlupa menukar warna latar belakang dalam css anda.

Tambahan

Anda boleh lulus kandungan templ.Component sebagai parameter jika anda memilih untuk menggunakan teg jsx sebagai templat templ. Begitu juga, templ juga menyediakan komponen css untuk templat tersuai.

Errata

Jika anda melihat ralat, menghadapi sebarang masalah atau saya terlepas sesuatu, sila tinggalkan ulasan dan saya akan sedaya upaya untuk mengemas kini dan/atau membantu.

Seterusnya

Memandangkan tapak web kami akan berubah (menambah kandungan), kami akan melalui langkah-langkah untuk menyediakan Pelari Dihoskan GitHub untuk mengendalikan membina fail dan menetapkannya supaya kami boleh menggunakannya.

Saya akan menambah repo git untuk projek ini, pada masa hadapan. Ia akan mempunyai semua fail yang kami tulis dan fail .github/go.yml untuk Tindakan GitHub.

Atas ialah kandungan terperinci Mengintegrasikan Templ. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!