網站常需要提供一些圖片，css，javascript等文件服務。這些文件稱為靜態文件。在 setting.py 中，有一行 STATIC_URL = ‘/static/’，此行表示若要取用靜態文件(css, 圖片, javascript)，則網址為 http://ip/static/
我們必需在 STATIC_URL 之下，手動加入 STATICFILES_DIRS 來指定靜態文件的儲存目錄。
以下的操作，以連結網站中的圖片來說明。
新增static目錄
新增 static 目錄(其實目錄名稱可以自已指定，不一定要用static)，此目錄與 templates目錄同等級。然後在 static 裏可以再新增如 images, ccs.. 等要靜態連結的子目錄。
然後把所有圖片全部 copy 到 static/images 即可。
settings.py
在 settings.py裏新增如下藍色的部份
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
網頁撰寫
網頁中的連結如下
<img src='/static/icons/banner.jpg' width='400' height='300' />
除了上述的寫法，亦可使用如下語法
{% load static %}
<img src="{% static 'icons/banner.jpg' %}"/>
migrate
在啟動網頁伺服器時，若有出現 run ‘Python manage.py migrate’時，這表示要進行同步處理，請先下達此指令，否則有時外部連線無法顯示圖片
python manager.py migrate
home.html
請將首頁 home.html 更改如下
<html>
<head>
<meta charset="UTF-8">
<title>MahalJSP</title>
<script src="/static/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="/static/SpryAssets/SpryValidationTextField.js" type="text/javascript"/>
<link href="/static/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="/static/SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" type="image/x-icon" href="/static/icons/logo.png" />
</head>
<style>
body{
margin:0px;
}
#div_body{
display: flex;
flex-direction: column;
width:100%;
height:100%;
}
#div_banner{
background-image:url('/static/icons/banner.png');
background-repeat:no-repeat;
height:80px;
}
#div_menu{
width:100%;
height:37px;
background-color:#0077ff;
}
#div_content{
flex-grow:1;
flex-basis: 100px;
display: flex;
width:100%;
overflow:hidden;
background-color:#c0c0ff;
}
#div_copyright{
background-color: #00aaff;
width: 100%;
height: 25px;
text-align: right;
}
#div_logout_template {
position: absolute;
right: 10px;
z-index: 2;
}
#img_logout {
margin-right: 12px;
margin-top: 6px;
width: 25px;
height: 25px;
}
#div_menu_template{
width:100%;
height:37px;
background-color:#0077ff;
}
ul.MenuBarHorizontal a {
color: #000;
background-color: transparent;
}
ul.MenuBarHorizontal a:hover{
background-color: #005555;
}
ul.MenuBarHorizontal ul a {
background-color: #dddddd;
}
ul.MenuBarHorizontal li.MenuBarItemIE {
background: transparent;
}
</style>
<body>
<div id="div_body">
<div id="div_banner">
<a href="/">
</a>
</div>
<div id="div_menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<a href="http://mahaljsp.asuscomm.com/thomas/travel">旅遊軌跡</a>
</li>
<li>
<a href="http://mahaljsp.asuscomm.com/thomas/gallery">相片記錄</a>
</li>
<li>
<a href="http://mahaljsp.asuscomm.com/thomas/tools">程式下載</a>
</li>
<li>
<a href="#">財經資訊</a>
<ul>
<li>
<a href="http://mahaljsp.asuscomm.com:7001/twstock">台灣股市</a>
</li>
<li>
<a href="http://mahaljsp.asuscomm.com:7001/twgold">黃金儲摺</a>
</li>
</ul>
</li>
<li><a href="/logout">登出</a></li>
</ul>
</div>
<div id="div_content">
<h1>Hello I am {{name}}</h1>
<p>{{current_time}}</p>
</div>
<div id="div_copyright">
Power by Thomas Wu(mahaljsp@gmail.com)
</div>
</div>
</body>
</html>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/static/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/static/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
