Golang 创建主布局网页

Question

我是 Golang 的新手，正在尝试使用 Go 启动 Web 服务器。我已经为基本布局编写了 html、css 和 js，但是在启动服务器后无法显示网站。

使用此页面作为指南链接。仅使用我自己编写的 html、CSS 和 JS 文件作为视觉布局。

发生的情况是页眉、页脚等组合得很好，但它在浏览器中显示为文本，带有标签和所有内容。我不确定为什么它没有正确显示。我不确定是否可能是因为我没有使用 templates.HTML 呈现为 html，但我找不到关于此的太多信息。谢谢大家！代码如下：Github链接

 package main

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "os"
    "path/filepath"
    "strings"
)

type Page struct {
    Title string
}

//-------------------------------------------------------------------------------------//
//Compile templates on start
var templ = 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
}()

//---------------------------------------Page Handlers----------------------------------//
//Handler for homepage
func homepageHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Home")
    err := templ.ExecuteTemplate(w, "index", &Page{Title: "Welcome to TL;DR"})
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

//Handler for about page
func aboutHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("About")
    err := templ.ExecuteTemplate(w, "about", &Page{Title: "About TL;DR"})
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

//Handler for test Page
func testHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == "GET" {
        fmt.Println("Test")
        testT, _ := template.ParseFiles("static/test.html")
        testT.Execute(w, nil)
    }
}

func main() {
    //--------------------------------------Routers-------------------------------------//
    http.HandleFunc("/", homepageHandler)
    http.HandleFunc("/about", aboutHandler)
    http.HandleFunc("/test", testHandler)

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

    //log to file
    f, err := os.OpenFile("serverlog.log", os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0644)
    if err != nil {
        log.Fatalf("Error opening file: %v", err)
    }
    defer f.Close()
    logger := log.New(f, "Logged : ", log.LstdFlags)
    log.SetOutput(f)

    //start server
    logger.Println("Starting server on port 9090")
    logger.Fatal(http.ListenAndServe(":9090", nil))

}

编辑：更新 20181214

文件目录

代码更新后的网页快照

我的 html 代码与网站的格式基本相同，但我确实有一些 javascript 和本地 css 文件，它们是我的 html 的一部分（仅用于简单转换，没有 jquery）。这会影响解析吗？去版本go version go1.10.1 windows/amd64

已解决：更新 20181215

感谢@AR 指出我的 html 标题有额外字符的问题！

Answer 1

试试这个（对我有用）：

package main

import (
    "fmt"
    "html/template"
    "net/http"
    "os"
    "path/filepath"
    "strings"
)

func homepageHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Home")
    templ.ExecuteTemplate(w, "main", &Page{Title: "Welcome to TL;DR"})
}
func aboutHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("About")
    templ.ExecuteTemplate(w, "about", &Page{Title: "About TL;DR"})
}
func main() {
    http.HandleFunc("/", homepageHandler)
    http.HandleFunc("/about", aboutHandler)
    fmt.Println("Server started on port 8080")
    fmt.Println(http.ListenAndServe(":8080", nil))
}

var templ = 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
}

main.html 文件内容：

{{define "main"}}
{{template "header" .}}
<div class="content">
    <h2>Main</h2>
    <div>This is the Main page</div>
</div>
{{template "footer" .}}
{{end}}

about.html 文件内容：

{{define "about"}}
{{template "header" .}}
<div class="content">
    <h2>About</h2>
    <div>This is the About page</div>
</div>
{{template "footer" .}}
{{end}}

footer.html 文件内容：

{{define "footer"}}
<p class="navbar-text navbar-fixed-bottom">Go Rocks!</p>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>

</html>
{{end}}

header.html 文件内容：

{{define "header"}}
<!DOCTYPE html>
<html>

<head>
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
    <style type="text/css">
        body {
            padding-bottom: 70px;
        }

        .content {
            margin: 10px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Go App</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Main</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </div>
    </nav>
    {{end}}

注：
而看到此为模板。

编辑：在static/template/header.html第 2 行的文件中删除</ 之前的额外内容<!DOCTYPE html>（在此图像中的红色圆圈内）：