用django搭建一个简易blog系统(翻译)(四)

12. Create the templates

 

  你需要做三件事来去掉TemplateDoesNotExist错误

第一件,创建下面目录

* netmag/netmag/templates

* netmag/netmag/templates/blog

  下一步,你需要配置Django能找到你的templates。打开settings.py文件找到TEMPLATE_DIRS元组。

  你只需要告诉django去哪找你的netmag/netmag/templates目录,所以编辑TEMPLATE_DIRS元组,让它有指向netmag/netmag/templates目录的绝对路径。字符串后面的逗号很重要。在我电脑上的绝对路径是这样的,注意要改成你们自己电脑上的绝对路径。

TEMPLATE_DIRS = (
    "C:/Users/zhanglei/Desktop/netmag/netmag/templates",
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
)

  最后,你需要创建三个模板。第一个是base.html,它是其它模板要继承的模板。创建templates/base.html并且输入下面的代码在里面:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

  现在我们需要再创建两个模板,每个对应一个view函数,创建templates/blog/index.html文件并输入下面的代码:

{% extends 'base.html' %}

{% block title %}Blog Archive{% endblock %}

{% block content %}
    <h1> My Blog Archive</h1>
    {% for post in posts %}
    <div class="post">
        <h2>
        <a href="{{post.get_absolute_url}}">
        {{post.title}}
        </a>
        </h2>
        <p>{{post.description}}</p>
        <p>
            Posted on
            <time datetime="{{post.created|date:'c'}}">
                {{post.created|date}}
            </time>
        </p>
    </div>
    {% endfor %}
{% endblock %}

  最后,创建templates/blog/post.html文件,并且输入下面代码:

{% extends 'base.html' %}

{% block title %}{{post.title}}{% endblock %}

{% block content %}
<article>
    <header>
        <h1>{{post.title}}</h1>
        <p>
            Posted on
            <time datetime="{{post.created|date:'c'}}">
                {{post.created|date}}
            </time>
        </p>
    </header>
    <p class="description">
        {{post.description}}
    </p>
    {{post.content|safe}}
</article>
{% endblock %}

  上面有一些不是HTML的元素

* {% tag %} 是一个模板标签

* {{variable}} 是模板变量

* {{variable|filter}} 是被特定的模板过滤器过滤的模板变量

  关于模板语言,如果想了解更多的话,请查看 https://docs.djangoproject.com/en/1.4/topics/templates/ 值得及花几分钟好好看看。

  讲了够多的理论,现在回到浏览器刷新页面,查看目前为止的成果

  好的,到目前为止,我们已经做了很多了。我们可以回顾一下:

* 编辑urls.py,添加一些把特定的urls映射到view函数的urlpattern

* 写一些view函数来对应相应的URLS

* 为模板创建目录

* 配置django去寻找模板

* 创建base.html模板

* 为每一个view函数创建一个模板

* 简单的学习一下django模板语言

  然而,还有一些问题,blog太单调了。

 

13. Adding some style

 

  添加一点样式,就会让网页的可阅读性大幅提高。这一小部分,我们就给base.html添加一些样式。

  请注意:一些在开发版上用的方法目前觉得还行,但是别用在要上线的服务器上面。用django来管理static文件是对资源的浪费,好一点的解决方案是用web服务器来管理static文件,关于这方面如果想了解更多的话,请查看 https://docs.djangoproject.com/en/dev/howto/static-files/#basic-usage

  创建目录netmag/netmag/static,然后在里面创建一个文件style.css并输入下面代码:

body {
    background-color: #fdfdfd;
    color: #2e2e2e;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 28px;
    font-family: 'Helvetica Neue',Helvetica, Arial, sans-serif;
}
div.content {
    border: 1px solid #fbfbfb;
    background-color: #fff;
    max-width: 640px;
    width: 96%;
    padding: 2%;
    margin:28px auto;
}

  现在在base.html文件里面的头部分添加下面这行代码:

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}style.css">

  在你试着刷新浏览器页面的时候,先停一下,像配置templates位置一样,你需要做一些配置让django知道你的static文件在哪。并且用什么URL来引用它们。

  打开settings.py文件,修改STATIC_URL如下:

STATIC_URL = '/static/'

  下一步修改STATICFILES_DIRS像下面这样:

STATICFILES_DIRS = (
    'C:/Users/zhanglei/Desktop/netmag/netmag/static/',
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
)

  注意:和模板目录一样这里是我的static的绝对目录,读者要改成自己电脑存放static文件的绝对路径。

 

  现在可以刷新一下浏览器查看:

  

  恭喜你,在这个教程教程中,你已经做了这么多:

* 用django-admin.py创建了一个project

* 用django-admin.py创建了一个app

* 为你的app设计model

* 关于数据库和其它的项目配置

* 连接你的应用和系统自带管理app,并且自己写了一个自定义的admin类

* 为你的app写urlpatterns view函数 模板,配置关于templates相关的

* 配置css相关,提高你的网站的颗阅读性

 

14. Suggestions for taking it further

  这部分是一些学习django的建议,就不翻译了,感兴趣的话可以看原文,原文网址 http://www.creativebloq.com/netmag/get-started-django-7132932 第14小节。

  

    

posted @ 2013-10-06 13:14  Tuesday  阅读(597)  评论(0编辑  收藏  举报