資訊專欄INFORMATION COLUMN
摘要：現(xiàn)在我們打算實現(xiàn)一個在網(wǎng)頁上方的導(dǎo)航條，并在所有的頁面中繼承這個導(dǎo)航條。導(dǎo)航條的建立，我們直接使用提供的如下導(dǎo)航條的樣式。之后我們把上述導(dǎo)航條的代碼復(fù)制到的中，及引用復(fù)制到中，瀏覽器就能顯示和圖中一樣的導(dǎo)航條了。
在建設(shè)一個網(wǎng)站的時候，不同的頁面有很多元素是一樣的，比如導(dǎo)航條、側(cè)邊欄等，我們可以使用模板的繼承，避免重復(fù)編寫html代碼?，F(xiàn)在我們打算實現(xiàn)一個在網(wǎng)頁上方的導(dǎo)航條，并在所有的頁面中繼承這個導(dǎo)航條。導(dǎo)航條的建立，我們直接使用Bootstrap提供的如下導(dǎo)航條的樣式。
但在使用Bootstrap的導(dǎo)航條樣式之前，需要先引用Bootstrap所需要的css和js文件以及jQuery，我們在html的header中插入以下代碼完成引用：
具體修改的點是，我把原始的Brand替換成了一個圖片作為logo，第一個下拉控件Dropdown刪掉了，最右側(cè)的下拉控件增加了一個選項，并把文字都替換成了我們想要的。然后建立了一個base.css文件來調(diào)整圖片大小、控件位置、背景色等等，這一部分都是基礎(chǔ)的html/css知識，也就不多說。后續(xù)所有的網(wǎng)頁都要使用這個導(dǎo)航條，我們將含有導(dǎo)航條這個html命名為base.html，并在其body中，導(dǎo)航條代碼的下方增加以下代碼：
{% block body_part %} {% endblock %}然后新建一個home.html，輸入以下內(nèi)容：
{% extends "base.html" %} {% block body_part %}This is body content under nav-bar
{% endblock %}渲染home.html并訪問，我們可以看到這樣的結(jié)果：
因此我們不難理解，在home.html中，{% extends "base.html" %}表示繼承自base.html，home.html中block和endblock區(qū)間的代碼塊會自動替換到base.html同樣名為body_part的block區(qū)域。block可以使用多個，例如在
</b>中也可以使用，以便于不同的頁面設(shè)置不同的標題。<br>最終<b>base.html</b>代碼如下：</p> <pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="{{ url_for("static",filename="css/base.css") }}"/> <link rel="shortcut icon" href="{{ url_for("static", filename="images/favicon.ico") }}"> <title>{% block page_name %}{% endblock %}-HarpQA {% block body_part %} {% endblock %}