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

渲染模板

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

复制代码
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里面

{{template "footer" .}}

footer.html里面

{{define "footer"}}
    </body>

    </html>
{{ end }}

模板判断

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

1
2
3
4
5
6
<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>

  

 

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

 

posted @   唯一客服系统开发笔记  阅读(200)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2021-11-14 [MySQL系列] mysql find_in_set搜索以逗号分隔的字符串
2021-11-14 [前端系列] 解决el-table导致TypeError: this.$el.querySelectorAll is not a function
2021-11-14 在线客服系统-全渠道接入-不限制坐席、域名、服务器-GOFLY在线客服系统
2021-11-14 [前端系列] js获取秒级时间戳
2019-11-14 [Go] gocron源码阅读-go语言中的切片接口和类型综合
2019-11-14 [Go] gocron源码阅读-go语言中的切片和类型综合
2019-11-14 [Go] gocron源码阅读-go语言的结构体
点击右上角即可分享
微信分享提示
1
chat with us