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 ){
<!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")
}
@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Golang vs. Python : 성능 및 확장 성
Apr 19, 2025 am 12:18 AM
Golang은 성능과 확장 성 측면에서 Python보다 낫습니다. 1) Golang의 컴파일 유형 특성과 효율적인 동시성 모델은 높은 동시성 시나리오에서 잘 수행합니다. 2) 해석 된 언어로서 파이썬은 천천히 실행되지만 Cython과 같은 도구를 통해 성능을 최적화 할 수 있습니다.
Golang 및 C : 동시성 대 원시 속도
Apr 21, 2025 am 12:16 AM
Golang은 동시성에서 C보다 낫고 C는 원시 속도에서 Golang보다 낫습니다. 1) Golang은 Goroutine 및 Channel을 통해 효율적인 동시성을 달성하며, 이는 많은 동시 작업을 처리하는 데 적합합니다. 2) C 컴파일러 최적화 및 표준 라이브러리를 통해 하드웨어에 가까운 고성능을 제공하며 극도의 최적화가 필요한 애플리케이션에 적합합니다.
GOT GO로 시작 : 초보자 가이드
Apr 26, 2025 am 12:21 AM
goisidealforbeginnersandsuitableforcloudandnetworkservicesduetoitssimplicity, 효율성, 및 콘크리 론 피처
Golang vs. C : 성능 및 속도 비교
Apr 21, 2025 am 12:13 AM
Golang은 빠른 개발 및 동시 시나리오에 적합하며 C는 극도의 성능 및 저수준 제어가 필요한 시나리오에 적합합니다. 1) Golang은 쓰레기 수집 및 동시성 메커니즘을 통해 성능을 향상시키고, 고전성 웹 서비스 개발에 적합합니다. 2) C는 수동 메모리 관리 및 컴파일러 최적화를 통해 궁극적 인 성능을 달성하며 임베디드 시스템 개발에 적합합니다.
Golang의 영향 : 속도, 효율성 및 단순성
Apr 14, 2025 am 12:11 AM
goimpactsdevelopmentpositively throughlyspeed, 효율성 및 단순성.
C와 Golang : 성능이 중요 할 때
Apr 13, 2025 am 12:11 AM
C는 하드웨어 리소스 및 고성능 최적화가 직접 제어되는 시나리오에 더 적합하지만 Golang은 빠른 개발 및 높은 동시성 처리가 필요한 시나리오에 더 적합합니다. 1.C의 장점은 게임 개발과 같은 고성능 요구에 적합한 하드웨어 특성 및 높은 최적화 기능에 가깝습니다. 2. Golang의 장점은 간결한 구문 및 자연 동시성 지원에 있으며, 이는 동시성 서비스 개발에 적합합니다.
Golang vs. Python : 주요 차이점과 유사성
Apr 17, 2025 am 12:15 AM
Golang과 Python은 각각 고유 한 장점이 있습니다. Golang은 고성능 및 동시 프로그래밍에 적합하지만 Python은 데이터 과학 및 웹 개발에 적합합니다. Golang은 동시성 모델과 효율적인 성능으로 유명하며 Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명합니다.
Golang 및 C : 성능 상충
Apr 17, 2025 am 12:18 AM
Golang과 C의 성능 차이는 주로 메모리 관리, 컴파일 최적화 및 런타임 효율에 반영됩니다. 1) Golang의 쓰레기 수집 메커니즘은 편리하지만 성능에 영향을 줄 수 있습니다. 2) C의 수동 메모리 관리 및 컴파일러 최적화는 재귀 컴퓨팅에서 더 효율적입니다.
