body{margin: 0 auto;padding: 0;background: url('../img/section_bg.png');font: 14px "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 20px;letter-spacing: 0.02em;color: #666;background-attachment:fixed;}a{color: #1abc9c;text-decoration: none;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;}.main-nav{margin: 0 auto;width: 692px;padding:0;}.top-bar{width:100%;background: #34495e;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;box-shadow: 0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;-webkit-box-shadow:0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;-moz-box-shadow:0 2px rgba(0,0,0,0.075),0 0 6px #7aba7b;margin-bottom:28px;}.top-bar-inner{min-height: 48px;padding:0 4px;}.ul-nav{position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;list-style: none;font-size: 18px;padding:0;}.ul-nav>li {position: relative;float: left;line-height: 20px;}.ul-nav>li>a{padding: 14px 24px 17px;text-decoration: none;display: block;color: white;text-shadow: 0 -1px 0 rgba(0,0,0,0.25);}.ul-nav>li>a:hover,.ul-nav>li>a:focus{color: #1abc9c;}.navbar-news {background-color: #e74c3c;border-radius: 30px;color: white;display: block;font-size: 12px;font-weight: 500;line-height: 18px;min-width: 8px;padding: 0 5px;position: absolute;right: -7px;text-align: center;text-shadow: none;top: 8px;z-index: 10;}.ul-nav .active > a, .ul-nav .active > a:hover, .ul-nav .active > a:focus { background-color: transparent; color: #1abc9c; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }.cell{background-color:#1bc6a5;color: #cff3ec;font-size: 15px;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;-khtml-border-radius: 4px;padding: 18px 20px 0px 20px; margin-bottom: 30px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.cell-subject{margin: 0;}.cell-subject-title{color: #34495e;font-size: 24px;font-weight: 700;text-decoration: none;}a.cell-subject-title:hover{text-decoration: underline;}.subject-infor{color:#34495e;line-height: 19px;padding: 2px 0;font-size: 13px;margin:2px 0;}.cell-text{padding: 4px 0;word-break: break-all;}.comment-num{float:right;border: 5px solid #d7dce0;border-radius: 50px;font-size: 14px;line-height: 16px;padding: 0 4px;-webkit-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;-moz-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;-o-transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;transition: background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out;-webkit-backface-visibility: hidden;background-color: white;border-color: white;border-width: 2px;color: #BBB6B6;}
<link rel="stylesheet" type="text/css" href="/public/css/styles.css">
<!DOCTYPE html><html> <head> <title>{{.title}}</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/public/css/styles.css"> <link rel="shortcut icon" type="image/png" href="/public/img/favicon.png"> <script src="/public/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> {{range .moreStyles}} <link rel="stylesheet" type="text/css" href="/public/{{.}}"> {{end}} {{range .moreScripts}} <script src="/public/{{.}}" type="text/javascript" charset="utf-8"></script> {{end}} </head> <body>
{{append . "moreScripts" "js/jquery-ui-1.7.2.custom.min.js"}}這種凡是把我們需要的東西載入進去。由於，我們目前東西比較少，這兩個迴圈可以去掉。
那麼在header.html的body之後加入下面代碼：
<div class="container main-nav"> <div class="top-bar"> <div class="top-bar-inner"> <ul class="ul-nav "> <li class="{{.home}}"> <a href="/" >Home</a> <span class="navbar-news " title="最近1小時有1個更新">1</span> </li> <li class="{{.write}}"> <a href="/write" title="Put up your blogs">投稿</a> </li> <li class="{{.mess}}"> <a href="/message" title="Message Boards">留言</a> </li> <li class="{{.history}}"> <a href="/history" title="History blogs">歸檔</a> </li> <li class="{{.about}}"> <a href="/about" title="About Me">About Me</a> </li> <li class="{{.ema}}"> <a href="/email" title="The emails of the blog's author">Email</a> </li> <li> <a href="#" title="">RSS</a> </li> </ul> </div> </div>
恩，看起來還是不錯的，雖然有點挫。
{{set . "title" "Home - GBlog" }}{{set . "home" "active" }}{{template "header.html" .}}<div class="content"> <div class="cell"> <div class="cell-subject"> <div> <a href="#" class="cell-subject-title" ><strang>Test size=45</strang></a> <a href="#" class="comment-num" title="Comments">10</a> </div> <div class="subject-infor"> <span class="label label-success">Author</span> <span>jov123@163.com</span> <span class="label label-default">Date</span> 2014-04-15 12:25 <span class="label label-info">Read</span> 0 </div> </div> <div class="cell-text"> <pre><code>怎麼說呢，稍微有點迷茫，不管是id</code></pre> </div> </div></div>{{template "footer.html" .}}
{{set . "title" "投稿 - GBlog"}}{{set . "write" "active" }}{{template "header.html" .}}<div class="content"> <div class="write-nav"> <form action="/putblog" method="post" > <div class="form-group" > <label style="font-weight: bold;">Title</label> {{with $field := field "blog.Title" .}} <input type="text" id="{{$field.Id}}" name="{{$field.Name}}" class="form-control" style="width:98%;min-height:28px;" required value="{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}"> <span class="help-inline erro">{{$field.Error}}</span> {{end}} </div> <div class="form-group" > <label style="font-weight: bold;">Author</label> {{with $field := field "blog.Email" .}} <input type="email" id="{{$field.Id}}" name="{{$field.Name}}" class="form-control" style="width:98%;min-height:28px;" placeholder="Enter your email" required value="{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}"> <span class="help-inline erro">{{$field.Error}}</span> {{end}} </div> <div class="form-group" > <label style="font-weight: bold;">Subject</label> {{with $field := field "blog.Subject" .}} <textarea class="form-control" id="{{$field.Id}}" name="{{$field.Name}}" style="width:98%;line-height: 22px;height: 350px;resize: vertical;" required >{{if $field.Flash}}{{$field.Flash}}{{else}}{{$field.Value}}{{end}}</textarea> <span class="help-inline erro">{{$field.Error}}</span> {{end}} </div> <button type="submit" class="btn btn-success">Submit</button> </form> </div></div>{{template "footer.html" .}}
func (c App) WBlog() revel.Result {return c.Render()}
GET /write App.WBlog
* /:controller/:action :controller.:action
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
