基於阿里egg框架搭建博客（5）——置頂導航條

時間 2020-01-13

原文原文鏈接

基於阿里egg框架搭建博客（1）——開發準備
 基於阿里egg框架搭建博客（2）——Hello World
基於阿里egg框架搭建博客（3）——註冊與登陸
 基於阿里egg框架搭建博客（4）——權限控制
 基於阿里egg框架搭建博客（5）——置頂導航條
 基於阿里egg框架搭建博客（6）——瀏覽、發表文章
 基於阿里egg框架搭建博客（7）——編輯文章javascript

git

https://github.com/ZzzSimon/e...
喜歡就點個贊吧！css

正文

模板繼承

導航條是博客不可或缺的一部分，幾乎每個頁面都有置頂導航條。咱們不可能在每一個頁面都複製一份相同的代碼，由於這樣代碼變得冗餘，並且當須要修改導航條時，改動量會很是之大。所幸的是，咱們使用了nunjucks做爲view模板，其提供的模板繼承功能能夠解決這個問題。html

官方文檔： https://nunjucks.bootcss.com/...

頁面設計

功能設計

如頁面設計圖中所示，導航條共有6塊功能：java

站點名稱，點擊後能夠回到首頁
文章按鈕，點擊後能夠查看文章列表
搜索框，能夠按文章名稱搜索文章
發表文章按鈕，顧名思義，能夠發表博文
用戶頭像下拉按鈕，個人文章能夠查看本身的文章或從新編輯
設置，能夠修改我的信息
註銷，註銷用戶，刪除session，返回登陸

父模板parent.tpl代碼（包含導航條）

咱們建立/app/view/parent.tpl文件：jquery

<!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處：git

<head>標籤處，能夠添加<title>和一些靜態資源，此處須要注意的是，父模板中已經引入的靜態資源，如bootstrap，不要再次在子模板中重複引用，不然有可能會不生效。
<div class="container">標籤處，此處能夠理解爲<body>中的內容，爲頁面的主要內容。
<script>標籤處，能夠添加js代碼。

首頁home.tpl繼承parent.tpl

咱們建立/app/view/home/home.tpl文件：github

{% 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中添加如下內容：bootstrap

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
                });
    }