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. 2.5D(伪3D)站点可视化第一弹

    楔子 最近要做一个基站站点的可视化呈现项目. 我们首先尝试的是三维的可视化技术来程序,但是客户反馈的情况是他们的客户端电脑比较差,性能效率都会不好,甚至有的还是云主机. 因此我们先做了一个性能比较极致 ...

  2. SPH液面重构过程中的问题

    使用粒子方法进行流体特效模拟需要进行液面重构,构造出流体的自由表面,液面重构方法也是一个独立的研究方向,针对其的研究已经有了很多成果,包括液面的平滑度.精度和并行效率等. 在这里,主要是记录一下我在液 ...

  3. 20200118--python学习第十一天

    今日内容 函数小高级 lambda表达式 内置函数 内容回顾 1.函数基本结构 2.参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pa ...

  4. Linux 服务器注意事项

    1.创建时  数据文件一定分盘挂载 2.LVM 虚拟磁盘卷是否创建    有争议??? 3.hosts 文件 最好添加本机映射          主机名  127.0.0.1      4.iptab ...

  5. CentOS7.3下yum安装MariaDB10.3.12并指定utf8字符集

    添加MariaDB的yum源,指定安装的版本,然后使用 yum 工具进行安装 参考MariaDB官方网站对应安装方法和步骤 https://downloads.mariadb.org/mariadb/ ...

  6. Apache安装使用笔记

    下载 打开网页http://httpd.apache.org/,点击 在download页面点击 然后在新页面选择 在新窗口选择 选择32位或64位apache下载,此处下载64位的apache: h ...

  7. TCP/IP分为几层？各层的作用是什么?

    1. 应用层 2.传输层 3.网络层 4.网络接口层* 1.应用层 TCP/IP协议族在这一层面有着很多协议来支持不同的应用,许多大家所熟悉的基于Internet的应用的实现就离不开这些协议.如我们进 ...

  8. ssh常用命令大全

    ssh命令速查表 ssh-add ~/.ssh/your_private_key:输入你的私钥密码 就可以把你的私钥加入到ssh-agent中去 ssh-add -D: 删除所有管理的密钥 ssh-a ...

  9. 智和网管平台SugarNMS赋能AI智能化运维

    11月14日,由<网络安全和信息化>和IT运维网联合主办的2019(第十届) IT运维大会上海站在锦荣国际大酒店如期召开.运维领域权威专家.技术领袖.各类运维相关技术产品提供商及服务商共同 ...

  10. Android中使用getDrawable时提示:Call requires API level 21(current min is 15)

    场景 在通过getDrawable方法获取照片资源时提示: Call requires API level 21(current min is 15) 注: 博客: https://blog.csdn ...