經過觀察可以發現,基本上每個網站都會有一個叫 導航欄 Bootstrap架構 模闆繼承
的東西,其目的就是為了友善使用者找到自己檢視的頁面。導航欄可以自己制作,但我選擇的方法是使用
,還有給每個網頁都添加一段導航欄代碼會顯得特别備援,是以這裡還涉及到一個
的知識點,我将模闆繼承知識寫在了 Django入門: (第八天) 模闆定義與繼承
,友善查閱
那麼有了
模闆繼承
的知識以後,就可以給整個站點設計一個公共的代碼部分—導航欄,将模闆頁面加入到路徑中,修改 settings.py
檔案,設定 TEMPLATES
的 DIRS
值 'DIRS': [os.path.join(BASE_DIR, 'templates')],
做完上面這一步,接下來一個知識點就是靜态檔案的處理,它包括css,js,圖檔,這些都屬于靜态檔案,那麼同樣,靜态檔案處理部分内容也在
Django入門: (第十一天) 處理靜态檔案詳細說明,這裡我給出我的路徑
base.css檔案存放路徑 /mainsite/static/blog/css/base.css
bootstap檔案存放路徑 /mainsite/static/bootstrap-3.3.7
将這些都準備工作都做好以後,就可以開始編寫base.html頁面了,因為引入了靜态資源處理,就需要在base.html開頭處加上
{% load static from staticfiles %}
靜态檔案
需要在
head标簽
引入:
<link rel="stylesheet" href="{% static 'blog/css/base.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
現在可以編寫body體内的代碼了,主要是用到
bootstap架構
,簡單的介紹也在
移動端庫和架構,不過還是建議檢視bootstap的文檔:
Bootstrap中文文檔,内部介紹的更為詳細還有例子解釋,在
元件
的右邊有
導航欄
的使用方法,這個都可以根據自己需要的功能自行分析添加,是以我就直接貼出我的導航欄部分代碼
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container_fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{% url 'blog:blog' %}">蔣振飛的部落格</a>
<button class="navbar-toggle collapsed nav_bar" data-target="#navbar-collapse" data-toggle="collapse">
{# <span class="sr-only"></span>#}
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav base_head">
{# 部落格首頁 #}
<li class="{% block nav_home_active %}{% endblock %}">
<a href="{% url 'blog:home' %}"><span class="glyphicon glyphicon-home">部落格首頁</span></a>
</li>
{# 部落格清單 #}
<li class="{% block nav_blog_active %}{% endblock %}">
<a href="{% url 'blog:blog' %}"><span class="glyphicon glyphicon-pencil">部落格清單</span></a>
</li>
{# 部落格分類 #}
<li class="{% block nav_category_active %}{% endblock %}">
<a href="{% url 'blog:category_list' %}"><span class="glyphicon glyphicon-file">部落格分類</span></a>
</li>
{# 日期歸檔 #}
<li class="{% block nav_date_active %}{% endblock %}">
<a href="{% url 'blog:date_list' %}"><span class="glyphicon glyphicon-book">日期歸檔</span></a>
</li>
{# 關于我 #}
<li class="{% block nav_about_active %}{% endblock %} hidden-sm">
<a href="{% url 'user:about' %}"><span class="glyphicon glyphicon-education">關于我</span></a>
</li>
</ul>
{# 搜尋框 #}
<form method='get' class="navbar-form navbar-left" action="/search/">
<div class="form-group search_box">
<input type="text" name="q" class="form-control" placeholder="搜點啥?">
</div>
<button type="submit" class="hidden-sm btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</div>
這是我的
導航欄排布
,可以根據功能自己添加相應的
模闆頁面
和
功能處理
,其中
使用者登入
注冊
留到後面介紹使用者操作再作解釋。導航欄已添加成功,那麼還缺少
頁腳功能
,如關于本站資訊和網站備案号等。頁腳其實有很多種方法,而且注意不是将頁腳完全固定到視窗底部一直顯示,而是可以跟随滾動條滾動。我使用的是
position定位
的方法,還有一種叫做
負margin的方法
,比如說下面這個是一個html檔案的導航欄,内容,頁腳
<body>
<div class='header'></div>
<div class='container'></div>
<div class='footer'></div>
</body>
在使用
position定位
的時候,注意要将body采用
絕對定位
,而且padding-bottom的高度一定要大于
頁腳内容的高度
body{
min-height:100%;
position:absolute;
padding-bottom: 30px; /*需要 >= footer的height值*/
}
.footer{
height:30px;
position:absolute;
bottom:0px;
}
以下是我的
頁腳代碼
:
<div class="footer">
<div class="website-info">
<div class="about">
<h4>關于本站</h4>
<p>1.基于Django+Bootstrap開發</p>
<p>2.主要發表本人的技術筆記與随筆</p>
<p>3.本站于2018-5-30開始建站</p>
</div>
<div class="response hidden-xs">
<h4>建議回報</h4>
<p>1.歡迎注冊評論</p>
<p>2.可在相應的博文底下評論</p>
<p>3.發郵件到[email protected]</p>
</div>
<div class="contact hidden-xs hidden-sm">
<h4>歡迎聯系</h4>
<p> <img src="{% static 'blog/media/qq.ico' %}" alt="qq">:1378482556</p>
<p><img src="{% static 'blog/media/github.ico' %}" alt="github">:<a href="https://github.com/XiaoFei-97">https://github.com/XiaoFei-97</a></p>
</div>
</div>
<div class="copyright">
<span>Welcome to visit my website © Jack Jiang</span>
<span class="hidden-xs"><a href="http://www.miibeian.gov.cn/" target="_blank">贛ICP備18008471号</a></span>
</div>
</div>
導航欄與頁腳部分
base.css
如下:
body{
margin-top: 50px!important;
background-color: #4cae4c;
margin-bottom: 2em;
font-size: 2em;
min-height:100%;
position:absolute;
width: 100%;
padding-bottom: 10em;
}
.footer{
width: 100%;
position: absolute;
bottom: 0;
}
.website-info{
overflow: hidden;
background-color: #e7e7e7;
padding-left: 10%;
}
.website-info h4{
padding-bottom: 3px;
color: #424242;
font-weight: bold;
border-bottom: 1px solid #aaa;
}
.about, .response, .contact{
float: left;
margin-right: 10%;
margin-left: 2% ;
font-size: 0.75em;
}
.about p, .response p, .contact p{
margin-bottom: 0.2em;
}
.copyright{
text-align: center;
padding: 0.5em 0;
background: #4F5893;
color: #e7e7e7;
bottom: 10em;
}
.copyright a{
color: #fff;
margin-left: 1em;
}
.copyright a:hover{
color: cyan;
}