1：页面布局

一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成。因此，一个布局文件也就需要针对这些进行拆分。

2>     新建一个layout.go的控制器。编写一个引用布局文件的实例。具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package controllers
 
import (
    "github.com/astaxie/beego"
)
 
type LayoutController struct {
    beego.Controller
}
//登录页面
func (c *LayoutController) Get() {
    //布局页面
    c.Layout = "layout.html"
    //内容页面
    c.TplName = "content.html"
    //其他的部分
    c.LayoutSections = make(map[string]string)
    //页面使用的css部分
    c.LayoutSections["HtmlHead"] = "head.tpl"
    //页面使用的js部分
    c.LayoutSections["Scripts"] = "scripts.tpl"
    //页面的补充部分，可做为底部的版权部分时候
    c.LayoutSections["SideBar"] = "sidebar.tpl"
}

　　

3>     新建布局页面，具体的如下图所示

4>     在路由器中添加代码，编译运行项目，修订错误，查看运行的效果

5>     运行效果如下:

6>     Layout.html具体的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <title>布局页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> 
    {{.HtmlHead}}
</head>
<body>
 
    <div class="container">
        {{.LayoutContent}}
    </div>
    <div class="sidebar">
        {{.SideBar}}
    </div>
    {{.Scripts}}
</body>
</html>

　　

7>     这周的Beego学习笔记将不会更新了。我再想想还有那些需要记录学习点。

Beego ：布局页面的更多相关文章

  1. Beego 学习笔记15：布局页面

    页面布局 1>     一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2>     ...

  2. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  4. android 布局页面文件出错故障排除Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V

    今天在看布局文件的时候出现 android 布局页面文件出错故障排除Exception raised during rendering: java.lang.System.arraycopy([CI[ ...

  5. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  6. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  7. [译]ASP.NET Core 2.0 布局页面

    问题 如何在ASP.NET Core 2.0项目中共享可见元素.代码块和指令? 答案 新建一个空项目,首先添加GreetingService服务和UserViewModel模型: public int ...

  8. 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  9. MVC学习五：Razor布局页面 _ViewStart.cshtml

    如图: _ViewStart.cshtml就是MVC中的布局页面/模板页面. 用户访问流程图: 原理:先去执行Views文件夹下[_ViewStart.cshtml]页面,然后同级目录文件夹(上图中的 ...

随机推荐

  1. 1.3.4分析你的第一个Android程序——Android第一行代码（第二版）笔记

    切换项目结构模式 Project模式的项目结构 我们将项目切换成Project模式,这就是真实的目录结构. .gradle和.idea 这两个目下放置的都是Android Studio自动生成的一些文 ...

  2. qt creator源码全方面分析(2-10)

    目录 Creating Plugins Creating Plugins Qt Creator的核心是一个插件加载程序,加载并运行一组插件,实际上是这些插件提供了您从Qt Creator IDE中了解 ...

  3. lwip 2.0.2 snmp mib ipv6

    1.3.6.1.2.1 - SNMP MIB-2 Submitted by Harald.T.Alvestrand at uninett.no from host aun.uninett.no (12 ...

  4. nginx单个ip访问频率限制

    一.限制所有单个ip的访问频率 1.http中的配置 http { #$limit_conn_zone:限制并发连接数 limit_conn_zone $binary_remote_addr zone ...

  5. H5页面优化

    1. 页面优化 优化内容: 提升网页响应速度:减少请求,文件大小,页面性能 对搜索引擎,屏幕阅读器友好: 提高可读性,可维护性:规范代码 优化操作: 减少请求:小图标使用sprite拼图合并为一个图片 ...

  6. oracle11g-R2数据库的逻辑备份（数据泵的导入导出）

    一.环境: server1迁移到server2 server1: 服务器号:201 系统:Windows server 2008 R2 x64 IP地址:192.168.2.201 oracle数据库 ...

  7. codewars--js--Simple string expansion+ repeat()，includes()方法

    问题描述: Consider the following expansion: solve("3(ab)") = "ababab" -- "ab&qu ...

  8. C#设计模式学习笔记：(16)观察者模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第四个模式--观 ...

  9. 14.Android-使用sendMessage线程之间通信

    1.Handler介绍 Handler 是一个消息分发对象.handler是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,通过它可以实现在不同线程之间传递消息 本章Handle ...

  10. docker配置仓库源

    1 修改docker配置文件 下面的内网ip改成公司的私有仓库地址 后面两个建议保留(一个是国内加速源,一个是国外仓库.这两个删了也是可以的) 2 重启docker服务 # vim /etc/dock ...