文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

第四章模板与 JavaScript

发布于 2025-02-26 23:49:05 字数 2799 浏览 0 评论 0 收藏 0

第四章-模板和 JavaScript

本章，我们讨论到以下话题：

整理 base.html 模板

包含 JavaScript 设置

使用 HTML5 数据属性

在弹窗中显示对象细节

实现不间断滚动

实现 Like 部件

使用 Ajax 上传图片

引言

我们生活在

整理 base.html 模板

提示

预热

具体做法

执行以下步骤：

1.在模板的根目录中使用下列内容创建一个 base.html 文件：

{#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>

在相同的目录中，针对特定的情况创建另外一个命名为 base_simple.html ：

{# templates/base_simple.html #}
{% extends "base.html" %}

{% block page %}
  <div class="wrapper">
    <div id="content" class="clearfix">
      {% block content %}
      {% endblock %}
    </div>
  </div>
{% endblock %}