全部文章:
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后如果有跳出欢迎~的字样代表成功汇入了。

最后示範一下如何载入图片
下载这个图片

将图片放到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>