第四章-模板和JavaScript
*********************
本章，我们讨论到以下话题：
```
整理base.html模板
包含JavaScript设置
使用HTML5数据属性
在弹窗中显示对象细节
实现不间断滚动
实现Like部件
使用Ajax上传图片
```
## 引言
我们生活在
## 整理base.html模板
>#####提示
## 预热
## 具体做法
执行以下步骤：
1.在模板的根目录中使用下列内容创建一个`base.html`文件：
```python
{#templates/base.html#}
{% block doctype %}<!DOCTYPE html>{% endblock %}
{% load i18n %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}{% endblock %}{% trans "My Website" %}</title>
<link rel="icon" href="{{ STATIC_URL }}site/img/favicon.ico" type="image/png" />
{% block meta_tags %}{% endblock %}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
“ <link href="{{ STATIC_URL }}site/css/style.css" rel="stylesheet" media="screen" type="text/css" />
{% block stylesheet %}{% endblock %}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="{% url "js_settings" %}"></script>
{% block js %}{% endblock %}
{% block extrahead %}{% endblock %}
</head>
<body class="{% block bodyclass %}{% endblock %}">
{% block page %}
<div class="wrapper">
<div id="header" class="clearfix">
<h1>{% trans "My Website" %}</h1>
{% block header_navigation %}
{% include "utils/header_navigation.html" %}
{% endblock %}
{% block language_chooser %}
{% include "utils/language_chooser.html" %}
{% endblock %}
</div>
<div id="content" class="clearfix">
{% block content %}
{% endblock %}
</div>
<div id="footer" class="clearfix">
{% block footer_navigation %}
{% include "utils/footer_navigation.html" %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block extrabody %}{% endblock %}
</body>
</html>
```
2. 在相同的目录中，针对特定的情况创建另外一个命名为`base_simple.html`：
```python
{# templates/base_simple.html #}
{% extends "base.html" %}
{% block page %}
<div class="wrapper">
<div id="content" class="clearfix">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock %}
```
## 具体做法
## 参阅
## 加入JavaScript的设置
