相關文章
基於阿里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塊功能:
- 站點名稱,點擊後可以回到首頁
- 文章按鈕,點擊後可以查看文章列表
- 搜索框,可以按文章名稱搜索文章
- 發表文章按鈕,顧名思義,可以發表博文
- 用戶頭像下拉按鈕,我的文章可以查看自己的文章或重新編輯
- 設置,可以修改個人信息
- 註銷,註銷用戶,刪除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處:
-
<head>
標籤處,可以添加<title>
和一些靜態資源
,此處需要注意的是,父模板中已經引入的靜態資源,如bootstrap,不要再次在子模板中重複引用,否則有可能會不生效。 -
<div class="container">
標籤處,此處可以理解爲<body>
中的內容,爲頁面的主要內容。 -
<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
,即可看到如頁面設計中的圖。
結尾
如果看完覺得有用,請給作者一個喜歡吧!謝謝啦!