Pinax源代码分析4 - base

最新推荐文章于 2021-11-07 23:16:40 发布

runningtortoise

最新推荐文章于 2021-11-07 23:16:40 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏： Django pyryday 文章标签：代码分析 templates stylesheet div url 扩展

本文链接：https://blog.youkuaiyun.com/runningtortoise/article/details/4365172

pyryday 同时被 2 个专栏收录

46 篇文章

订阅专栏

Django

25 篇文章

订阅专栏

本文分析了Pinax框架的主页实现方式，从URL配置到视图处理，再到模板继承与扩展的过程。介绍了base.html如何作为主模板，通过块(block)机制为子模板提供定制空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Pinax源代码分析4 - base

内部的apps已经大概地看了一遍了，算作概览吧。开始从url着手，再细节一点分析。

主页

url与处理：
django.views.generic.simple import direct_to_template
    url(r'^$', direct_to_template, {"template": "homepage.html"}, name="home"),

模板文件 homepage.html 就在travelsite项目目录下的templates子目录里。它扩展了相同一个目录内的site_base.html：
{% extends "site_base.html" %}
而site_base.html又扩展了base.html，这个文件不知道在哪里。根据settings里的下面几句可以找到：
PINAX_ROOT = os.path.abspath(os.path.dirname(pinax.__file__))
PINAX_THEME = 'default'
TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), "templates"),
    os.path.join(PINAX_ROOT, "templates", PINAX_THEME),
)
可见，模板不是放在当前项目的templates目录里，就是放在pinax package的templates目录里。而且通过修改PINAX_THEME这个变量就可以让整个项目还一套模板。
base在lib/……/templates/default/里，中间太长，懒得打了。大致内容如下：
首先是{% load i18n %}，采用了国际化模块。文档类型采用的strict DTD，utf-8的编码。重要的是title：
<title>{% if site_name %}{{ site_name }} : {% endif %}{% block head_title %}{% endblock %}</title>

可以看到base.html定义了一个 {% block head_title %} 以便子模板扩展，homepage.html中就有如下一句：
{% block head_title %}{% trans "Welcome" %}{% endblock %}

base.html接下来使用{{ MEDIA_URL }}引入了三个css文件，并且定义了一个{% block extra_head_base %}。
        {% block extra_head_base %}
            {% block extra_head %}{% endblock %}
        {% endblock %}

site_base.html就扩展了这个block：
{% block extra_head_base %}
    <link rel="stylesheet" href="{{ MEDIA_URL }}css/site_tabs.css" />
    <link rel="stylesheet" href="{{ MEDIA_URL }}pinax/css/topics.css" />
    <script type="text/javascript" src="{{ MEDIA_URL }}pinax/js/topics.js"></script>
    {% block extra_head %}{% endblock %}
{% endblock %}

base.html在head结束之后，body首先显示的是全站通知(如果有的话)：
{% if site_wide_announcements %}<div id="site_wide_announcements">……

之后是<div id="tabhead">，通常布局里的header，如图：

Pinax导航条

再之后是子导航
        <div id="subnav" class="clearfix">{% block subnav %} {% endblock %}</div>

下面是网页的主体部分，首先是显示messages，其后是{% block body %}，供子模板填入真正的网页主体内容。
        <div id="body">
            {% if messages %}
                ……
            {% endif %}
            {% block body %}
            {% endblock %}
        </div>

然后是footer部分，。
        <div id="footer">{% block footer %}{% endblock %}</div>

最后引入两个js文件。以及一个供扩展的{% block extra_body %}。
        {% block extra_body_base %}
            {% block extra_body %}{% endblock %}
        {% endblock %}

总结一下base.html的大概结构：

<html>
    <head>
        <title>{% block head_title %}{% endblock %}</title>
        {% block extra_head_base %}
            {% block extra_head %}{% endblock %}
        {% endblock %}
    </head>
    <body>
        <div id="tabhead"></div>
        <div id="subnav" class="clearfix"></div>
        <div id="body">
            {% block body %}
            {% endblock %}
        </div>
        <div id="footer">{% block footer %}{% endblock %}</div>
        {% block extra_body_base %}
            {% block extra_body %}{% endblock %}
        {% endblock %}
    </body>
</html>