Skip to content

Latest commit

 

History

History
79 lines (50 loc) · 3.56 KB

14.1.md

File metadata and controls

79 lines (50 loc) · 3.56 KB

14.1 Static files

As we have already talked about how to deal with static files, this section we detail how to set up and use in beego static files inside. By then introduce a twitter open source html, css framework bootstrap, without a lot of design work we can let you quickly create a beautiful site.

Beego static files and settings to achieve

Go's net/ http package provides a static file serving, ServeFile and FileServer other functions. beego static file processing is handled based on this layer, the specific implementation is as follows:

//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 is stored inside the corresponding URL corresponds to a static file directory, so handle URL requests when the request need only determine whether the address corresponding to the beginning of the process contains static URL, if included on the use http.ServeFile provide services.

Examples are as follows:

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

Example. Then the request url http://www.beego.me/asset/bootstrap.css will request /static/bootstrap.css for 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