基于阿里egg框架搭建博客5置顶导航条

jiezi

5 年前

基于阿里 egg 框架搭建博客（1）——开发准备
基于阿里 egg 框架搭建博客（2）——Hello World
基于阿里 egg 框架搭建博客（3）——注册与登录
基于阿里 egg 框架搭建博客（4）——权限控制
基于阿里 egg 框架搭建博客（5）——置顶导航条
基于阿里 egg 框架搭建博客（6）——浏览、发表文章
基于阿里 egg 框架搭建博客（7）——编辑文章

https://github.com/ZzzSimon/e…
喜欢就点个赞吧！

导航条是博客不可或缺的一部分，几乎每一个页面都有置顶导航条。我们不可能在每个页面都复制一份相同的代码，因为这样代码变得冗余，而且当需要修改导航条时，改动量会非常之大。所幸的是，我们使用了 nunjucks 作为 view 模板，其提供的 模板继承 功能可以解决这个问题。

官方文档：https://nunjucks.bootcss.com/…

如页面设计图中所示，导航条共有 6 块功能：

站点名称，点击后可以回到首页
文章按钮，点击后可以查看文章列表
搜索框，可以按文章名称搜索文章
发表文章按钮，顾名思义，可以发表博文
用户头像下拉按钮，我的文章可以查看自己的文章或重新编辑
设置，可以修改个人信息
注销，注销用户，删除 session，返回登录

我们创建 /app/view/parent.tpl 文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>
    <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
    {% block head %}{% endblock %}
</head>

<body>
<div id="nav">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"> 妖云小离 </a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/articleList.htm"> 文章 </a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false"> 预留 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" action="/search?_csrf={{ctx.csrf | safe}}">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索" name="keyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/edit.htm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发表文章 </a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            <img src=""id="avatarNav"class="img-circle"style="width: 26px; margin-top: -6px">
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/myarticle.htm"> 我的文章 </a></li>
                            <li><a href="/myInfo.htm"> 设置 </a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/user/logout"> 注销 </a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
</div>
<div id="top" class="row" style="margin-top: 10%"></div>
<div class="container">
    {% block content %}{% endblock %}
</div>

<script type="text/javascript">
    function getCookie(c_name) {if (document.cookie.length > 0) {c_start = document.cookie.indexOf(c_name + "=")
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1
                c_end = document.cookie.indexOf(";", c_start)
                if (c_end == -1) c_end = document.cookie.length
                return unescape(document.cookie.substring(c_start, c_end))
            }
        }
        return ""
    }

    $('#avatarNav').attr('src', getCookie('avatarUrl'));
</script>
{% block script %}{% endblock %}
</body>
</html>

父模板中可以继承重写的地方有 3 处：

<head>标签处，可以添加 <title> 和一些 静态资源 ，此处需要注意的是，父模板中已经引入的静态资源，如 bootstrap，不要再次在子模板中重复引用，否则有可能会不生效。
<div class="container">标签处，此处可以理解为 <body> 中的内容，为页面的主要内容。
<script>标签处，可以添加 js 代码。

我们创建 /app/view/home/home.tpl 文件：

{% extends "parent.tpl" %}

{% block head %}
<title> 首页 </title>
<link rel="stylesheet" href="/public/css/home.css" />
{% endblock %}

{% block content %}
<div class="home">
    hello ! {{user.username}}
    {{helper.formatTime(time)}}
</div>
{% endblock %}

我们在 /app/controller/home.js 中添加以下内容：

    async index() {const {ctx, service} = this;
            const userInfo = ctx.session.user;
            ctx.logger.info('session:: %j',userInfo);
            await ctx.render('home/home.tpl',
                {time: new Date(),
                    user:userInfo
                });
    }

我们在 /app/router.js 中添加以下内容：

router.get('/', controller.home.index);

打开浏览器输入http://127.0.0.1:7001，即可看到如页面设计中的图。

如果看完觉得有用，请给作者一个喜欢吧！谢谢啦！

基于阿里egg框架搭建博客5置顶导航条

相关文章

git

正文

模板继承

页面设计

功能设计

父模板 parent.tpl 代码（包含导航条）

首页 home.tpl 继承 parent.tpl

HomeController

router.js

结果

结尾