首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >在线客服系统源码开发实战总结:gin框架模板渲染html页面

在线客服系统源码开发实战总结:gin框架模板渲染html页面

作者头像
唯一Chat
发布2022-11-22 16:45:20
发布2022-11-22 16:45:20
3.2K0
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

渲染模板

我的客服系统后端使用的golang Gin 框架,想把页面渲染出来,下面就是加载html模板页面

代码语言:javascript
复制
package router

func InitViewRouter(engine *gin.Engine) {

    //关于页面
    engine.GET("/aboutus.html", func(c *gin.Context) {
        c.HTML(http.StatusOK, "aboutus.html", gin.H{
            "nav": "aboutus",
        })
    })
    //演示页面
    engine.GET("/show.html", func(c *gin.Context) {
        c.HTML(http.StatusOK, "show.html", gin.H{
            "nav": "show",
        })
    })

}

分配的模板变量nav ,是为了前端导航部分,可以实现选中当前页面的效果

因为导航条部分,我提取到了公共页面里。

模板公共部分

当使用gin进行模板渲染的时候

如果想要头部或者底部是公用的,那么可以这样做

比如模板部分

index.html

footer.html

index.html里面

代码语言:javascript
复制
{{template "footer" .}}

footer.html里面

代码语言:javascript
复制
{{define "footer"}}
    </body>

    </html>
{{ end }}

模板判断

导航部分,需要判断分配的模板变量,实现当前选中页面效果。.nav就是分配过来的变量

代码语言:javascript
复制
                <li class="nav-item {{if eq .nav "show"}}on{{end}}">
                    <a href="/show.html" target="_blank">线上功能演示</a>
                </li>
                <li class="nav-item {{if eq .nav "aboutus"}}on{{end}}">
                    <a href="/aboutus.html" target="_blank">关于产品</a>
                </li>

可以看到导航部分的效果,参考演示页面 演示页面-唯一在线客服系统

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-14,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 渲染模板
  • 模板公共部分
  • 模板判断
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档