全部文章:
django入門(一) — 介紹與設定開發環境
django入門(二) — 建立資料庫與專案
django入門(三) — 簡單範例(1)-建立app
django入門(四) — 簡單範例(2)-範本與範本繼承
django入門(五) — 簡單範例(3)-靜態檔
django入門(六) — 資料模型與填充程式
django入門(七) — Django ORM操作
靜態檔包含css、js以及圖檔。
按照下方結構建立static資料夾,以及css、js、img的資料夾,並加入main.css和main.js於資料夾下。
main/
static/
main/
css/
main.css
js/
main.js
img/
將下面css加入main.css
html, body {
margin: 0;
height: 100%;
}
body {
padding: 25px;
}
.wrapper{
min-height: 100%; /*外層高度100%*/
margin-bottom: 100px;
}
.title{
border-radius: 10px;
padding: 0px;
background-color: #DCDAD7;
width: 50%;
border: thin solid gray;
margin-bottom: 25px;
}
.content{
padding: 10px;
border: thin solid gray;
border-radius: 10px;
width: 60%;
}
ul#menu {
margin-bottom: 30px;
text-align: left;
}
ul#menu li {
display: inline-block;
font-size: 25px;
}
.btn {
text-decoration: none;
background: linear-gradient(#f7f7f7, #dedede);
padding: 0.5em 1em;
font-family: Arial;
display: inline-block;
color: black;
font-size: 0.8em;
border: thin solid gray;
}
記得重開伺服器,瀏覽器F5後還是沒有更新頁面的話使用Ctrl+F5。
F5和Ctrl+F5的差別在於,F5是針對瀏覽器緩存做重新整理,而Ctrl+F5是重新向伺服器發出請求。
接著把以下code貼到main.js
$(document).ready(function() {
var hello = '歡迎~';
alert(hello);
});
回到main/main.html 加入{% load static %}到第二行
以及最下面的script區塊,加入到最下面。
{% extends 'main/base.html' %}
{% load static %}
{% block heading %}首頁{% endblock %}
{% block content %}
<h2>{{ hello }}</h2>
{% endblock %}
{% block script %}
<script src="{% static 'main/js/main.js' %}"></script>
{% endblock %}
Ctrl+F5後如果有跳出歡迎~的字樣代表成功匯入了。
最後示範一下如何載入圖片
下載這個圖片
![](https://i.imgur.com/HhRFz9o.png =30%x)
將圖片放到static/main/img底下
main/base.html 蓋掉原先的title
<div class="title">
<img src="{% static 'main/img/django.png' %}" style="height:8%;width:8%">
<h2 style="display:inline">簡單範例 -- {% block heading %}{% endblock %}</h2>
</div>