資訊專欄INFORMATION COLUMN
摘要：現在我們打算實現一個在網頁上方的導航條，并在所有的頁面中繼承這個導航條。導航條的建立，我們直接使用提供的如下導航條的樣式。之后我們把上述導航條的代碼復制到的中，及引用復制到中，瀏覽器就能顯示和圖中一樣的導航條了。
在建設一個網站的時候，不同的頁面有很多元素是一樣的，比如導航條、側邊欄等，我們可以使用模板的繼承，避免重復編寫html代碼。現在我們打算實現一個在網頁上方的導航條，并在所有的頁面中繼承這個導航條。導航條的建立，我們直接使用Bootstrap提供的如下導航條的樣式。
但在使用Bootstrap的導航條樣式之前，需要先引用Bootstrap所需要的css和js文件以及jQuery，我們在html的header中插入以下代碼完成引用：
具體修改的點是，我把原始的Brand替換成了一個圖片作為logo，第一個下拉控件Dropdown刪掉了，最右側的下拉控件增加了一個選項，并把文字都替換成了我們想要的。然后建立了一個base.css文件來調整圖片大小、控件位置、背景色等等，這一部分都是基礎的html/css知識，也就不多說。后續所有的網頁都要使用這個導航條，我們將含有導航條這個html命名為base.html，并在其body中，導航條代碼的下方增加以下代碼：
{% block body_part %} {% endblock %}然后新建一個home.html，輸入以下內容：
{% extends "base.html" %} {% block body_part %}This is body content under nav-bar
{% endblock %}渲染home.html并訪問，我們可以看到這樣的結果：
因此我們不難理解，在home.html中，{% extends "base.html" %}表示繼承自base.html，home.html中block和endblock區間的代碼塊會自動替換到base.html同樣名為body_part的block區域。block可以使用多個，例如在
</b>中也可以使用，以便于不同的頁面設置不同的標題。<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"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <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 %}