用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小节。