Templ 통합

지금은 3개의 파일이 필요하므로 시간이 더 길어질 것입니다. 또한 favicon.ico, CSS 파일(CSS를 사용하도록 선택한 경우), 로고 또는 기타 정적 파일과 같은 파일을 위한 정적 디렉터리가 필요합니다.

net/http 문서. 이들은 당신의 가장 친한 친구입니다.

시작해볼까요?

설치 및 설정

다행히 Go가 설정된 방식은 간단한 과정입니다.
github.com/a-h/templ/cmd/templ@latest를 설치하세요
위의 명령은 templ 바이너리를 가져옵니다(PATH를 설정했지요?).
github.com/a-h/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"

포트는 뭐, 포트입니다(포트가 무엇인지 아시리라 생각합니다). 포트를 http.ListenAndServe(addr string, handler Handler)에 전달할 때 :을 포함해야 합니다. 그렇지 않으면 실행되거나 빌드되지 않습니다.

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

home은 home.templ의 Home 기능 인스턴스입니다.

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

여기서 우리가 하는 일은 http.Handler()와 동일한 작업을 수행하는 templ의 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 문자열)은 기본 FileSystem(dir 열기)을 구현하는 데 사용되며 $pwd/$cwd로 제한됩니다. 이것이 바로 "."을 전달하는 이유입니다. 우리는 뿌리부터 시작합니다. 이는 필요한 핸들러를 반환하는 http.FileServer(root FileSystem) 핸들러로 전달됩니다. 그런 다음 이를 http.StripPrefix(pattern string, fs FileSystem)로 전달합니다. 이는 정확히 들리는 대로 경로에서 디렉터리 이름을 제거합니다. /static이 수행하는 작업에 대해 생각해 보면 실제 이점은 이제 루트인 /입니다. 그렇다면 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 ){
    
    
        
            <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
            <link rel="stylesheet" type="text/css" href="/static/styles.css">
            <title>{title}</title>
        
        
            {children ...}
        
    
}

정말 간단합니다.

다음 템플릿은 home.templ입니다. 여기에는 /의 내용이 포함됩니다.

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

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

@Layout(제목 문자열)에 "Home"을 전달하면 페이지 제목이 Home으로 설정됩니다.

마무리

그래요, 처음에 말씀드린 것처럼 이번에는 많이 나오네요. 두 가지를 더 수행하면 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 웹페이지의 멋진 모습을 볼 수 있습니다. CSS에서 배경색을 변경하는 것을 잊었기 때문에 망막이 타는 경우에도 마찬가지입니다.

부록

jsx 태그를 템플릿 템플릿으로 사용하도록 선택한 경우 콘텐츠 templ.Component를 매개변수로 전달할 수 있습니다. 마찬가지로 templ은 사용자 정의 템플릿을 위한 CSS 구성 요소도 제공합니다.

정오표

오류를 발견했거나, 문제가 있거나, 놓친 부분이 있으면 언제든지 댓글을 남겨주세요. 최선을 다해 업데이트 및/또는 도움을 드리겠습니다.

다음

웹 사이트가 변경(콘텐츠 추가)될 예정이므로 배포할 수 있도록 파일 빌드 및 커밋을 처리하기 위해 GitHub 호스팅 Runner를 설정하는 단계를 진행하겠습니다.

향후 이 프로젝트에 git repo를 추가할 예정입니다. 여기에는 우리가 작성 중인 모든 파일과 GitHub Actions용 ​​.github/go.yml 파일이 포함됩니다.

위 내용은 Templ 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!