使用 HandleFunc 提供通过模板链接的 CSS 文件
Using HandleFunc to serve CSS file linked through template
我最近没有看到这方面的问题,我很困惑。截至目前,我正在使用 HandleFunc 和模板将文件提供给 google 云。我是一名应届毕业生,并没有大量使用 Golang,但我想在使用过程中熟悉它。使用其他指南、问题和视频,我已成功将我的 html 文件提供给服务器,并且能够显示 header。我正在使用存储在我的模板目录中的 header.html 模板,该模板链接到我的 css 目录中的 main.css。然后,我在 html 文件上使用 header 模板,我目前将其用作主文件。我无法获得 css 或我想要使用的图像。我的猜测是我需要在 main.go 文件中写更多内容。我尝试使用 Handle、Handler 和 HandleFunc 以多种方式处理它,我承认我对这些函数的工作原理和不同之处仍然有些粗略的理解,但我不明白是什么导致了我的问题。
文件结构:
├── app.yaml
├── main.go
└── static
├── css
│ └── main.css
├── emailList.html
├── img
│ ├── TheBuzzTraders.png
│ ├── favicon.ico
│ └── tbtWordLogo.png
├── js
└── templates
└── header.html
main.go:
package main
import (
"fmt"
"html/template"
"net/http"
"os"
"path/filepath"
"strings"
)
func emailListHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "emailList", &Page{Title: "Welcome to my site"})
}
func main() {
http.HandleFunc("/", emailListHandler)
fmt.Println(http.ListenAndServe(":8080", nil))
}
var tpl = func() *template.Template {
t := template.New("")
err := filepath.Walk("./", func(path string, info os.FileInfo, err error) error {
if strings.Contains(path, ".html") {
fmt.Println(path)
_, err = t.ParseFiles(path)
if err != nil {
fmt.Println(err)
}
}
return err
})
if err != nil {
panic(err)
}
return t
}()
type Page struct {
Title string
}
emailList.html:
{{define "emailList"}}
<!DOCTYPE html>
<html lang="en">
{{template "header" .}}
<body>
<h1>Invest in your tomorrow</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
{{end}}
header.html:
{{define "header"}}
<head>
<!-- Bootstrap and CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<meta charset="UTF-8">
<title>The Buzz Traders</title>
</head>
{{end}}
抱歉所有代码,但我真的很难过。如何让我的 css 和图像文件与 emailList.html 一起使用?提前致谢!!
与@Mayank 解决方案类似,答案是:
http.HandleFunc("/", emailListHandler)
fs := http.FileServer(http.Dir("static"))
http.Handle("/css/", fs)
http.Handle("/img/", fs)
http.Handle("/templates/", fs)
fmt.Println(http.ListenAndServe(":8080", nil))
}```
要提供静态文件,您应该FileServer
http 包的方法。尝试将主要功能代码更改为
func main() {
http.HandleFunc("/", emailListHandler)
fs := http.FileServer(http.Dir("./static"))
http.Handle("/", fs)
fmt.Println(http.ListenAndServe(":8080", nil))
}
我最近没有看到这方面的问题,我很困惑。截至目前,我正在使用 HandleFunc 和模板将文件提供给 google 云。我是一名应届毕业生,并没有大量使用 Golang,但我想在使用过程中熟悉它。使用其他指南、问题和视频,我已成功将我的 html 文件提供给服务器,并且能够显示 header。我正在使用存储在我的模板目录中的 header.html 模板,该模板链接到我的 css 目录中的 main.css。然后,我在 html 文件上使用 header 模板,我目前将其用作主文件。我无法获得 css 或我想要使用的图像。我的猜测是我需要在 main.go 文件中写更多内容。我尝试使用 Handle、Handler 和 HandleFunc 以多种方式处理它,我承认我对这些函数的工作原理和不同之处仍然有些粗略的理解,但我不明白是什么导致了我的问题。
文件结构:
├── app.yaml
├── main.go
└── static
├── css
│ └── main.css
├── emailList.html
├── img
│ ├── TheBuzzTraders.png
│ ├── favicon.ico
│ └── tbtWordLogo.png
├── js
└── templates
└── header.html
main.go:
package main
import (
"fmt"
"html/template"
"net/http"
"os"
"path/filepath"
"strings"
)
func emailListHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "emailList", &Page{Title: "Welcome to my site"})
}
func main() {
http.HandleFunc("/", emailListHandler)
fmt.Println(http.ListenAndServe(":8080", nil))
}
var tpl = func() *template.Template {
t := template.New("")
err := filepath.Walk("./", func(path string, info os.FileInfo, err error) error {
if strings.Contains(path, ".html") {
fmt.Println(path)
_, err = t.ParseFiles(path)
if err != nil {
fmt.Println(err)
}
}
return err
})
if err != nil {
panic(err)
}
return t
}()
type Page struct {
Title string
}
emailList.html:
{{define "emailList"}}
<!DOCTYPE html>
<html lang="en">
{{template "header" .}}
<body>
<h1>Invest in your tomorrow</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
{{end}}
header.html:
{{define "header"}}
<head>
<!-- Bootstrap and CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<meta charset="UTF-8">
<title>The Buzz Traders</title>
</head>
{{end}}
抱歉所有代码,但我真的很难过。如何让我的 css 和图像文件与 emailList.html 一起使用?提前致谢!!
与@Mayank 解决方案类似,答案是:
http.HandleFunc("/", emailListHandler)
fs := http.FileServer(http.Dir("static"))
http.Handle("/css/", fs)
http.Handle("/img/", fs)
http.Handle("/templates/", fs)
fmt.Println(http.ListenAndServe(":8080", nil))
}```
要提供静态文件,您应该FileServer
http 包的方法。尝试将主要功能代码更改为
func main() {
http.HandleFunc("/", emailListHandler)
fs := http.FileServer(http.Dir("./static"))
http.Handle("/", fs)
fmt.Println(http.ListenAndServe(":8080", nil))
}