網站搭建 (第04天) 導航欄與頁腳
一、前言
經過觀察可以發現,基本上每個網站都會有一個叫導航欄的東西,其目的就是為了方便用戶找到自己查看的頁面。導航欄可以自己制作,但我選擇的方法是使用Bootstrap框架,還有給每個網頁都添加一段導航欄代碼會顯得特別冗余,所以這裏還涉及到一個模板繼承的知識點,我將模板繼承知識寫在了Django入門: (第八天) 模板定義與繼承,方便查閱。
那麽有了模板繼承的知識以後,就可以給整個站點設計一個公共的代碼部分-導航欄,將模板頁面加入到路徑中,修改settings.py文件,設置TEMPLATES的DIRS值。
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)],
二、引入bootstrap
做完上面這一步,接下來一個知識點就是靜態文件的處理,它包括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; }
網站搭建 (第04天) 導航欄與頁腳