简介:

静态档包含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>