"Go Web Development Revel+mgo" The 2nd Chapter Blog's homepage and the submission design

This is a creation in Article, where the information may have evolved or changed.

Demo Address http://gblog-revel.herokuapp.com/

1. Home

Well, I built our project with Revel New Gblog.
Before the design (why always design, no results no motivation AH), we first to do something. Will public/css/bootstrap.css deleted replaced by BOOTSTRAP3 (because it gives us 2, I like to use 3, can not say like, but is using 3, you can continue to use 2 Oh! Maybe the style is a little different. ), create a new our style in public/css/: style.css, add content:

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-back Face-visibility:hidden;background-color:white;border-color:white;border-width:2px;color: #BBB6B6;}

Well one of the background pictures, too small, upload up also see not clear, we find one yourself or do not. About CSS This kind of thing, do not write, we copy, this kind of thing, can only say you like to do seriously, do not like, casually high.
OK, open the app/views/header.html and add it in:

<link rel= "stylesheet" type= "Text/css" href= "/public/css/styles.css" >

Wait a minute, let's take a look at what's inside header.html:

<! DOCTYPE html>

{. Title}} This is a variable we will see later, CSS and JS introduced to no difference, but the icon this good, actually support PNG format. {{range. Morestyles}} and {{range. Morescripts}} These two are loops, that is, if we need different CSS files or JS files for different pages, we can use them on that page.
{{Append. "Morescripts" "js/jquery-ui-1.7.2.custom.min.js"} This usually loads what we need. Since we have fewer things at the moment, these two loops can be removed.



Then add the following code after the body of header.html:




<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& gt;                <span class= "Navbar-news" title= "1 updates in the last 1 hours" >1</span >              </li>              &LT;LI CL Ass= "{{. Write}}" >                <a href= "/write" title= "Put Up Your Blogs" & GT, contributions </a>              </li>            &NBSP ; <li class= "{{. Mess}}" >                <a href= "/message" title= "message B Oards "> Message </a>&nbSp             </li>            <li   class= "{. His Tory}} ">                <a href="/history "title=" History Blogs "> Archive </ a>              </li>              <li C Lass= ' {. about} ' >                <a href= "/about" title= "About Me" >abou  T me</a>              </li>            <li class= "{. EMA}}" >                <a href= "/email" title= "the emails Of the blog ' s author ' >Email</a>              </li>      & nbsp       <li>                <a href= "#" title= "" >rss</ a>  &nbsP           </li>          </ul>        &L t;/div>    </div>

Finally, do not forget to join </div&gt in footer.html; OK, let's see the effect:





Well, it looks good, though it's a bit lame.


OK, we open views/app/index.html (say, the case is very important, it is based on the name of your method to load the page under the view), the contents of all the replacement:


{{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 HRE f= "#" 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> how to say, a little bit confused, whether it is id</code></pre> &LT;/DIV&G    T </div></div>{{template "footer.html".}} 

Well, you see, set. Title This thing is very useful to put, template also do not need me to say anything more. Refresh again to see the effect:



Yes, it's not even worse. Okay, take it. The first page to complete the design, the following we do the submission of the design, no submissions which have data ah, is not it?


2. Contributions
Create a new wblog.html under view/app/, with the following content:


{{set.} "title" "Submission-Gblog"}}{{set. "Write" "Active"}}{{template "header.html".}} <div class= "Content" > <div class= "Write-nav" > <form action= "/putblog" method= "POST" > & Lt;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" > <labe L 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" > <labe L 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".}}

In this, I first put the back of the things to be dropped out, do not care, the latter will talk about.

So how to see the effect, first in the App/controllers/app.go to add a method:


Func (c App) Wblog () Revel. Result {return C.render ()}

To see this method, his receiver is the app, which is the struct on the file, it is revel. Controller object, this we don't have to control it, and C. Render (), quite with forward jump. Add a route control inside the Conf/routes:


GET     /write                                  app.wblog

Of course we can also be accessed directly through Http://localhost:9000/App/WBlog, but I don't like the capitalization name (in go you need to always be aware of capitalization, because uppercase equals public is accessible externally), Explain why you can access it in this way and see the conf/routes inside:


*       /:controller/:action                    : controller.:action

It has been configured for us.

OK, we brush the page, point to contribute to see the effect:





With these two basic things we can come to realize it.

The content is more, we do in the next chapter to achieve.