我們在開發一個web項目的時候，雖然我們不是專業開發，但是我們也想要做出來一個美美的前端頁面。
這種時候，百度上鋪天蓋地的前端框架就是我們的最好選擇了。
當然，在網上直接下載的框架，我們是不能直接用的，所以本篇介紹一下我們怎么樣來修改這個模板
首先，我們先下載一個免費的模板。
我們可以看到他的目錄結構，用瀏覽器打開index.html文件之后可以看到模板的樣式。
這樣我們就可以想要哪個地方，復制哪個地方，到我們的代碼里面了。給我們節省了很多編寫前端的時間。
那么我們來看一下這個模板我們要怎么去做。
先打開頁面的代碼
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
在這里我們可以看到，index.html這個頁面，加載了很多css和樣式文件，而這些加載樣式文件的方式，都是用的相對地址。
我們要說的第一點，就是外鏈鏈接，也可以說是靜態/動態資源，這些資源包含css、js、圖片等等資源地址。
為什么不能在django中直接使用相對地址呢，這個我在嘗試添加的時候發現，例如你的頁面地址是index.html，那么你添加了相對地址的這些鏈接地址，都會在你的相對地址前面添加一個/index/。
這就導致了這些模板我們是不能直接拿來使用的。
這種時候，就要用到Django中對於前端的標簽語言。
第一步，首先在我們的django項目的根目錄中，新建一個文件夾，文件夾名稱為static，用來存放這些靜態資源。
第二步，把前端模板中的靜態資源文件，移動到靜態資源的文件夾目錄下。
第三步，安裝django中支持bootstrap的擴展包，這個擴展包的版本，取決於你使用的模板匹配的版本。
pip install django-bootstrap3 或者 pip install django-bootstrap4
然后把擴展包配置到django項目中：
第四步，根據靜態資源文件在項目中的路徑，在setting中配置靜態資源路徑。
STATIC_URL = '/static/' STATIC_ROOT = '/static/' STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
第五步，修改html文件中的外鏈鏈接。
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
如代碼：
{ % load static % } ------ 加載靜態資源
外鏈鏈接 href src 之類的，都可以用這種模式去改。
{ % static '靜態文件存放的路徑' % } 這個路徑，就是你拷貝過來的static目錄下面的路徑
這里的路徑不包含static，是static之后的部分
/PycharmProjects/TestNo1/static/js/demo.js
/PycharmProjects/TestNo1/static/ 部分，不需要加入
需要加入的相對地址是：js/demo.js
這樣修改完之后，可以打開谷歌瀏覽器的開發者工具，選擇Network標簽，再刷新頁面查看加載情況。
如圖，我們修改完靜態資源加載鏈接的頁面，就可以正常添加樣式顯示在我們的網站里啦！
每一個網站，很多都有一個自己固定顯示的導航欄，和一些基礎模塊的顯示。
那么這些模塊，我們是不是可以單獨拿出來，放到另外的一個地方，而不用每一個頁面打開的時候都要去寫這塊的內容呢。
答案當然是可以的。
Django的標簽語言中，就給我們提供了相對應的一些標簽。
讓我們一起來了解一下相關的標簽吧，先看一下代碼。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
{% include 'layout/_link_css.html' %}
{% block css %} {% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Left side column. contains the logo and sidebar -->
{% include 'layout/_header.html' %}
{% include 'layout/_left_sitebar.html' %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
{% block content %}{% endblock %}
</div>
{% include 'layout/_footer.html' %}
<div class="control-sidebar-bg"></div>
</div>
{% include 'layout/_link_js.html' %}
{% block js %}{% endblock %}
</body>
</html>
這是通過上面模板而改出來的橫着最上面的導航，和左側最左邊的導航，再加上底部的信息模板。
我們可以看的出來，他首先加載了靜態資源文件。
然后在head標簽中，導入了css；
在body中，加載了header、側邊導航、底部信息；
而在最后，加載了js；
我們可以分開看一下這一塊的代碼。
{% include 'layout/_link_css.html' %}
文件內容：
{% load static %}
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'css/skins/_all-skins.min.css' %}">
<!-- iCheck -->
<link rel="stylesheet" href="{% static 'plugins/iCheck/flat/blue.css' %}">
<!-- Morris chart -->
<link rel="stylesheet" href="{% static 'plugins/morris/morris.css' %}">
<!-- jvectormap -->
<link rel="stylesheet" href="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.css' %}">
<!-- Date Picker -->
<link rel="stylesheet" href="{% static 'plugins/datepicker/datepicker3.css'%}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="{% static 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css' %}">
{% include 'layout/_header.html' %}
文件內容：
{% load static %}
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{% static 'img/user2-160x160.jpg' %}" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>>
{% include 'layout/_left_sitebar.html' %}
文件內容：
{% load static %}
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>測試用例庫</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="../index.html"><i class="fa fa-circle-o"></i>接口</a></li>
<li><a href="/index/"><i class="fa fa-circle-o"></i>UI</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<span class="label label-primary pull-right">4</span>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-th"></i> <span>Widgets</span>
<span class="pull-right-container">
<small class="label pull-right bg-green">new</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span>Charts</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> General</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Icons</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i> <span>Calendar</span>
<span class="pull-right-container">
<small class="label pull-right bg-red">3</small>
<small class="label pull-right bg-blue">17</small>
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<span class="pull-right-container">
<small class="label pull-right bg-yellow">12</small>
<small class="label pull-right bg-green">16</small>
<small class="label pull-right bg-red">5</small>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Login</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Register</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
<li>
<a href="#"><i class="fa fa-circle-o"></i> Level One
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
<li>
<a href="#"><i class="fa fa-circle-o"></i> Level Two
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
{% include 'layout/_footer.html' %}
文件內容：
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.3.12
</div>
<strong>Copyright © 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
reserved.
</footer>
{% include 'layout/_link_js.html' %}
文件內容：
{% load static %}
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!-- jQuery 2.2.3 -->
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="{% static 'plugins/morris/morris.min.js' %}"></script>
<!-- Sparkline -->
<script src="{% static 'plugins/sparkline/jquery.sparkline.min.js' %}"></script>
<!-- jvectormap -->
<script src="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js' %}"></script>
<script src="{% static 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js' %}"></script>
<!-- jQuery Knob Chart -->
<script src="{% static 'plugins/knob/jquery.knob.js' %}"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
<!-- datepicker -->
<script src="{% static 'plugins/datepicker/bootstrap-datepicker.js' %}"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="{% static 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js' %}"></script>
<!-- Slimscroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'js/app.min.js' %}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{% static 'js/pages/dashboard.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'js/demo.js' %}"></script>
這是我們整個前端導航模板的一些代碼，可以拿來做一些參考。
這個時候有小伙伴就會問了，這里還有標簽沒有講呀。
{% include 'layout/_link_css.html' %}
{% block css %} {% endblock %}
沒錯，就是這兩個標簽語言。
第一個include，很容易大家理解，就是導入，意為把相對鏈接中html文件中的內容導入到include的位置上。
第二個block css，
block標簽，相當於一個函數，css是對該函數的命名，開發者可自行命名，在一個模板中添加多個block標簽，每個block標簽的命名不能有相同的。
在使用時，我們可以在代碼中添加跟這個相同的標簽，然后在中間，寫上需要改變或添加的元素
模板寫完之后，就是一個使用了。這個模板我們編輯完之后，要怎么去使用呢？
這里要引入另外一個標簽：{ % extends 'base.html' %}
在需要使用這個模板的文件開頭，寫好這個標簽的內容，就可以繼承這個模板中的內容了！
是不是在做web網站的時候一個很棒的模板呢！
詳情可以加入黎夢課堂交流群來提問或者探討，歡迎各種有志之士加入我們。每周末也會有騰訊課堂的公開課來講解一些知識。
QQ群號：823625453