build-web-application-with-golang/en/14.1.md

14.1 Static files

We've already talked about how to deal with static files in previous sections. Now, let's look at how to set up and use static files inside of Beego. Then, through introducing Twitter's open source HTML and CSS framework Bootstrap, we'll be able quickly create beautiful looking websites without having to do much design work.o

Beego static files and settings

Go's net/http package provides a static file server with functions such as ServeFile and FileServer. Beego's static file handling is based on this layer, and its specific implementation is as follow:

//static file server
for prefix, staticDir := range StaticDir {
	if strings.HasPrefix(r.URL.Path, prefix) {
		file := staticDir + r.URL.Path[len(prefix):]
		http.ServeFile(w, r, file)
		w.started = true
		return
	}
}

StaticDir stores the URL which corresponds to a static file directory, so when handling requests, we simply need to determine whether or not the URL begins with a static file path. If so, we can simply respond using http.ServeFile.

The following is an example:

beego.StaticDir["/asset"] = "/static"

Then, a request with a URL such as http://www.beego.me/asset/bootstrap.css will result in /static/bootstrap.css being served to the client.

Bootstrap integration

Bootstrap is Twitter launched an open source toolkit for front-end development. For developers, Bootstrap is the rapid development of the best front-end Web application toolkit. It is a collection of CSS and HTML, it uses the latest HTML5 standard, to your Web development offers stylish typography, forms, buttons, tables, grids, systems, etc.

• Components Bootstrap contains a wealth of Web components, according to these components, you can quickly build a beautiful, fully functional website. Which includes the following components: Pull-down menus, buttons, groups, buttons drop-down menus, navigation, navigation bar, bread crumbs, pagination, layout, thumbnails, warning dialog, progress bars, and other media objects
• JavaScript plugin Bootstrap comes with 13 jQuery plug-ins for the Bootstrap a component gives"life." Including: Modal dialog, tab, scroll bars, pop-up box and so on.
• Customize your own framework code Bootstrap in can modify all CSS variables, according to their own needs clipping code.

Figure 14.1 bootstrap site

Next, we use the bootstrap into beego frame inside, quickly create a beautiful site.

1. First to download the bootstrap directory into our project directory, named as static, as shown in the screenshot.

   

   Figure 14.2 Project static file directory structure

2. Because beego default values ​​set StaticDir, so if your static files directory is static, then you need not go any further:

   StaticDir["/static"] = "static"

3. templates use the following address on it:

    // css file
    <link href="/static/css/bootstrap.css" rel="stylesheet">
   
    // js file
    <script src="/static/js/bootstrap-transition.js"></script>
   
    // Picture files
    <img src="/static/img/logo.png">
   

The above can be achieved to bootstrap into beego in the past, as demonstrated in Figure is the integration of the show came after renderings:

Figure 14.3 Construction site interface based bootstrap

These templates and formats bootstrap official has to offer will not be repeated here paste code, we can bootstrap on the official website to learn how to write templates.

Links

• Directory
• Previous section: Develop web framework
• Next section: Session