【小鸡创作】beego开发轻博客
本章目标：bee run 能够让项目正常运行！
github: 打开后，点击右上角star按钮
视频教程: B站地址
修改views目录下的文件,抽离页面公共部分。
-
liteblog-->views 目录下新增comm目录，并新增link.html 如图：
comm-->link.html
<link rel="stylesheet" href="/static/layui/css/layui.css">
<link rel="stylesheet" href="/static/css/mian.css">
- 修改 项目目录views 下的文件
| 文件 |
|---|
| error-->404.html |
| index.html |
| about.html |
| comment.html |
| details.html |
| message.html |
<head>
<meta charset="UTF-8">
<title>闲言轻博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/layui/css/layui.css">
<link rel="stylesheet" href="/static/css/mian.css">
</head>
改成
<head>
<meta charset="UTF-8">
<title>评论-闲言轻博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{{template "comm/link.html"}}
</head>
- {{templage "xxxx"}} 用于嵌入静态页面(无变量)。
- {{templage "xxxx" .}} 注意后面有个“.” ，有“.” 子模板才能获得父模板的变量
- 和 【2】 差不多，在comm目录下新增 header.html和footer.html。
header.html的代码:
<div class="header">
<div class="header-wrap">
<h1 class="logo pull-left">
<a href="index.html">
<img src="/static/images/logo.png" alt="" class="logo-img">
<img src="/static/images/logo-text.png" alt="" class="logo-text">
</a>
</h1>
<form class="layui-form blog-seach pull-left" action="">
<div class="layui-form-item blog-sewrap">
<div class="layui-input-block blog-sebox">
<i class="layui-icon layui-icon-search"></i>
<input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
</div>
</div>
</form>
<div class="blog-nav pull-right">
<ul class="layui-nav pull-left">
<li class="layui-nav-item"><a href="index.html">首页</a></li>
<li class="layui-nav-item"><a href="message.html">留言</a></li>
<li class="layui-nav-item layui-this"><a href="about.html">关于</a></li>
</ul>
<a href="#" class="personal pull-left">
<i class="layui-icon layui-icon-username"></i>
</a>
</div>
<div class="mobile-nav pull-right" id="mobile-nav">
<a href="javascript:;">
<i class="layui-icon layui-icon-more"></i>
</a>
</div>
</div>
<ul class="pop-nav" id="pop-nav">
<li><a href="/">首页</a></li>
<li><a href="/message">留言</a></li>
<li><a href="/about">关于</a></li>
</ul>
</div>
footer.html的代码：
<div class="footer">
<p>
<span>© 2018</span>
<span><a href="http://www.layui.com" target="_blank">layui.com</a></span>
<span>MIT license</span>
</p>
<p><span>人生就是一场修行</span></p>
</div>
<script src="static/layui/layui.js"></script>
<script>
layui.config({
base: '/static/js/'
}).use('blog');
</script>
修改下面的文件
| 文件 | |
|---|---|
| error-->404.html | |
| index.html | |
| about.html | |
| comment.html | |
| details.html | |
| message.html |
-
修改页面message.html !
{{ .Data}} golang模版变量输出必须是以.开头
{{method arg0 arg1}} golang模版调用函数的方式
修改 controllers/object.go
func (c *IndexController) Get() {
c.Data["Website"] = "beego.me"
c.Data["Email"] = "astaxie@gmail.com"
c.TplName = "index.tpl"
}
改成：
func (c *IndexController) Get() {
c.TplName = "index.html"
}
c.TplName是beego定义的变量，用来指定渲染模版的文件路径，beego默认所有的模版都在views目录下，直接写相对于views的模版路径即可。
目前，用命令行切换到liteblog目录下，运行bee run 命令，项目可以运行并可以访问到首页，但是不能访问其他页面，下期咱们再添加功能。
