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

34次阅读

共计 3862 个字符，预计需要花费 10 分钟才能阅读完成。

相关文章

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

git

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

正文

模板继承

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

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

页面设计

功能设计

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

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

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

我们创建 /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 处：

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

首页 home.tpl 继承 parent.tpl

我们创建 /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 %}

HomeController

我们在 /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
                });
    }

router.js

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

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

结果

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

结尾

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

正文完
css html5 node.js
发表至： javascript
2019-10-14
 0
关于javascript:基于角色访问控制RBAC权限模型的动态资源访问权限管理实现
关于javascript:从零搭建-Nodejs-企业级-Web-服务器十五总结与展望
JavaScript学习
ES6走走看看—由块级作用域引出的一场变革