django学习日志(模板的渲染过程)第六部分:加载静态资源
- 语法
- 在项目目录下新建static文件夹WhatsTemplate\static
- 修改settings.py文件配置静态路由 WhatsTemplate\WhatsTemplate\settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static'),
]
-
配置一些常用的静态文件夹 img–css–js–uploads
-
WhatsTemplate\static\css
-
WhatsTemplate\static\img
-
WhatsTemplate\static\js
-
WhatsTemplate\static\uploads
-
创建一个游戏应用
python manage.py startapp game -
注册一下game
-
修改WhatsTemplate\WhatsTemplate\settings.py
INSTALLED_APPS = [
...
'App',
'game',
]
- 增加一个路由管理
- 修改WhatsTemplate\WhatsTemplate\urls.py
urlpatterns = [
...
url(r'^app/', include('App.urls')),
url(r'^game/', include('game.urls')),
]
from django.conf.urls import url, include
try:
from game import views
except:
from venv.WhatsTemplate.game import views
urlpatterns = [
url(r'^2048/', views.game2048),
]
- 修改WhatsTemplate\game\views.py
from django.shortcuts import render
# Create your views here.
def game2048(request):
return render(request,'2048.html')
-
添加一个文件WhatsTemplate\templates\2048.html
-
启动django服务器python manage.py runserver
-
遇到一个错误
- 解决问题
- 首先需要添加加载静态文件的语法
- 修改 WhatsTemplate\templates\2048.html
{% load staticfiles %} --------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0063)http://www.17sucai.com/preview/23564/2014-05-15/2048/index.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 修改静态文件的路径
- 修改 WhatsTemplate\templates\2048.html //css路径
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="{% static 'css/style.css'%}"> ---------------
- 修改 WhatsTemplate\templates\2048.html //js路径
<p>(↑↓←→) 键盘上下左右按键,开始游戏</p>
<script src="{% static 'js/bind_polyfill.js'%}"></script>
- 打开网址 http://127.0.0.1:8000/game/2048/
- 现在还没有添加css和js文件所以显示如下
- 添加样式和脚本到相应目录里
- 正常显示了
- 也可以添加一张图片