テンプレート使用 / Go言語のWebフレームワーク「Echo」を使ってみる ①(Hello World的な) / static。CSS反映

カテゴリー: 学習  閲覧数:317 配信日:2017-12-26 04:45


ディレクトリ構成


▼\home\★★\go\src\try-using-echo\chapter-1\main.go
┏main.go
┣public/
┃ ┗css/
┃  ┗style.css
┗templates/
  ┣hello.html
  ┗layout.html

コード


▼main.go
//中略

//静的ファイルのパスを設定
e.Static("/public/css", "public/css")
e.Static("/public/js", "public/js")
e.Static("/public/img", "public/img")


▼templates/layout.html
<html>
 <head>
   <title>Echo HTML Server Sample</title>
   <link href="public/css/style.css" rel="stylesheet">
 </head>
 <body>
   <!-- Render the current template here -->
   {{template "content" .}}
 </body>


▼public\css\style.css
a {
 text-decoration: none
}
html,body,ul{
 margin: 0;
 padding: 0;
}
ul {
 list-style: none
}
fieldset {
 border: 0;
}
input[type="text"]{
 box-sizing: border-box;
 width: 100%;
 padding: 0.5rem;
}
textarea {
 box-sizing: border-box;
 width: 100%;
}
body{
 background-color:yellow;
}


ブラウザ表示


$ cd /home/★★/go/src/try-using-echo/chapter-1
$ go run main.go

  ____    __
 / __/___/ /  ___
/ _// __/ _ \/ _ \
/___/\__/_//_/\___/ v3.2.5
High performance, minimalist Go web framework
https://echo.labstack.com
____________________________________O/_______
                                   O\
⇨ http server started on [::]:☆☆


ブラウザで「http://グローバルIPアドレス:☆☆」へアクセス
・GET /
・「CSSを読み込んだテンプレート」を使用して生成したHTMLを返す
Hello World!

ブラウザで「http://グローバルIPアドレス:☆☆/public/css/style.css」へアクセス
・GET /public/css/style.css
・静的ファイルを返す


Go言語のWebフレームワーク「Echo」を使ってみる ①(Hello World的な)