Gin-golang:使用样式表加载html文件

时间:2016-03-26 15:24:28

标签: html css go

我的英语很基础,对不起:)

好吧,我的问题是,当Gin加载HTML时,我的HTML文件包含import(/stylesheet/index.css),因此当使用Gin运行我的应用程序时,此警报不会加载样式表文件

workspace/
          main/
               main.go
          templates/
                   index.tmpl.html
                   css/
                       index.css

main.go

r.LoadHTMLFiles("../templates/index.tmpl.html")

r.GET("/index", func(c *gin.Context) {
    c.HTML(200, "index.tmpl.html", gin.H{
        "title": "Main website", //IGNORE THIS
    })
})

index.tmpl.html

<!DOCTYPE html>
<head>
  <title>Hola titulo</title>
  <style type="text/css" media="screen">
    <!-- 
        @import url("/css/index.css");
    -->
  </style>
</head>

<body>

  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    London<br>
    Paris<br>
    Tokyo
  </nav>

  <section>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
  </section>

  <footer>
    Copyright © W3Schools.com
  </footer>

</body>

</html>

index.css

header {
   background-color:black;
   color:white;
   text-align:center;
   padding:5px; 
}
nav {
   line-height:30px;
   background-color:#eeeeee;
   height:300px;
   width:100px;
   float:left;
   padding:5px; 
}
section {
   width:350px;
   float:left;
   padding:10px; 
}
footer {
   background-color:black;
   color:white;
   clear:both;
   text-align:center;
   padding:5px; 
}

所以,我正在运行我的应用程序,这给了我在Gin模式调试中的错误404。

[GIN] 2016/03/26 - 12:10:50 | 200 |     688.938µs | 127.0.0.1 |   GET     /index
[GIN] 2016/03/26 - 12:10:50 | 404 |       2.865µs | 127.0.0.1 |   GET     /css/index.css

另一方面,当我只加载html文件时,这会显示样式表没有问题。 :(

我不知道如何使用Gin加载样式表。

请帮助。

PS:我需要使用Gin

2 个答案:

答案 0 :(得分:6)

您需要main.go中的静态文件处理程序。使用Static

r.Static("/css", "../templates/css")

答案 1 :(得分:-1)

在index.tmpl.html文件中尝试替换以下内容:

<style type="text/css" media="screen">
    <!-- 
        @import url("/css/index.css");
    -->
</style>

到这一个:

<style type="text/css" media="screen">
    <!-- 
        @import url("css/index.css");
    -->
</style>