beego开发轻博客——第二讲 项目整合(二)

96
qq归位
2018.07.19 18:56* 字数 341

【小鸡创作】beego开发轻博客

本章目标:bee run 能够让项目正常运行!
github: 打开后,点击右上角star按钮
视频教程: B站地址


修改views目录下的文件,抽离页面公共部分。

  1. 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">
  1. 修改 项目目录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>
  1. {{templage "xxxx"}} 用于嵌入静态页面(无变量)。
  2. {{templage "xxxx" .}} 注意后面有个“.” ,有“.” 子模板才能获得父模板的变量
  1. 和 【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>&copy; 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

原内容为:

改成:
  1. 修改页面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 命令,项目可以运行并可以访问到首页,但是不能访问其他页面,下期咱们再添加功能。

liteblog
Web note ad 1