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. PYTHON 学习笔记1 PYTHON 入门 搭建环境与基本类型

    简介 Python,当然大家听到这个名词不再是有关于像JAVA 一样的关于后台,我们学习Python 的目的在于对于以后数据分析和机器学习AI 奠定基础,Python 在数据分析这一块,可谓是有较好的 ...

  2. [Effective Java 读书笔记] 第6章 枚举和注解

    第三十条 用enum代替int 总得来说,使用enum有几点好处 1.编译时的类型安全, 2.可以保证就是自己定义的值,不会有月结风险, 3.每个枚举类型有自己的命名空间 4.枚举可以添加任意的方法和 ...

  3. php面试笔记（5）-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...

  4. bin utilities related

    objdump -S,如果有源程序的话,将源程序与汇编代码混合在一起. 使用该选项时,输入的目标文件需要有调试信息,即用gcc -g生成的目标文件才可以,因为,调试信息中采用源程序信息. objcop ...

  5. [Redis-CentOS7]Redis字符串操作(二)

    登录Redis # redis-cli 127.0.0.1:6379> 添加字符串 EX 超期时间60s 127.0.0.1:6379> set username 'leoshi' OK ...

  6. 幻读在 InnoDB 中是被如何解决的？

    在MySQL事务初识中,我们了解到不同的事务隔离级别会引发不同的问题,如在 RR 级别下会出现幻读.但如果将存储引擎选为 InnoDB ,在 RR 级别下,幻读的问题就会被解决.在这篇文章中,会先介绍 ...

  7. js+vue、纯js 按条件分页

    听说大牛都从博客开始的... 人狠话不多,翠花上酸菜代码: 有注解基本上都看的懂!但是自己还是要注意以下几点,免得以后再浪费时间. #.vue 中监听事件 v-on:change=“vueChange ...

  8. 工作五年的.neter的一些经历感想和对未来的一些疑惑

    本次疫情在家办公快一个月了,节省了上下班的时间,外出活动时间,感觉有好多时间可以利用.人一闲下来就容易想事情,很多事情想不通心里堵的厉害,做事都提不起兴趣.至于想些什么呢,我给大家摆一下. 我的经历 ...

  9. C#设计模式学习笔记：(18)状态模式

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

  10. 二进制、十六进制理解及int类型二进制存储方式

    二进制 0000 0000 0000 0000 0000 0000 0000 0001 // 2^0 0000 0000 0000 0000 0000 0000 0000 0010 // 2^1 00 ...