B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

golang的html模板引擎中的渲染、布局的实现

Published on:2022-11-02
本文主要介绍 go 原生模板 html/template 包中的渲染  和  text/template 包中的布局模板使用。

一、渲染


//1.解析模板
temp := template.Must(template.ParseFiles("html/test1.html"))

//2.数据映射及输出模板
temp.Execute(w,"hello world") //Execute 渲染 ParseFiles参数的第一个文件

指定模板名称,中间的名称为文件名称

temp.ExecuteTemplate(w, "test1.index", "hello world") //指定名称渲染特定页面


二、布局


golang 提供可 {{define}}  {{block}}  {{template}} 三个actions指令,我们可以借助这三个指令实现模板的嵌套及布局


1.{{define "name"}} 内容 {{end}}


定义一个具有指定名称name的代码块,该名称name,主要被用于 模板渲染,以及block template 指令调用

模板渲染指定define的模块

temp.ExecuteTemplate(w, "define的name值", "hello world") 

2.{{block "name" data}} 没有匹配到define时的内容 {{end}}


调用一个define定义的name的代码块,并给define模块中传入数据data


3.{{template "name" data}} 


嵌套一个define定义的name的代码块,并给define模块中传入数据data


三、实现一个布局


html/layout/layouts.html布局页面

{{define "layout_default"}}
<!DOCTYPE html>
<html lang="en">
<head>
{{block "header" .}}{{end}}
</head>
<body class="gray-bg" style="display: none">
<div class="container-div">
<div class="row">
{{block "content" .}}{{end}}
</div>
</div>
{{block "js_src" .}}{{end}}
{{block "script" .}}{{end}}
</body>
</html>
{{end}}


html/layout/include.html 公共资源,可以定义一些通用的代码块

{{define "header"}}
<title>B5GoCMF</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="/static/admin/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
{{end}}
{{define "js_src"}}
<script type="text/javascript" src="/static/admin/plugins/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/static/admin/plugins/bootstrap/js/bootstrap.min.js"></script>
{{end}}


测试页面html/test/index.html

{{define "test/index"}}
{{template "layout_default" .}}
{{end}}

{{define "content"}}
<div class="col-sm-12 search-collapse">
//页面代码
</div>
{{end}}

{{define "script"}}
<script>
//js代码
</script>
{{end}}


渲染布局及调用显示html/test/index.html


func handleTest(w http.ResponseWriter,r *http.Request)  {
//1.解析模板 布局文件必须也要解析
layoutFiles :=[]string{"html/layout/layouts.html","html/layout/include.html"}
layoutFiles = append(layoutFiles, "html/test/index.html")

temp := template.Must(template.ParseFiles(layoutFiles...))

//html/test/index.html 页面中定一个了一个自己的test/index
temp.ExecuteTemplate(w, "test/index", "hello world")
}


留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    最新评论
    小白 :大佬您好 请问一下 http://b5laravelcmf.b5net.com/admin这个演示网址的全部代码有吗,gitee上不全呢,还能提供一下吗,感激不尽阿
    tz :大佬 B5YiiCMF 还开放吗
    weifox on GoLang常用的三方库 :还有 https://github.com/golang-module/carbon
    php :关于导出功能:1、B5thinkCMF部署后 参数的导出功能点击后就白屏了,不知道是哪里有问题?2、人员部门的导出功能没看懂怎么配置的? 只是启用exportshow=true吗 方便的话请答复下,谢谢!
    初学者 :您好! 部署了您的B5ThinkCMF,请教下 使用新增功能如何实现二级联动呢 ?谢谢
    11 :22
    pcy :前排围观
    Louis :冰舞的博客使用yii框架做的吧,B5ThinkCMF在本地部署后,登录系统的响应时间要比B5YiiCMF的登录时间长,还有一些Bug待修复
    34 :感谢你的开源项目
    文章分类