第四章-模板和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的設置
